Follow

Overview

You can make your Adobe Animate CC banners Sizmek friendly, create Lean Standard Banners, Rich Media Polite Banners, and use our API to track interactions. We provided a Sizmek Demo Ad along with this guide that can be reviewed for more insight and can download the Sizmek Demo Ad Animate CC project.

Formats and Features

HTML5 Standard banners are the most lean and basic of all Sizmek formats. While weight and performance efficient, this format is limited to only one interaction – EB.Clickthrough(), or a native ClickTag.

HTML5 Polite Banners allow the use of all EBLoader features. For more information, see API documentation

Note: Your Adobe Animate project needs to be built with a single frame / Main movie clip on top architecture. This means making your entire project within a single symbol containing actual animation and timeline actions. This is done so that the code being executed on that single top level frame is not fired repeatedly - breaking interaction tracking and looping control.
Top Level layout.

Example of single frame / single movie clip architecture:
anmf.png
Nested animation example below - contents of the movie clip symbol from 'Main' Frame on the example above. 
cont.png

Feature HTML5 Standard Ad HTML5 Polite Ad Description
Clickthrough In most cases, you will use the Sizmek clickthrough feature that is part of the Sizmek HTML5 API. You'll use it via JavaScript calls as follows:
EB.clickthrough()

Note: Similar to ClickTag support, the platform will read the value of calls to EB.clickthrough() to automatically detect the clickthrough value for the ad, and register that for you during ad upload. For more information, see Sizmek HTML5 API.

Custom Interactions A custom interaction is a tracking statistic that you can define. When you create an ad, the platform reads the files in an ad's workspace and discovers the custom interactions you have used in calls to functions for example:
  • EB.clickthrough('custom_ct')
  • EB.userActionCounter('interaction_name')

Note: When the ad is served, the platform tracks these events for eventual display in reports. For more information, see Sizmek HTML5 API

.
Video Interactions To configure video tracking, copy and paste the snippet to your top level actions frame. This also applies to multiple videos:
createjs.Ticker.addEventListener("tick", tickCheck, false);
  function tickCheck(e){
    createjs.Ticker.removeEventListener("tick", tickCheck);
    $("video").each(function(){new EBG.VideoModule( $(this).get(0) );});
}

The workflow for making your Adobe Animate builds Sizmek-compatible is:

  1. Setup Global Includes and Global Scripts.
  2. Structure your Ad and Configure Tracking.
  3. Publish, Preview, and Debug Your Ad.
  4. Prepare and Package Contents for Upload.
  5. Upload Your Zipped Ad to the Platform.

Important: Download the SizmekDemoAd to help get you started.

For more information on the referenced code, see our build guides for Sizmek HTML5 ads available by contacting info@sizmek.com.

Animate CC: Scopes, Symbols, Instances and Tick Event 

The way createjs API works with the canvas in Animate CC is that it uses instances of symbols (MovieClips, Graphis, Buttons) on stage and allows you to change their properties over time.

  • Scopes: If we want to manipulate a MovieClip on the stage by use of createjs we would want to give it an instance name and then access it by typing this.instanceName on it's parent scope(symbol instance).

    For example, if we want to access mainFrame instance of Symbol 1 MovieClip on top level stage from top level stage, we can simply write: this.mainFrame or we can reference it from the top level stage notation with stage.children[0].mainFrame allowing us more clarity over symbol instance inheritance.

  • Stage: Main top level scope of where the code of your canvas output is executed. Can be accessed by calling this on the top level of the project or by referencing it directly stage.children[0]:

  • Createjs: API used by Animate CC.

  • Symbol: A symbol is a graphic, button, or movie clip that you create in Animate CC.You can then reuse the symbol throughout your project or in other documents - behaving as JS classes.

  • Symbol Instance: An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be different from its parent symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance. More about symbols and symbols instances here.

  • Tick: In Animate CC each time a play head progresses over the frame in a movie clip or stage, it generates it's own heart beat like event - "tick". If we wanted to track tick event of the current movie clip symbol instance we could attach an event listener to statement this - being our current scope. E.g.
    this.addEventListener("tick", function(e){console.log(e);});
    However, if we are listening for an event in a child movie clip instance we can reference it from the top level scope:
    stage.children[0].path.to.instance.addEventListener("tick", function(e){console.log(e);});


Step 1: Set Up Global Includes and Global Scripts

Procedure
  1. Download the EBLoader.js.
  2. Copy the file to a local project directory.
  3. On your Animate CC project, go to Actions > Global > Includes and add the EBLoader.js library.
    includes.png
  4. Go to Global > Script and paste the scripts to declare the video tracking module, or EBCMD and expansions properties if you are building panels for expandable banners.
    globalmod.png
  • To track HTML5 videos:
    EBModulesToLoad = ['Video'];
  • To add a video on an expandable ad's panel:
    EBModulesToLoad = ['Video', 'EBCMD'];
  • To add various global vars , for example. declare a global var for looping with initial value:
    var loopCount = 0;
  • To create a new blank frame on top level Scene, and call it something explanatory like Actions.
    This is where you will assign all click-throughs and video tracking. The method was developed to avoid issues generated by the play head progressing over the frame firing all scripts each time it does it, while keeping all of the commodity of accessing stage and all of the rendered symbols.
    act.png
    If you have a video you want to track, there is 'fire and forget' code snippet, you can use which works on single or multiple videos. This might throw errors if no video elements are present at the time of testing. It's used within this frame, rather than the global script because all of the libraries are ready and the video element is generated. When the play head plays the first frame, it fires the first 'tick' event. For more information, see Working with Videos.videotracking.png
    For more information on tracking userActionCounters or clickthroughs, or assigning expand and collapse methods. Proceed to the next step to build panels.

Step 2: Structure Your Ad and Configure Tracking

Polite Banner Events 

  1. Create a new layer above the stage to host your main movie clip symbol containing your animation. Provide an instance name so that you can reference it and it's nested named symbols.
    main_instance.png
  2. Build your ad inside this movie clip. Name the instances of your symbols used so that you can reference them with code later. Also make sure that you use button symbols for button purposes rather than movie clips.
    button1.png
  3. Go back to the top level Actions frame and code clickthroughs and userActionCounters while using instance names to reference nested symbols. Add Event listeners to nested symbols and populate event handlers with Sizmek Tracking functions.
    Important: If you are copying and pasting these snippets, please make sure to:
    • Reference the right path to the nested symbol instances.
    • Change event handler function definition names in cases of multiple usage of single event listener / handler combinations.

     

    Function Name EB Function Code
    ClickThrough
    this.path.to.symbol.instance.addEventListener("click", clickthroughSizmek);
      function clickthroughSizmek(){
        EB.clickthrough();
      }
    Custom ClickThrough
    this.path.to.symbol.instance.addEventListener("click", customClickthroughSizmek);
      function customClickthroughSizmek(){
        EB.clickthrough('nameOfCustomClickthrough', 'http://myclickthroughurl.com');
      }
    User Action Counter
    this.path.to.symbol.instance.addEventListener("click", userActionSizmek);
      function userActionSizmek(){
        EB.userActionCounter('nameOfUserActionCounter');
      }
    Automatic Event Counter
    this.path.to.symbol.instance.addEventListener("event", automaticEventCounterSizmek);
      function automaticEventCounterSizmek(){
        EB.automaticEventCounter('nameOfAutoEventCounter');
      }
  4. Add looping logic control to the last frame of your looping animation in the main movie clip, and please make sure that the global script for global loop count var in step 1 /4 is declared:
    var loopCount = 0;
    Then add the code to the last frame of your main movie clip timeline.
    loop.png
    Paste this code and adjust the number of loops - currently set to 3:
    loopCount++;
    if(loopCount === 3){
    this.stop();
    }

Polite Banner with Videos

Perform the following procedure to create Sizmek-compatible Polite Banners with videos.

Procedure 
  1. Perform Step 1 / 5.
  2. Use the Components panel to drag your video component instance on to the stage.

  3. Browse for a media asset, and set a class or ID attribute value that you can use to reference the DOM video element. 

  4. Set any required playing options.
  5. Position and resize the component on the stage. This generates a DOM video element on top of the canvas on the final rendered document.
  6. Add the Video Tracking code snippet to the top level Actions layer first frame of your project. No adjustments to the code are required.videotracking.png
    createjs.Ticker.addEventListener("tick", tickCheck, false);
    function tickCheck(e){
      createjs.Ticker.removeEventListener("tick", tickCheck);
      $("video").each(function(){ new EBG.VideoModule( $(this).get(0) ); });
    }

Step 3: Publish, Preview, and Debug Your Ad

Procedure 
  1. Publish your ad by selecting File > Publish.
  2. Select the following Basic Publish Settings.
    publish_set.png
  3. Select the following Advanced Publish Settings.
    hostedlibs.png
  4. Press <Ctrl+Enter> to preview your ad.
  5. You can optimize your ad for shared libraries usage to reduce overall weight, and proceed to next step.

Step 4: Prepare and Package Contents for Upload

Optional optimizations - weight:
Procedure 
  1. Navigate to the folder containing your published file.
  2. Open your .html file and change the reference of createjs library:  For more information about createjs Shared Libraries, see the Appendix.
  3. Remove your local instance of createjs-2015.11.26.min.js from the publish folder as it's now referenced remotely from sizmek CDN.

    Note: Your files may look slightly different based upon your published settings.

  4. Zip up all of the files within the publish folder and provide a name for the folder. 

Step 5: Upload Your Zipped Ad to the Platform

  1. Upload your zip file to the platform as a creative asset. This will create the Sizmek HTML5 Workspace.
  2. Create a new ad, in Shortcuts > Create New Ad.
  3. Select the HTML5 Polite Banner or HTML5 Standard Banner. Interaction functionality depends on which ad type you have chosen.
  4. Link to the Workspace by selecting the zip file in your creative assets list.
  5. Select the backup image from within the Workspace folder. This is defined in the Demo Ad as 300x250_ENG_01.jpg image in the root project directory.
  6. Save the ad.
  7. Preview the ad and verify that the ad is loading and that the interactions are being tracked.

For more information on HTML5 Workspaces, see Overview: HTML5 Workspace 
or contact info@sizmek.com.

Appendix: Optimize Your Ad's Weight and Avoid CORS / SSL Compliance Limitations

Sizmek encourages the use of shared libraries, as advised by the IAB creative guidelines. This allows us to reduce the total weight of the ad’s Workspace on the platform (shared libraries not accounted for), and prevent any potential Cross Origin Resource Sharing (CORS) requests being made to https://code.createjs.com/createjs-2015.11.26.min.js or any other web location which might not be safe-listed by the publisher, or is simply not secure enough - low encryption.

This also means removing the createjs.js file manually from your published project prior to zipping and replacing it's reference in index.html file as a remote sizmek hosted library.

For a full list of hosted libraries that are available, see REFERENCE: HTML5 Shared Libraries.


Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments