Follow

Overview

Follow this workflow to make your Google Web Designer HTML5 Standard and Polite ads Sizmek compatible. You will be creating a Google Web Designer (GWD) ad, and then injecting Sizmek specific code into it. We'll introduce the following Sizmek features: 

Note: If you just need to convert your existing project to a Sizmek ad, see Appendix: Convert from DoubleClick.

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('custom_clickthrough_name')
and
EB.userActionCounter('uac_name')
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 a starter-kit project that illustrates use of these features.
You can download it here: sizmek_gwd_starter_kit.zip

The workflow for making your GWD ad Sizmek compatible is:

  1. Create a Non Google ad in GWD.
  2. Deploy Sizmek API reference and polite init code.
  3. Build your ad.
  4. Add clickthroughs, custom interactions, and video tracking.
  5. 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: Create Ad in GWD

Procedure
  1. Open GWD, then create an ad from scratch by selecting "File > New"
  2. Set your Ad Environment to "Non-Google Ad"

 gwdnga.png

The rest of the properties are up to you.
 

Step 2: Deploy Sizmek API reference and Polite init code.

Deploy Sizmek API reference and polite init code.

1. Navigate to your Code view in GWD

codeview.png

2. Paste our API reference just before the closing tag of the head element </head>

head.png


You can use one of the 3 options for this, reference it remotely, secure or non secure version(Sizmek Hosted - No CORS compliance braking) or relatively from within the workspace.

  • If your publisher or channel inverntory spec requires the creative to be secure, you can use:
<script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
 
  • If the security compliance is defined as non secure you can use:
<script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
 
  • Alternatively if you want an SSL independant advert you can use a relatively referenced EBLoader.js library. This also means copying the file physically to both preview folder and publish archive manually as GWD will not do this automatically for you.
<script type="text/javascript" src="/EBLoader.js"></script>
You can download the EBLoader.js library here.

If you are planning to use video with your ad and track it, you need to let our delivery system know by loading the video module.
Add the code snippet like the one on the example below just above your API reference script tag:

<script type="text/javascript">
EBModulesToLoad = ['Video'];
</script>
<script type="text/javascript" src="EBLoader.js"></script>

This is not the full video tracking process but rather a prequisite for video tracking
For more video tracking info please see step 4 - Tracking Video

 
3. Deploy Polite Init
  • While In Code view, navigate to these tree lines
    listeners.png
  • Paste the code below - checkInit function declaration right after them
function checkInit() {
        if (!EB.isInitialized()) {
          EB.addEventListener(EBG.EventName.EB_INITIALIZED, onInit);

        } else {
          onInit();
        }

        function onInit() {
          gwdAd.initAd();
        }
      }
  • Then Change the event handler of 'WebComponentsReady' event listener's event handler function invocation so that it matches the name of the above function - checkInit
window.addEventListener('WebComponentsReady', checkInit, false);
End result should look like the below:
end.png

Step 3: Build your Ad

Step 4: Add Click-through and/or Custom Interactions

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

Clickthrough

Note: Clickthrough using HTML5 API is supported for both HTML5 Standard and Polite Banners.

To add a clickthrough, create an event:

  1. Expand Events section and click (+) button:
  2. Step through the event wizard:
    • Target: select the region on ad you'd like to listen for clicks
    • Event: expand Mouse, then select "click"
    • Action: select Custom, then select +Add Custom Action
    • In the Custom Code dialog, type "clickthrough" or some other name in the function name text field (see image below).
      Then, in the actual custom code, enter Sizmek EB.clickthrough or EB.userActionCounter: :
    ctgwd.png
 

Types of Interactions

Similar to how you added clickthrough support in the previous step, you can add events for the following types of 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.

 

Setting up Video Tracking

1. If you plan to use HTML5 videos in your project, please make sure that the following line - Video Module is present just above the reference to our API.
<script type="text/javascript">
    EBModulesToLoad = ['Video'];
  </script>
<script type="text/javascript" src="EBLoader.js"> </script>
This is further ellaborated on in Step 2 of this guide.

2. Next and final step is declaring a new instance of EBG.VideoModule when your ad is ready. To do this we must navigate to our checkInit function - delpoyed in Step 2,
and edit onInit() function declaration so that it includes this new video tracking instance.
 
  1. Find onInit function declaration in the code from Step 2.
function onInit() {
 gwdAd.initAd();
}
  1. Place the code below right after gwdAd.initAd(); function invocation while matching the video component instance id in document.getElementById selector(outlined in green):
 

function onInit() {
gwdAd.initAd();
var videoOne = new EBG.VideoModule(document.getElementById('video1'));
}
3. Make sure that the id in the selector matches the video component instance ID and that you dont have multiple videos with same ID.
E.g. name in green on both code and component id field:
var videoOne = new EBG.VideoModule(document.getElementById('video1'));

For more details seeSizmek Video Tracking help page.

Step 5: 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. Publish your project. Be sure to choose "Publish Locally".

    Make sure that all checkboxes are are checked, apart from <u>Minify which is left unchecked</u>, then click Publish button.
  3. Now you should have an archive that is packaged, optimized and almost ready for upload. It will be in your project's directory (unless you changed its destination location).
  4. You'll need to copy EBLoader.js if you are using it referenced relatively to the workspace - see Step 2. Download the EBLoader.js script here, and copy it into your published archive..
  5. Add a backup image to the archive. All ads served on Sizmek must have a backup image within the workspace archive.

    The backup image must be the exact dimensions of your ad. Once uploaded to the platform, the dimensions of the ad are determined by the dimensions of the backup image.

    Copy your backup image into your published archive.
    Your published Ad's Archive's contents should now look like:
  6. That's it, you're done. Now, zip up the published directory and upload!

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

 
Once your ad is uploaded, preview it and double check that all the Interactions are tracked as you would expect.

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, see How To Use Sizmek's Shared Libraries to Shrink Your Ad's Size.

Appendix: Need to Convert an Existing DoubleClick Project?

The process for doing this can be summed up briefly as: Replace `doubleclick` scripts and tags with `genericad`.

Procedure

This can be accomplished by either creating a blank Non-Google Ad and borrowing the gwdgenericad_min.js file from it, or reopening the modified html once the changes are made. Here we'll illustrate the latter, manually modifying code:

  1. Switch to code view.
  2. Now, let's find all instances of the string "doubleclick". Click cmd+f (mac) or ctrl+f (windows), and in the search text field, enter "doubleclick".
  3. Wherever you find an instance of that word, replace it with "genericad". A text editor like Sublime Text will make this easier:
  4. Remove reference to Enabler.js script:
  5. Now close the file, then reopen it. When it gets reopened, GWD will generate the necessary .js files for you. However, you'll need to handle the .css files manually. Go ahead and replace the word "doubleclick" with "genericad" in files with the .css extension:
  6. Finally, head back up to step 4 , then follow the process from there (add clickthrough and Sizmek delivery system).

Note: Sometimes things might be trickier, it depends on how the project was set up. In this case, please contact support at support@sizmek.com.

Appendix: Troubleshooting

Missing Include Error

Symptom:
After you've uploaded your assets to platform and completed New Ad form fields, you get the error:

Reason:
A reference to the EBLoader.js was not found in the index.html file. This can happen on older versions of GWD..
GWD will parse the contents of EBLoader.js and inline it directly into the index.html file.

Solution:
To remedy this, open index.html in a text editor, like Sublime Text. Navigate down to where EBLoader.js should be, then remove the inlined stuff, and replace with the correct EBLoader.js inclusion:

<script type="text/javascript" src="./EBLoader.js"></script>
Was this article helpful?
2 out of 4 found this helpful
Have more questions? Submit a request

Comments