Follow

Overview

Use this workflow to make your Tumult Hype Standard and Polite ads Sizmek compatible using our attached template. This template includes a set of components that are added using Sizmek specific code. The Sizmek ad capabilities are described according to the ad type.

Feature HTML5 Standard Ad HTML5 Polite Ad Description
Clickthrough     In most cases, you'll use the Sizmek clickthrough feature that is part of Sizmek's HTML5 API. You'll use it via javascript calls like this: EB.clickthrough().
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've used in calls to functions like EB.clickthrough() and EB.userActionCounter(). When the ad is served, the platform tracks these events for eventual display in reports. For more information, see Sizmek HTML5 API.
Video Interactions     Your HTML5 videos can be fully tracked quite easily. We'll discuss how in the adding video appendix at the end of the guide. For more information, see HTML5 Video Module.

Important: We've created an ad template that illustrates use of these features.
You can download it here: Sizmek_HYPE_300x250_Polite.hypetemplate.zip.

The workflow for making your Hype ad compatible is:

  1. Extract and open the provided Sizmek Template in Tumult Hype.
  2. Edit click-throughs and/or custom interactions.
  3. Understanding the Head HTML tab.
  4. Prepare and package the ad as a Sizmek Workspace, then upload it.

Note: For a deeper understanding of some of the code referenced read our buildguides for Sizmek HTML5 Ads available by contacting info@sizmek.com.

Step 1: Extract and Open Hype Template

Procedure
  1. Download the Sizmek Hype Template HERE and extract its contents.
  2. Open Hype and load the extracted template file. Your ad should load and look like the following image:

    You have opened a Sizmek compatible Hype ad and are ready for editing.

Step 2: Edit Click-through and/or Custom Interactions

Sizmek's Hype template comes pre-loaded with three buttons, each assigned to a different Interaction. We will look at the ClickThrough button for this example.

Select the ClickThrough button on the ad's stage and the Actions button in the Inspector. You can see that it has 'On Mouse Click' set to 'Run Javascript', and the function is clickThrough(). This clickThrough() function has its own tab at the top of the ad's stage.

When the clickThrough() tab is selected, you will find the Sizmek code assigned to it. In this case it will fire EB.clickthrough(); when the ClickThrough button is clicked in the ad.

Navigate back to the Ad's stage and see how the UserAction and CustomRedirect buttons are set up. You will see they each have their own function that fires when clicked, and these functions correspond to the tabs across the top of your stage.

The userActionCounter() tab, which corresponds to the UserAction button:

The customRedirect() tab, which corresponds to the CustomRedirect button:

Types of Interactions

The Hype template supports the following Sizmek interactions:

Function Name EB Function Code
ClickThrough EB.clickthrough();
Custom ClickThrough EB.clickthrough("nameOfCustomClickthrough", "http://myclickthroughurl.com");
User Action Counter EB.userActionCounter("nameOfUserActionCounter");
Automatic Event Counter EB.automaticEventCounter("nameOfUserActionCounter");

For more information, see Sizmek HTML5 API.

Note: If you only need to track impressions and clicks, you may be interested in ClickTags.

Step 3: Understanding the Head HTML Tab

Hype gives you the ability to edit the head of your main HTML file that is generated. Our template comes loaded with code to load Sizmek's EBLoader.js library.

Important: EBLoader.js is included in the template, but you can also download it here: EBLoader.js.

At the top of the (uneditable in Hype) code is a link to EBLoader.js.

Inside the script, you MUST have duplicates of the EB functions that you have in your other tabs (with the exception of generic clickthrough()).

This is to allow Sizmek's platform to read your ad's data when uploaded. Since this template uses a User Action and a Custom Redirect, we see both of these entries inside our function.

Step 4: Prepare Workspace and Upload

Important: A Workspace is a directory that contains an index.html file which has a reference to EBLoader.js in it.

Procedure
    1. Save your project.
    2. Export your project as HTML5 into a folder of your choice. (Shift-Command-E)
    3. Make sure to name your root file index.html so that the Sizmek platform correctly reads it.
    4. Navigate to the folder where you saved your ad and zip its contents, which should be the main index.html file and a resource directory with the ad's assets in it.
    5. Your ad is now ready to be uploaded to the Sizmek platform!

Note: For detailed information on how to upload workspaces please refer to our help section here.

Appendix: Adding a Video

Note: video is supported with HTML5 Polite Banner ad format.

Follow this procedure to add tracking for your videos. For more information, see Use the HTML5 Video Module to Track Your Video Interactions

Procedure

Sizmek provides a Hype template pre-loaded with a sample video. Download it HERE: Sizmek_HYPE_300x250_Video.hypetemplate.zip.

After opening the Sizmek template, you can see how video is set up within an ad.

  • Select the video on the stage, then the Identity tab. This will show the 'Unique Element ID' assigned to the video. This is the field that the Sizmek platform will refer to when your ad is uploaded. For sake of simplicity, we have given this video's Display Name, Unique Element ID, and Class name all the same: 'video1'

  • A new script tab has been added that runs when the scene completes loading. You can find this next to the Head HTML tab (see above image Top Right). It is populated with code to load the Sizmek video interaction scripts. This is required for any video that you want to track in the Sizmek platform.

The Ad's Scene information showing the On Scene Load Action & Function:

  • Looking more closely at the new 'initPage()' tab, find the line that refers to 'video1'. Whatever id you choose to use for your video, it is important that this is accurately populated in your script.

Contents of the initPage() tab:

The final step is to let the Sizmek delivery system know that you'd like to use the video module. To do that, we're going to add a tiny bit of javascript to the published index.html file using your text editor.

Navigate to you're the directory you published your project in (Step 4 - Prepare Workspace and Upload). This is where your index.html file is, your folder should look like the following image:

Open the index.html file in the text editor of your choice, copy and paste the code below and then paste it below the <title> tag.

<script type="text/javascript">
    EBModulesToLoad = ['Video'];
</script>

Your index.html file should now contain the above code snippet and look similar to this:

Your ad with video is now ready to be zipped and uploaded to the Sizmek platform.

Appendix: Optimizing Your Ad's File Size

Sizmek gives you the option of serving libraries related to your ad from our servers. This can greatly reduce your ad's published size, saving you overhead and bandwidth. For detailed information on how to use these shared libraries, please visit: How To Use Sizmek's Shared Libraries to Shrink Your Ad's Size.

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

Comments