Submit a request
PRODUCT
Privacy Policy  |  Terms of Use
Follow
Last Update:
  viewable by end users
  editable by agents

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.

NewInterface.jpg

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.

  1. 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:

For information on building Sizmek HTML5 base formats please visit:  

 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments