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|
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
|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:
- Extract and open the provided Sizmek Template in Tumult Hype.
- Edit click-throughs and/or custom interactions.
- Understanding the Head HTML tab.
- 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 firstname.lastname@example.org.
Step 1: Extract and Open Hype Template
- Download the Sizmek Hype Template HERE and extract its contents.
- 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.
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|
|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.
- Save your project.
- Export your project as HTML5 into a folder of your choice. (Shift-Command-E)
- Make sure to name your root file index.html so that the Sizmek platform correctly reads it.
- 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.
- 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
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:
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.
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.