Rough guide for using Google Web Designer
to build a basic Sizmek HTML5 ad
Design with GWD:
1) Download GWD
2) Open GWD and select “New File”
3) Under “Google Ads” select “Banner”, “Generic” for Environment and then the size of your ad.
4) Design your ad as you wish using the animation tools. There are a lot of instructional videos on
YouTube that cover the basics: https://www.youtube.com/watch?v=56u1v3LsI-k
5) Add in a clickthrough action using the built in tools. This is done in the “Events” tab on the right
Steps:
a.
b.
c.
d.
e.
f.
Click “+”
Under “Target” you want to select your button
Under “Event” select “Mouse” then “click”
Under “Action” select “Generic Ad” then “Exit”
Under “Receiver” select “gwd-ad”
Under “Configuration” type in a URL and turn off the “Collapse on exit” tick box
Once you are completely done with the design of the ad, Save your project and we’ll turn it into a
Sizmek ad.
File Management:
Go to the folder your files are in. In that folder, do the following:
6) Rename your html file to “index.html”
7) Delete the “gwddoubleclick_min.js” file
8) Copy the Sizmek folders linked below to your folder
http://demo.mediamind.com/ScottRies/GWD/folders.zip
Should look like the below:
9) Put your default image into the “assets” or “images” folder
Coding:
You will need to copy/paste 3 lines of code for a Polite or Standard Banner to work.
Open the html file in the program of your choice. Notepad++, TextEdit and Sublime Text 2 are all free
and work well. Feel free to use Dreamweaver or other tools.
10) In the <head> of “index.html” you will need to paste these two lines:
<script src="scripts/EBLoader.js"></script>
<script src="scripts/script.js"></script>
Should end up looking something like this:
11) The last line is for the clickthrough.
Search your html file for “gwdGenericad.exit” to find the default code GWD used for the
clickthrough action.
Delete the single line of code there. Should read something like this:
gwd.actions.gwdGenericad.exit('gwd-ad', 'http://www.myclickthruURL.com', false);
and replace it with the following:
EB.clickthrough();
Should end up looking like this:
The final URL will be managed on the platform instead of hardcoded into the ad.
Upload:
This last section covers bundling your assets, uploading to the platform and creating the final ad.
12) Now that you have your final files ready, zip them into a zip file. Do not include the
“<your_file_name>_groups_archive” file.
13) Log into the platform, go to Manage > Ads > Create New Ad
14) Give it a name and select HTML5 Polite Banner as the ad type
15) Now click on the “Select” button for the Workspace Folder under “Creative”
16)
17)
18)
19)
You will now be able to upload your Zip file to be used as the HTML5 Workspace
Once it is up, you can then select the default image from inside your “assets” or “images” folder.
Add your final clickthrough URL. Be sure to use http://
Click “Save” and your ad is done.
QA:
Final step is to QA your ad is working.
20) Click “Preview” and then click on your button.
If it is working correctly, it will open the URL you gave in step 18
And it will also show “Click” in the Interactions Monitor on the right side of the window.
Resources:
Working HTML5 Workspace template docs:
http://creativezone.mediamind.com/blocks.aspx#ItemName=HTML5%20Rich%20Banner
Example ad preview:
My 300x250 GWD ad (27376052)
http://platform.mediamind.com/Eyeblaster.Preview.Web/Default.aspx?previewID=lgHcI1rU3KG
Iiu54Xw5bhEGv63v5El0uRW8Tau%2FJUVwyy8EZZfpnqQ%3D%3D&AdID=27376052&lang=en-US
© Copyright 2026 Paperzz