PRODUCT
Follow

Overview:

Google Web Designer is a free, professional-grade HTML5 authoring tool.
Apart from building banners for "Double Click" it can also be used to create a "Non-Google Ad", which results in a "Non-Studio-Enabler" output.

Note: None of these guides 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.

Google web designer components:

In order to keep designers focused on design, we released a suite of drag and drop components you can use to bring Sizmek API and functionalities into GWD.

  • Please note that there is nothing that you need to do in code view in order to get started, as all of that is all handled by components you can drag drop and configure.
  • User interactions like clickthrough, expand, collapse, userActionCounter and autoEventCounter are handled with code snippets.
  • Videos are tracked automatically.

Native 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

Sizmek Components Installation guide:

To install any component in Google Web Designer,  you need to:

1.Start a new or open an existing project.

2. Click window on the menu, and make sure that the Components are enabled (visible in tool-set).

3. Then in your components view click the "+" icon to add custom components

components.jpg

4. select your component

Files.jpg

5. Once imported you should get a notification that the Element was imported successfully.

And you should see your new component on the Custom Elements list:

customElements.jpg

We advise installing all components, then restarting Google web designer.

You can download all of the components here:
sizmek_gwd_components.zip

Individual component usage instructions are documented on Guides Below.

Base Component:

Adkit is the Base component and you can select either "standard" for Standard Banner Format or "RichBanner" which covers Polite and Expandable ads from the window properties of the component.

  • RichBanner with our Creative API and all its Modules loaded. (Use for Polite and Expandable Formats - supports Dynamic creative) and you can add the Video Module or not from the window properties
  • Standard - Provides only base functionalities - supports Dynamic creative.

You can also add your image default from window properties, so when you publish the project the image file will be included

szmk-adkit.zip

 

Base config.js files:

Regardless of the format, you are aiming to use, you need to have a config file.

  • Download an empty config.js:
    config.js - non-dynamic ad

  • Download Exemplary dynamic config.js file with all possible dynamic item types:
    config.js - dynamic ad.

Youtube Component:

Dynamic Image and Video Components:

Using Sizmek API functionalities & Sizmek GWD components:

Building Sizmek HTML5 base formats with GWD components:

 

 

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

Comments