Overview
This article outlines how to use the Google Web Designer (GWD) software to create an HTML5 Expandable Sizmek compatible ad unit. This guide is for HTML5 Expandable banners.
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.
Prerequisite
Before proceeding please make sure that you completed all of the steps marked in this guide in order to be able to work with our API within GWD - Google Web Designer | Setting Up a Project
Building Single Expandable Banner
Process:
1. Set up the project
Once you've setup your project with our base "Adkit" component using the AdFormat "RichBanner" from the window properties and completed all of the other steps from this guide you can proceed to develop your banner.
2. Deploy 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.
Procedure
- 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 |
Procedure
- Name your function. Choose a unique name that is relevant to the function, with no spaces or special characters in the top dialog box
- EXPAND:
EB.expand();
- COLLAPSE:
EB.collapse();
3. Position Expanded Panel
Procedure
- Click the ad expansion view button.
- 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.
4. Configure Expansion Parameters (EB.initExpansionParams
)
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 5).
if(0)EB.initExpansionParams(x-left,y-top,width,height);
- 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:
EB.initExpansionParams(0,0,width,height);
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:
if(0)EB.initExpansionParams(180,154,500,500);
(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.
5. Add Expansion Params
Once your expansion parameters are set, you will need to make some minor adjustments to the HTML code of the project.
This does not require any technical knowledge.
Procedure
- Change the interface view to Code View.
- Copy and paste the following snippet into the
<head>
section of the HTML, directly below the end of the</style>
section.
- Copy in this exact place between last <style> and first <script> in <head> of the project:
<script> //replace parameters with your values if(0)EB.initExpansionParams(0, 0, 500, 500); </script>
(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).
6. Set a default image
Create / add a default image to your build - Google Web Designer | Setting a Default Image
7. Publish the ad:
Make sure settings are as below - all mandatory except border color:
verify it works as intended.
8. Zip up
select all relevant assets in the publish folder and zip them up - upload / deliver the ad.
Additional resources:
Google Web Designer index and component installation guide:
Using Sizmek API functionalities & Sizmek GWD components:
- Google Web Designer | Setting Up a Project
- Google Web Designer | Tracking Interactions
- Google Web Designer | Video Component
- Google Web Designer | YouTube Component
- Google Web Designer | Dynamic Creative
For information on building Sizmek HTML5 base formats please visit:
- Google Web Designer | Setting a Default Image
- Google Web Designer | Standard Banner
- Google Web Designer | Polite Banner
- Google Web Designer | Expandable Banner
- Google Web Designer | Converting DoubleClick Ads
Comments