PRODUCT
Follow

The purpose of this page is to provide examples of interaction tracking using "Sizmek Creative API" in Google Web Designer.

Sizmek Video and YouTube GWD Dynamic and Static components are tracked automatically so you don't need to worry about setting that up.

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 GWD - Google Web Designer | 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();

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.

Handling click events on elements:

1. To make an element hot for click event select it on stage

2. Go to "Events" tab and hit a + button to attach an event listener / handler to an element.

Select "Event > Mouse > click"

3. On next prompted menu, select "Custom > Add custom action"

4. Name a gwd object property that will hold your event handler in the first textbox

Make sure to use "szmk_" prefix to be sure that we will not interfere with any existing properties.

5. Deploy the code for your event handler in the second - bigger textbox - in the example below, it's a clickthrough.

6. Hit OK.

Apart from tracking a clickthrough, you can repeat the same process above, changing the GWD object property and event handler in "Custom Code" to track other interactions on other elements.

You can name user action counters and click-through by passing the name in as a string and a first argument:
E.g. 

EB.clickthrough("cta1")
EB.userActionCounter("interacted")

To track automatic event counters directly on the timeline, place the play-head on the desired frame and click a + sign on events layer to add an event key-frame.

 Then select "Action > Custom > + Add custom action"

EB.automaticEventCounter("myCustomTimerInteraction");

You can use the same process to fire timers 

EB.startTimer("myCustomTimerInteraction");

 then create another event keyframe couple of frames later 

 Then select "Action > Custom > + Add custom action"

EB.stopTimer("myCustomTimerInteraction");

What not to do:

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)

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 only 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.

Tracking Interactions with Dynamic Clickthrough URL:

Primary Clickthrough - EB.clickthrough(); without arguments is made dynamic automatically if setup on the platform > ad > mass versioning setup.

Dynamic interaction URL only needs to be used for secondary / additional clickthrough URL tracking with dynamic URL's.

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

Example for additional interactions from config.js used in snippets above

{
      "svKey": "cta1url",
      "svType": "String",
       "value": "https://www.sizmek.com/"
},
{ "svKey": "interactedurl", "svType": "String", "value": "https://www.sizmek.com/" }

 You can track additional interactions or use other methods from our API listed here:
Sizmek HTML5 API

 

Additional resources:

Google Web Designer index and component installation guide:

Using Sizmek API functionalities & Sizmek GWD components:

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