Translating Amazon (Sizmek) Ads To Innovid's Creative API

Description: These instructions give step-by-step instructions on how to replace legacy Amazon (Sizmek) code with Innovid’s open creative API.

Removing Sizmek Code Creative

1. HTML FIles

Unlink the Sizmek API from your document by removing the following script tag from your index.html file 

<script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script>

If your creative has a single click-through, you probably have a script tag that looks like this:

<script type="text/javascript"> var clickTag = "http://www.google.com"; </script>

And another one that looks like this:

<a href="javascript:window.open(window.clickTag)">
some content here
</a>

Both of these should be removed.

 

2. JS Files

Within your JS files, you remove the API initialization function by deleting the following snippet.

adkit.onReady();

Within your JS files, you probably have some other calls to some of the Sizmek API methods; you will recognize those because of the prefix adkit or EB. Please make sure that all of them are removed. (Here you can check their methods API.)

Make sure that you remove any listeners to specific Sizmek API events. (Here you can check their events API.)

For creatives using the Sizmek video API, please make sure that you update the methods and events to match the HTML 5 API that you can find here.

 

Integrating Innovid’s Open Creative API.

Be aware that you only need to integrate our Open Creative API if your creative has multiple click-throughs, has interactivity (including button rollover effects), or requires dynamic capabilities.

1. HTML Files

Attach the following <meta> tag to you index.html file and replace “AD_WIDTH” and “AD_HEIGHT” with the corresponding width and height of the creative. Make sure you place it within the <head> of the document.

<meta name="ad.size" content="width=AD_WIDTH,height=AD_HEIGHT">

Link the below Innovid display connector snippet in your index.html file

<script type="text/javascript" src="https://s-static.innovid.com/creative-technologies/p/api.js"></script>

This should be added within the <head> of the document, make sure that it’s added AFTER the <meta> tag we added in the previous step.

2. JS Files

There’s no need to initialize Innovid’s API; once you attach the <script> tag to your HTML file, the connector is automatically initialized and will expose a window-level object named “IVD,” where you’ll find all the available methods.

If your creative needs to have any kind of interaction other than a single click-through, you must  call the IVD.enableInteractions method first, this will allow the user to interact with the creative.

You will be able to ingest dynamic data coming from a feed by using the IVD.feed object. Implementation is quite easy, below is an example snippet:

let newTitleText = IVD.feed['title_text']

In this example, we’re getting the value of “title_text” from the dynamic feed and can use it wherever we need within the creative.

To fire a click-through you will need to use the method IVD.clickthru.

  • IVD.clickthru should be called within a javascript event. 
  • You’ll need to pass a label that should match the name of the feed field that has the URL that should be fired.
  • You can add as many calls to IVD.clickthru as needed, just make sure that you are using the correct labels for each.

Here’s an example of the correct utilization:

let myDiv = document.getElementById('myDiv');
myDiv.addEventListener("click", function(){ 

IVD.clickthru('my_custom_label');

});

In order to report events, you will need to use either IVD.engage or IVD.report. Both work the same way, but the key difference is:

  • IVD.engage is used for events that are fired by the user.
  • IVD.report is used for events that are automatically fired.

Here is an example of how these should be fired:

let openGalleryButton = document.getElementById('openGalleryButton');
openGalleryButton.addEventListener("click", function(){ 

IVD.engage('Open_Gallery_Button_Clicked');

});




let myGallery = document.getElementById('myGallery');

myGallery.addEventListener("rotate", function(e){

let slideIndex = e.index;

IVD.report(`Gallery_Slide_${slideIndex}_Shown`);
});

Notice that the 'engage' event is being fired on a click(user-initiated) event, and the 'report' event is being triggered automatically with no need for user interaction.

 

Useful Links For Additional Reading

Was this article helpful?
0 out of 0 found this helpful