Google Web Designer (GWD) Tips and Tricks

How do I create a complete animation banner loop in Google Web Designer (GWD)?
1. Assign an animation label on the timeline within the Events Layer by right clicking your mouse on the timeline and selecting Add label.
2. Go to the last frame of your animation, within the Events layer mouse right click and select Add Event.
3. Double click on the diamond key frame and within the pop up menu select Timeline followed by GotoAndPlay > Top-Back > Label

How to create an animation swipe mask in Google Web Designer (GWD)?
1. Go to the element tool (D) and create a div box on your canvas.
2. Click on the selection tool (V) and double click on the new div box you have created. The box outline will turn red meaning your inside the div box area.
3. Insert your image and animate the position of your image.
4. Exit the div box area to the standard page.
5. Select the div box and under the properties menu under Overflow select hidden.

How to convert Double Click Studio ads to Non Google Ad?
Generic Ads To Adwords/DoubleClick Environment Conversion

Create a new Adwords ad file. This will generate the “gwddoubleclick_min.js” file.

Copy the gwddoubleclick_min.js from the New folder you just created to the existing project folder. This is a required file for DoubleClick ad.

Open the file in GWD.

Switch to Code View.
Search for the following lines in the code:
<script data-source=”gwdgenericad_min.js” data-version=”1″ data-exports-type=”gwd-genericad” type=”text/javascript” src=”gwdgenericad_min.js”></script>

Replace with the following line:
<script data-source=”https://s0.2mdn.net/ads/studio/Enabler.js” data-exports-type=”gwd-doubleclick” type=”text/javascript” src=”https://s0.2mdn.net/ads/studio/Enabler.js”></script>
<script data-source=”gwddoubleclick_min.js” data-version=”1.8″ data-exports-type=”gwd-doubleclick” type=”text/javascript” src=”gwddoubleclick_min.js”></script>

Then, search for the following lines:
<gwd-genericad id=”gwd-ad”>

Replace with the following line:
<gwd-doubleclick id=”gwd-ad” polite-load=””>
<gwd-metric-configuration></gwd-metric-configuration>

Last, search for the following close tag :
</gwd-genericad>

And replace it with:
</gwd-doubleclick>

Save and reopen the file.
Publish the file locally. Then upload to AdWords.

Adwords/DoubleClick Ads To Generic Environment Conversion

Create a new generic ad file. This will generate the “gwdgenericad_min.js” file.

Copy the “gwdgenericad_min.js” from the New folder you just created to the existing project folder of your GWD source html file that you want to convert.

Open the file in GWD.

Switch to Code View.

Find the following line and remove it:
<script data-source=”https://s0.2mdn.net/ads/studio/Enabler.js” data-exports-type=”gwd-doubleclick” type=”text/javascript” src=”https://s0.2mdn.net/ads/studio/Enabler.js”></script>
Search for the following lines in the code:
<script data-source=”gwddoubleclick_min.js” data-version=”1.8″ data-exports-type=”gwd-doubleclick” type=”text/javascript” src=”gwddoubleclick_min.js”></script>

Replace with the following line:
<script data-source=”gwdgenericad_min.js” data-version=”1″ data-exports-type=”gwd-genericad” type=”text/javascript”

Links worth watching:
Dynamic Ad for DCM: <code><a href=”https://www.youtube.com/watch?v=3Ic_l_q8TTQ” target=”_blank”>https://www.youtube.com/watch?v=3Ic_l_q8TTQ</a>
GWD Dynamic: <a href=”https://www.youtube.com/watch?v=Utcrla5rAXk”>https://www.youtube.com/watch?v=Utcrla5rAXk</a>

Solution to minimizing your 10 file count.
If you exceed your 10 file limit in GWD, you can do a few things to reduce your file limit.
1. Merge your images in the one file if possible.
2. Do forget you can incorporate all your text as an outline in one SVG file. Works well with slides or fading opacity.
3. If you are using solid colour as your background you can use the pen tool to draw out your boxes or CSS gradient. These elements do not count as a file.

Your file size exceed the specification to pass through QA
1. If you are using png and can not find a way to reduce the file size, try scaling your image and let the code upscale your image. The image might look a bit blurry but it is a cheat trick that could get you over the line. Always make a backup of the file before making these adjustment.

Google Web Designer

Design Sync, helping you use the tools to get your digital advertising work done.