Playable Ad Requirements

11 min

your playable ad must be provided as a single zip file the zip file must contain at least one html file if more than one html file is included, the primary one must be called index html not contain any folders all js, assets, etc must be in the root folder not be larger than 5mb not show a close button not contain network calls to external endpoints, unless approved in advance integrating the tre api ⚠️ required steps include the following script at the top of the \<head> section of your html \<script src='https //sdk tresensa com/tre/tre js'>\</script> tre complete call tre complete when the user has completed the ad experience this is usually when the end card will be shown you can optionally provide a reason parameter, which will be included in the analytics to indicate how the user reached the complete state, if applicable // example the user lost the mini game, and is now being shown the end card tre complete("fail"); // example the user is being shown the end card because they were idle for too long tre complete("idle"); // example the user is being shown the end card, with no specific reason given tre complete(); tre open call tre open when the user should be redirected to the ad's final destination (the appstore, for example) it is not necessary to specify a destination url, this will be taken care of in campaign settings // example the user clicked the play now button, take them to the appstore tre open(); tre onviewable if your playable starts any behavior automatically without user interaction, you will need to wait until the ad is viewable on many distribution channels, ads will be loaded in advance of being shown to the user if your ad does things like auto playing a video, showing an intro animation, or starts an idle timer countdown, these could happen before the user has even been shown the ad to handle this properly you need to setup a callback function using tre onviewable that will signal when the user is actually shown the ad // pretend this function is what you use to initialize your playable ad function initializegame() { // specify a callback function to call when the user is shown the ad tre onviewable(adisviewable); // your game code } function adisviewable() { // the user has just been shown the ad, now you can do things like // start playing a video // show an intro animation sequence // start a user idle countdown } ad pause use this event to pause audio/video/animations this event occurs when the ad is temporarily not visible to the user; for example, if an alert appears above the ad, or if the user exits the app while watching the ad window\ addeventlistener('tre pause', function() { // pause audio/video/animations inside here }); ad resume use this event to resume audio/video/animations this event occurs when the ad is once again visible to the user; for example, after dismissing an alert which appeared above the ad, or when the user resumes the app when the ad was playing window\ addeventlistener('tre resume', function() { // resume audio/video/animations inside here }); optional steps tre engage and tre engagementdefined call tre engage when the user has performed an action that indicates they have engaged in a meaningful way with the creative for instance, completing the first move in a puzzle, selecting a character, pressing a start button, etc you should not call tre engage simply because there was a tap somewhere on the screen the engagement event can be used by the tresensa multivariate tester to optimize user engagement with your playable ad if you choose to implement the tre engage() call, you will also need to call tre engagementdefined() when your ad begins // pretend this function is what you use to initialize your playable ad function initializegame() { // let the tre api know that you will be notifying when a user engages with the ad tre engagementdefined(); // specify a callback function to call when the user is shown the ad tre onviewable(adisviewable); // your game code } // pretend this function is called when the player completes a valid move in the game function finishmove() { // the user selected a character this means they've engaged with the ad // you can call this more than once, it will only react the first time tre engage(); // your game code } tre replay call tre replay when the user replays the experience this is only applicable for ads that have replay functionality tre replay(); tre event call tre event to send a custom analytic event these will be tracked, and reporting can be provided on these custom metrics the tre event call takes a single parameter for the event name, which can be any alphanumeric string (+underscores), 20 characters or less tre event("start"); tre event("end");