This page describes how to use a gallery to display items from your dynamic feed for Google Ads. The gallery automatically loads each item in turn, and also tracks the active item so that the exit URL points to a webpage specific to that item.
Using a template
If you use a template from the Dynamic Remarketing for Google Ads category of the Template Gallery (except for the "Dynamic Remarketing Blank Slate" template), your creative already implements tracking as long as you use the default layout.
Follow the instructions on this page if you add additional dynamic elements, or if you design your creative from scratch using the "Dynamic Remarketing Blank Slate" template.
Step 1. Set up the item group
To simplify tracking, you should group multiple elements that you want to display for a single feed item—for example, the title, image, and price for the same item. Using a group allows your creative to track interaction with the group, instead of tracking interaction with each individual element.
-
Create placeholder elements for a single item. For example, this may include the item name and an image of the item.
-
Create a new group with these elements by selecting the elements, right-clicking the selection, then clicking Create group....
-
Enter a group name and click OK.
The group is automatically added to the Library for future use, but don't delete the group instance on the stage yet. You can move it off to the side for now.
Step 2. Display items in a gallery
You can use either the Swipeable Gallery or Carousel Gallery component to display your feed items.
-
Add the gallery to the stage.
-
In the Properties panel for the gallery, set an ID (for example,
gwd-swipegallery_1
). -
In the Groups property field, enter the name of the group that you created earlier (for example,
Group1
).
Step 3. Add dynamic bindings
Connect the creative elements with your feed with dynamic data bindings.
-
In the Dynamic panel, click the Add dynamic bindings button to open the Dynamic Properties dialog.
-
If you haven't yet chosen a data schema, select the schema.
- For each element within the group, bind the individual element's attribute to the corresponding data schema object.
- Add a binding for the group within the gallery, then select the element attribute Repeat for each item in collection. Set the data schema object to the top-level item that matches your data schema (such as Retail or Travel).
- Click OK to save.
You can now delete the group instance from the stage.
Step 4. Add user interaction events to the gallery
All items must include mouseover and mouseout events so the creative can keep track of the active item.
-
Right-click the gallery and select Add event... to add a new Mouse > mouseover event.
-
Select the Custom > gwd.itemMouseover action, then click OK.
-
Add the following additional events to the gallery, for a total of 5 events with the gallery as the target:
Event Action Mouse > mouseover (added in the previous steps) Custom > gwd.ItemMouseover Mouse > mouseout Custom > gwd.ItemMouseout Mouse > click Custom > gwd.exitToItem Swipeable Gallery or Carousel Gallery > Frame activated Custom > gwd.galleryFrameActivated Swipeable Gallery or Carousel Gallery > Frame shown Custom > gwd.galleryFrameShown
Step 5. Make edits in Code view
Switch to Code view to make code changes to finalize the gallery's functionality with your dynamic feed.
-
In Code view, find the group element nested in the gallery element. Add the class
js-item
to the group element.<gwd-swipegallery id="gwd-swipegallery_1" scaling="contain" pause-front-media="" resume-next-media="" class="gwd-swipegallery-19o0" groups="Group1"> <div class="js-item" data-gwd-group="Group1" id="Group1_1" style="height: 100%; width: 100%;" bind-each-item="Product"></div> </gwd-swipegallery>
-
Still in Code view, find the
handleWebComponentsReady
function. Uncomment the line that calls thecommon.setGallery
function by removing the//
characters, then replaceswipegallery-items
with your gallery's ID (for example,gwd-swipegallery_1
)./** * Handles the WebComponentsReady event. This event is fired when all * custom elements have been registered and upgraded. */ function handleWebComponentsReady(event) { // Start the Ad lifecycle. setTimeout(function() { // add reference to your swipegallery to access via custom JS, passing in its ID: //common.setGallery('swipegallery-items'); gwdAd.initAd(); }, 0); }
Other steps
- If you haven't done so yet, you can learn how to create a dynamic data feed.
- Preview your creative with sample data to see how it will look.