This article outlines how to use the Google Web Designer (GWD) software to create a HTML5 Expandable Sizmek compatible ad unit. This guide is for HTML5 Expandable banners. If you are building standard/polite - please see our build guide for converting Standard and Polite banners here. If you are building a special format, please contact your creative account manager, or local Sizmek Creative support office before proceeding. Contact links are available on www.sizmek.com
Note: This guide does not outline how to use the GWD software to make animations. For further information on using the GWD software please visit the official Google Ad Designer page here.
EB_GWD_script.js, which can be downloaded here: GWD_Sizmek_Scripts. These will be linked to the project in Add EB Code, Expansion Params and External Scripts.
1. Create an Ad from Scratch
If you are converting your ad from an existing GWD DoubleClick project, please first see Appendix I: Converting an existing GWD doubleclick ad.
- To create an ad from scratch, select New File.
- Select Expandable from the left panel
- In the Environment list, select Non-Google Ad.
- Choose the dimensions, name, location, and animation mode.
- In the Interface View, choose between Design and Code view.
- In the Events > PanelEvents, select Existing Events.
- In the Events, select Add New Event.
- In Asset Library, add assets to project.
- In the Banner View, toggle between Banner and Expanded page
- In the Banner Position, position the expanded panel relative to banner
- In the Timeline, animate elements on timeline with keyframes.
3. Expand and Collapse functions
By default, GWD creates expand and collapse buttons with accompanying code/events and places them on the stage. You can re-skin/re-design the buttons but do not remove the buttons/ events.
To work within Sizmek, extra functions need to be added to each of these buttons.
- Create a new 'Event' for both the expand and collapse buttons.
- In the event panel, select the + button.
This will open the Event Interface box, which will allow you to create events/actions on elements within the ad.
Note: To select the 'expand-button' you must be viewing the collapsed banner. To select the 'close-button' you must be viewing the expanded panel. Toggle between each view by selecting from the page view dropdown menu in the bottom left corner of the stage.
The following table describes the Sizmek expand and collapse events.
|Target||expand or close button|
|Event||Choose Event Type (click/touch/tap etc)|
|Action||Custom > +Add Custom Action|
- Name your function. Choose a unique name that is relevant to the function, with no spaces or special characters in the top dialog box
4. Click-throughs and/or Custom Interactions.
Create a new event. The event interface box will require you to select certain options.
The following outlines the options to choose for Sizmek click-through/custom interaction events.
|Target||The element or tap area to trigger the click-through/custom
|Event||Choose Event Type (click/touch/tap etc)|
|Action||Custom > +Add Custom Action|
- Provide a name for your function. Choose a unique name that is relevant to the function, with no spaces or special characters in the top dialog box:
- Configure the custom interaction:
are strings identifying the interaction and will appear in
reporting. These should be relevant to the interaction
For more information on HTML5 Custom Interactions and
Automatic Event Counters, please see our HTML5 help section.
Note: When previewing the ad locally, you may see errors in the developer console once these EB functions have been added to your project. This is normal for local preview, and once the ad is uploaded to the sizmek platform, these errors will not be triggered.
5. Position Expanded Panel
- Click the ad expansion view button (Figure 1 - 5).
- Position/drag the expanded panel relative to the banner. You cannot move the expanded page beyond the borders of the banner view.
- Before closing, configure the expansion params outlined in the next section.
6. Configure Expansion Parameters (
The expansion params dictate the size and position of expansion for Sizmek ads.
This MUST be included in the ad (These will be added to the project in step 7).
- x-left: the value in pixels that the expanded panel is left of the collapsed banner origin.
- y-top: the value in pixels that the expanded panel is above the collapsed banner origin
- width: the value in pixels of the width of the expanded panel.
- height: the value in pixels of the height of the expanded panel.
- Example 1: By default, the expanded panel is positioned (0,0) relative to the collapsed banner, therefore, when creating from scratch the expansion params would be:
If the position is changed:
Example 2: The expanded panel is 500px by 500px, and the x and y are moved (-180, -154) relative to the collapsed banner.
The EB params would be:
(it is 180 px the the left, and 154px above the collapsed banner).
Note: You can see the x and y relative position of the expanded panel through the interface when positioning the banner.
EB Code, Expansion Params and External Scripts
Once your ad build is complete – you will need to make some minor adjustments to the HTML code of the project.
This does not require any technical knowledge.
- Put the
EB_GWD_script.jsfiles into the root folder of your project folder.
- Change the interface view to Code View.
- Add the ModulesToLoad, external scripts and EB.initExpansionParams.
- Copy and paste the following 4 scripts into the
<head>section of the HTML, directly below the end of the
- Copy in this exact order:
(please note: if you have placed the files in a different directory other than the root folder of your project, please amend the src link accordingly).
- Amend the
At the very bottom of the HTML there will be a block of code that handles the ad load.
Find and modify the
window.addEventListener('WebComponentsReady', handleWebComponentsReady, false);
To: window.addEventListener('WebComponentsReady', initEB, false);
8. Setting a Backup Image
All ads served on sizmek must have a backup image within the workspace folder.
You can either copy the image directly into your project folder, or add it through the interface.
Make sure you are in Design View.
- To add the image through GWD, go to Library > Add Asset.
Important: The back-up image must be the exact dimensions of your ad. Once uploaded to the platform, the dimensions of the ad is determined by the dimensions of the backup image.
- Save the file.
- Close Google Ad designer and do not Publish your project.
9. Create a Workspace
- In the project folder, rename your .html file to index.html.
- Delete the _groups_archive file.
- Zip the entire project folder.
This zip file is now what is referred to as a 'workspace'.
This Workspace can be uploaded to Sizmek as a creative Asset, and you can create a HTML5 ad on the platform.
For detailed information on how to upload Workspaces, and creating HTML5 ads on the platform, please refer to our help section here.
I: Converting an existing GWD DoubleClick ad to a Sizmek Ad.
If you already have an existing project that was made using the 'DoubleClick' environment instead of 'Generic', you can still easily convert them to Sizmek ads without having to re build the project from scratch.
- Open the existing project in Google Ad Designer.
- Change interface to Code View.
- Remove two DoubleClick specific scripts:
In the section of the HTML code, search for the gwddoubleclick_min.js and Enabler.js scripts and delete them:
- Modify gwd- ad wrapper name:
In the of the document change the div wrapper <gwd-doubleclick to <gwd-genericad
Make sure you change this for both the opening and closing tags:
- Save your files and close the project.
- Re-open the project.
The ad will have been automatically converted to the 'generic' ad environment.
Now follow this guide from step 2 to make the Ad Sizmek Compatible and ad Click-throughs/Custom Interactions
Important: If you have specific DoubleClick code within your ad (for example, a doubleClick clickTag) this will need to be removed and updated with the sizmek code outlined in this guide. If you are using special doubleClick/GWD components, these will also need to be modified and/or removed. For more information on supported GWD components, please see Appendix
II: Component Support
Currently, Sizmek does not fully support all of the components available in GWD.
Supported components include all basic events/gestures:
- Tap Area
- Image Button
- Tap to Call
For all other components, we recommend instead using the Sizmek Workspace templates found here: