PRODUCT
Follow

Prerequisite

Before proceeding please make sure that you completed all of the steps marked in this guide in order to be able to work with our API within the Animate cc. - Animate CC | Setting Up a Project

Please note that when building "HTML5 Standard Banners" for sizmek you don't  have all of the capabilities of "HTML5 Polite Banner", however you can still build Dynamic Creative ads

"HTML5 Standard Banner" limitations:

  • Total weight of zipped workspace together with default image needs to be below 200kb.
  • Only one clickthrough is available, without the capabilities to name it:
EB.clickthrough();
  • Named clickthroughs will simply not work for "HTML5 Standard Banners": 
EB.clickthrough("InteractionName");
  • User Action Counters, Automatic Event counters and timers will not work:
EB.userActionCounter("ActionName");
EB.automaticEventCounter("AutoEventName");
  • Loading modules like 'Video' and 'EBCMD' in "Actions > Global > Script", is not supported.

  • Videos and API Features provided to us by 'EBAPI' and 'Video' Modules are unavailable in standard banners, because those modules, even if declared in a standard banner would simply be ignored by the platform if the ad is uploaded and setup as an "HTML5 Standard Banner". 

Workflow:

1. Prepare your project and setup publish options

Follow this guide to set up your project:
Animate CC | Setting Up a Project
Please make sure to not to load  any modules in "Actions > Global > Script" as stated in the guide.

2. Design the ad

This is a very unstructured part of the guide where a designer designs the actual ad. Having left the creation process open, we do need to adhere to some structuring rules:

a) Do not loop over the timeline if you have script keyframes on the timeline - it will cause multiple event listeners to respond with multiple event handlers on the same movie clips.

b) Always either set "this.stop()" at the very end of the ad's timeline, or disable looping on publish options.

3. Assign a Click-through

Please refer to this guide on tracking interactions - note that the only interaction tracking method from this guide that qualifies for "HTML5 Standard Banners" is:

EB.clickthrough();

Animate CC | Tracking Interactions

It's good practice to have the entire surface of the "HTML5 Standard Banner" clickable, as there are surely no other clickthrough's apart from the main one (they are not supported, please see Limitations section above).

You can use the code snippet below as a quick way to make the entire canvas clickable.

canvas.addEventListener("click", function(){EB.clickthrough();});

Keep in mind that you should not have any CTA's resembling a button while the whole surface of the ad is clickable as per IAB's LEAN spec for 2017.

4. Create a default image

  • Create a static - raster version of your ad with the exact size of the banner - E.g. 300x250.
  • Make sure it has no calls to action in shape of a button within the static image for the same reasons as the step above.
  • Default images need to have a distinctive border, please make sure to give it a "1px black solid" style, if your ad is predominantly black, please use a color that would make the border distinguishable.

    Example of a default image:
    default_image.jpg

5. Place the default image in to your "publish folder" and zip it up together with your other Animate CC publish files and config.js for upload.

Before:

After:

You can now deliver or upload your ad to the platform.

6. Dynamic Creative and publishing optimization.

If you are building an "HTML5 Standard Banner" with "Dynamic Content" please refer to to this guide on optimizing your published ad to work with additional assets and save space.

If it's just an "HTML5 Standard Banner" you can proceed to upload your ad on to the platform and skip this step.

Additional resources

Index and Glossary:

Using Sizmek API functionalities:

For information on building Sizmek HTML5 base formats please visit:

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

Comments