Display multiple items within a gallery in dynamic ads for Google Ads

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.

1. Create placeholder elements for a single item. For example, this may include the item name and an image of the item.

   

2. Create a new group with these elements by selecting the elements, right-clicking the selection, then clicking Create group....

   

3. 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.

1. Add the gallery to the stage.

2. In the Properties panel for the gallery, set an ID (for example, gwd-swipegallery_1).

3. 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.

1. In the Dynamic panel, click the Add dynamic bindings button to open the Dynamic Properties dialog.

2. If you haven't yet chosen a data schema, select the schema.

3. For each element within the group, bind the individual element's attribute to the corresponding data schema object.

   

4. 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).

   

5. 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.

1. Right-click the gallery and select Add event... to add a new Mouse > mouseover event.

   

2. Select the Custom > gwd.itemMouseover action, then click OK.

   

3. 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.

1. 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>

2. Still in Code view, find the handleWebComponentsReady function. Uncomment the line that calls the common.setGallery function by removing the // characters, then replace swipegallery-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.