What to achieve today

● Understand how to use GWD to create a custom Layout for

Adwords Dynamic Ads via Templates

● Understand how to use GWD to create a custom Layout for

Adwords Dynamic Ads from scratch
What is Dynamic Ads?
In 5 Steps

1. Save sample feed from existing campaign

2. Preview GWD template with download sample feed

3. Edit template on GWD UI

4. Change file name before upload

5. Upload to Adwords
Download the Feed!

https://goo.gl/vRj0mb
Create from template

Search “Adwords” and “Dynamic”

Templates
 Current Templates

Blank Slate Single Page with No Details Aligned Panels and Individual CTA Buttons

Headline and Individual CTA buttons Headline and Single CTA Button Individual CTA Button
Select the template

Select “Dynamic Remarketing with Aligned Panels and Individual CTA Choose 300x250
Buttons”
Set up the feed

Copy and paste the feed you

downloaded here
*Instructor to demo how to download a feed from Adwords
Preview the template

Make sure to select the right json feed so that you can see the creative in action!
Anatomy of Template - #1 Binding
Anatomy of Template - #2 Exits

1. Exit to the current feed item’s url

A. Use the Template code by setting the click event action to the predefined Custom event: gwd.
exitToItem, which calls the common.js function: common.exitToItem();

B. Or create your own custom click event handler which calls Enabler.exit, passing in a reference to
the current feed item’s url attribute, eg. Enabler.exit('Product_3_url');

2. Exit to the default url

A. Use the Template code by setting the click event action to the predefined Custom event: gwd.
exitToDefault, which calls the common.js function: common.exitToDefault();

B. Or create your own custom click event handler which calls Enabler.exit(‘default’);
Anatomy of Template - #3 Group

● Groups allow you to define a “master” element that

is re-used in Swipe Gallery

● Similar to how “Symbols” work in Flash

● Go to “Library” -> “Item” to see a group

Make Modification #1 - Changing the position

● Move the text to the bottom and the

image to the top

● Preview and see the creative position

has been changed.
Make Modification #2 - Changing the Swipe Gallery!

● Go into the Div “Div > Div#gallery” by

click on the outer div of the Swipe
Gallery

● Go to properties -> Swipe Gallery and

change the Frames to 2

● Preview now and noticed that it only

shows 2

● *Adjust the Border to width of “141px”

and images’ width to “129px” to see
the creative now have 2 frames
instead of one.
Create from scratch
#1 Open File 300x250 Blank

Copy the download.json to your feed folder and

preview the creative - you should see the creative
in action now!

*Instructor to discuss elements ids

#2 Add Binding to the Image 2 & 3

● Go to Dynamic and click on the icon

● Choose “gwd-image #image2”

● Bind the “Source” to “Product.1.imageUrl”

● Repeat the same for “gwd-image

#image3” this time binding the “Source”
to “Product.2.imageUrl”

● Preview your creative!

#3 Make sure they click to the right exit

● Go to the “gwd-image #image2” in the bottom of

the creative

● Double-click the image twice to go into the inner

div. You should see a Tap Component named
“tap2”

● Right click on the Tap Component and choose

“Add event..”

● Select “Tap Area” -> “Touch/Click” -> “Custom” ->

“Add Custom Action” -> named as gwd.exit2 =
function (event)

● Input code as Enabler.exit

('Product_1_url');

● Repeat the same for “gwd-image #image3” but

this time code as Enabler.exit
('Product_2_url');
● Preview and make sure click is working in Chrome Developer Console!
#4 Add the Product name.

● Go to the second nested Div in the page (see right

diagram)

● Select the i icon on the left Toolbar and draw

a Text Field next to the Image

● Give it a id of “productname2”

● Bind the “Text Content” to “product.2.name”

● Preview your creative and make sure it is working

● Add another TextField next to the 3rd Image and

bind it to “product.3.name”

● You should get something like the one on the

right
#5 Add a Generic button

● In the additional_assets folder in Google Drive,

download the “Checkout the Store” image and
drag it into the root “Div”

● Right click the Image and Select “Wrap”. This will

allow us to place a Tap Component on top of it

● Give the “Tap Component” a id “maincta”

● Right click on the Tap Component and choose

“Add event..”

● Select “Tap Area” -> “Touch/Click” -> “Custom” ->

“Add Custom Action” -> named as gwd.exit_main
= function (event)

● Input code as
Enabler.exit(‘default’);
Publish