Articles in this section

  1. Introduction
  2. HTML in Text Editor
  3. Adobe Animate CC
  4. Google Web Designer
  5. Universal iframes
  6. Adobe Edge Animate
  7. Adobe Flash
Updated
Follow

Google Web Designer

IMPORTANT: If you want to create a Rich Media ad, it is always recommended to start working from one of our templates. Our templates are developed and maintained by a dedicated support team and contain lots of bug fixes.

Existing Google Web Designer creations can be integrated in our platform.

Requirements

In order to make Google Web Designer ads compatible with our platforms it is important to use "Non-Google Ad" environment in the settings when creating a new project:

gwd_image.jpg

This setting is required for both methods we explain below.

If you have created or started your project using an "Adwords" or "DoubleClick" environment, you can manually modify the project in order to meet the requirements. If this is the case, follow the steps indicated in the following Google help article: Switching from an AdMob, AdWords, or DoubleClick ad to a generic ad

2 Methods

A) Modify the Google Web Designer published HTML file in order to make it Weborama compliant.

B) Move the Google Web Designer content into one of our templates.

Which one to choose?

It depends on the type of format you are working on. If it’s for a regular in-page ad, the decision is easy: option A. If your creation will run on a more complex kind of format/set, for example a floor-ad or a home-page takeover, you would be beter off using option B.

Option A: Modify a Google Web Designer HTML file

  1. Publish your Google Web Designer content by using the Google Web Designer application and make sure a ZIP file is created of your flattened files (see the settings panel when publishing your content). Please also make sure the 'Skin loading delay' option is turned on.
    exportGWD.png

  2. Open the ZIP, and open the index.html file

  3. Our meta data indicates the type and size of the ad. We call this “Weborama Screenad Meta Data”. Add this to the head of your HTML file, and edit the SCRWIDTH and SCRHEIGHT to the width and height of your creation. The SCRFORMAT represents what kind of element the ad unit is, this can be either banner or layer: 
    <!-- WEBORAMA SCREENAD META DATA (don't edit/remove) -->
    <!-- SCRVERSION: screenad_interface_1.0.3 -->
<!-- SCRWIDTH: 300 -->
<!-- SCRHEIGHT: 250 -->
<!-- SCRFORMAT: banner -->

  4. Our “Screenad” library included with a script tag, also needs to be added to the HTML file.

    <script type="text/javascript" src="//media.adrcdn.com/scripts/screenad_interface_1.0.3_scrambled.js"></script>

  5. Lastly, the click. If you only have an exit click as user interaction implemented in your creation, please add the click to body and a pointer cursor:

    <body onclick="screenad.click();" style="cursor:pointer;">

    If you are making use of other user interactions besides the click, add the screenad.click on the correct element, instead on the body. Please test this thoroughly.

More information about this available at our Screenad API.

Option B: Move Google Web Designer content

This option implies not modifying the GWD material but moving it into one of our plain HTML templates.

Follow these steps to move/duplicate your creation into the template:

  1. Publish your Google Web Designer content by using the Google Web Designer application and make sure a ZIP file is created of your flattened files (see the settings panel when publishing your content). Please also make sure the 'Skin loading delay' option is turned on.
    exportGWD.png

  2. Open the ZIP and copy all items within the ZIP, and paste them in the same folder of the Weborama plain HTML template.

  3. Open the HTML file of the Weborama plain HTML template. Add a click layer and an object or iframe tag to body. Edit the width and height of the object/iframe to the size of your creation. The data attribute specifies the URL of the resource to be used by the object, your Google Web Designer HTML file.

    <div id="clickLayer" onclick="screenad.click();"></div>
<object width="970" height="500" data="index.html"></object>

  4. Make sure all your files are in the same folder (flattened) when you upload this to the Weborama Previewer.

Alternatively you can use our regular screenad click within your creation instead of the clickLayer element by using the right scope. In order to use a screenad property or method, for example a click command, you need to add window.parent as a prefix so that the scope is correct. For example: window.parent.screenad.click();

Be careful with the properties of the iframe/object; use the right size and disable borders and scrollbars.

 

Questions, help?

If you have any questions or suggestions please let us know at support@weborama.nl, or submit a request using the menu at the top of this page.

Related articles

Comments

0 comments

Please sign in to leave a comment.