Follow

Overview

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.

Prerequisite

To complete a conversion, it is necessary to have the external javascript files EBLoader.js and 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.

Procedure
  1. To create an ad from scratch, select New File.
  2. Select Expandable from the left panel
  3. In the Environment list, select Non-Google Ad.
  4. Choose the dimensions, name, location, and animation mode.

  1. In the Interface View, choose between Design and Code view.
  2. In the Events > PanelEvents, select Existing Events.
  3. In the Events, select Add New Event.
  4. In Asset Library, add assets to project.
  5. In the Banner View, toggle between Banner and Expanded page
  6. In the Banner Position, position the expanded panel relative to banner
  7. 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.

Procedure
  1. Create a new 'Event' for both the expand and collapse buttons.
  2. 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();

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
interaction.
Event Choose Event Type (click/touch/tap etc)
Action Custom > +Add Custom Action
 
Procedure
  1. 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:


  2. Configure the custom interaction:

    EB.userActionCounter("myCustomInteraction");
    or
    EB.automaticEventCounter("myAutomaticEvent");

    Notes: myCustomInteraction and myAutomaticEvent
    are strings identifying the interaction and will appear in
    reporting. These should be relevant to the interaction
    being tracked.
    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

Procedure
  1. Click the ad expansion view button (Figure 1 - 5).
  2. Position/drag the expanded panel relative to the banner. You cannot move the expanded page beyond the borders of the banner view.
  3. Before closing, configure the expansion params outlined in the next section.

6. 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 7).

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:

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.

7. Add 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.

Procedure
  1. Put the EBLoader.js and EB_GWD_script.js files into the root folder of your project folder. 
  2. Change the interface view to Code View.
  3. Add the ModulesToLoad, external scripts and EB.initExpansionParams.
  4. Copy and paste the following 4 scripts into the <head> section of the HTML, directly below the end of the </style> section.
  5. Copy in this exact order:
  <script>
    EBModulesToLoad = ['EBCMD'];
  </script>
  <script type="text/javascript" src="./EBLoader.js"></script>
  <script src="EB_GWD_script.js" type="text/javascript"></script>
  <script>
    window.addEventListener('load', function() {
      if (!EB.isInitialized()) {
        EB.addEventListener(EBG.EventName.EB_INITIALIZED, startAd);
      } else {
        startAd();
      }

      function startAd() {
        //replace parameters with your values from step 4 of guide
        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).

For Example:

  1. Amend the WebComponentsReady event Listener.
    At the very bottom of the HTML there will be a block of code that handles the ad load.
    Find and modify the webComponentsReady event listener:

  1. Replace handleWebComponentsReady with initEB
  2. Change:
    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.

Prerequisite

Make sure you are in Design View.

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

  2. Save the file.
  3. Close Google Ad designer and do not Publish your project.

9. Create a Workspace

Procedure
  1. In the project folder, rename your .html file to index.html.
  2. Delete the _groups_archive file.

  3. 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.

APPENDIX

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.

Procedure
  1. Open the existing project in Google Ad Designer.
  2. Change interface to Code View.
  3. 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:
  1. 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:
    BEFORE:

    AFTER:
  1. Save your files and close the project.
  2. 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
  • Gesture
  • Image Button
  • Tap to Call
  • Iframe

For all other components, we recommend instead using the Sizmek Workspace templates found here:

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

Comments