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

Tracking Interactions:

To track interactions inside of our ad, we will be using our HTML5 Creative API. 
Feel free to explore all methods, however keep in mind we only listed the relevant ones in the list below.
If you are building an "HTML5 Standard Banner" you can only use limited parts of the API, and are limited to only one Clickthrough - EB.clickthrough();

 

1. If you simply want the entire surface of the ad to be hot for click-through you can use this code in global scripts: 

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

2. For individual button instances, you can just add event listeners like so:

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

*Given that the button instance name is cta.

3. You can name user action counters, Click-through, and auto event counter by passing the name in as a string and a first argument:
If you are building an "HTML5 Standard Banner" only one unnamed EB.clickthrough() is allowed.

EB.clickthrough("cta1")
EB.automaticEventCounter("5 seconds in to animation")
EB.userActionCounter("interacted")

Keep in mind you should always have at least one main EB.clickthrough(); without any name passed in as an argument to be accounted towards click through rate in the metrics.

4. When naming interactions in previous step, never pass in a variable or function invocation that return the string with a name, as our platform would not pick it up that way.

//Don't do this
EB.clickthrough(functionInvocation());

EB.automaticEventCounter(functionInvocation() +"seconds in to animation");
EB.userActionCounter(interactedStringVariable)

5. There is a second argument for these 3 you can use to hard-code URL's that would get resolved once interaction is triggered. This does get used with function invocations and variables, however makes sense only with "Dynamic creative".

//Don't do this:
EB.userActionCounter("interacted", "https://www.sizmek.com");
//Don't execute URL's on autoEventCounters - without user interaction it's a missuse.

//Correct Dynamic creative usage:
EB.clickthrough("cta1", adkit.getSVData("cta1url"));
EB.userActionCounter("interacted", adkit.getSVData("interactedurl"));

6. You can fire automaticEventCounter on timeline directly like so:


7. Don't loop the main timeline, always put a this.stop() at the end of your animation or tick off "Loop Timeline".

Passing of the play-head over a script "action" in a frame causes it to get executed - event listeners may get re-applied.

8. You can track interaction times with EB.startTimer()  and EB.stopTimer()

This is useful for tracking duration of hovers or sliders slide interaction duration and plays well with Animate CC. 

To start a timer, please invoke the function, passing in interaction name.

EB.startTimer("myCustomTimerInteraction");

To stop a timer plase invoke the stop function, passing in interaction name.

EB.stopTimer("myCustomTimerInteraction")

 

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