Display multiple items in dynamic ads for Google Ads

When your creative displays more than one feed item at a time, the creative should track the active item so that the exit URL points to a webpage specific to that item.

Using a template

If you use a Google Ads dynamic template (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.

1. Set up the item group

To simplify tracking, you should group multiple elements for the same feed item—for example, the title, image, and price for an item. Instead of tracking interaction with each individual element, your creative just tracks interaction with the group.

  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. Bind the individual element attributes to feed attributes.

  4. Add a binding for the group itself. Make sure you're not in group editing mode (which restricts you to binding child elements of the group), then select the element attribute Repeat for each item in collection and set the data schema object to the top-level item that matches your data schema (such as Retail or Travel).

The group gets automatically added to the Library. Additional instances of the group will display other feed items.

2. Add user interaction events to feed items

All items must include mouseover and mouseout events so the creative can keep track of the active item. The tracking functionality is included in the template's common code, but you need to set up the events that use the tracking code.

Swipeable Galleries

Even if your items are groups within the Swipeable Gallery component, don't add interaction via events listed under Swipeable Gallery. Instead, add Mouse events.

For each item, follow these steps:

  1. Add a new Mouse > mouseover event.

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

  3. Add another event, this one for Mouse > mouseout.

  4. Select the Custom > gwd.itemMouseout action, then click OK.

If your creative uses a Swipeable Gallery to display items, you need to take additional steps.

  1. In the Properties panel for the Swipeable Gallery, set an ID (in the example below, swipegallery-items).

  2. In the Groups property field, enter the ID of the group you want to use to populate the gallery (in the example below, item). The group needs to be present in the Library, but should not have an instance displaying on the stage.

  3. In Code view, add the class js-item to your group element to indicate that it's a feed item.
  4. Still in Code view, find the the handleWebComponentsReady function (which is called when the components have been registered). Call the common.setGallery function, passing in the gallery's ID (in this example, swipegallery-items). This function is already included in the templates, so you'll just need to uncomment this line when adding your gallery.
/**
  * 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);
}

If you're adding items directly to the stage, go to Code view in Google Web Designer and add the following attributes to each item:

  • the class js-item
  • the attribute data-product-index with the value set to the item's index in the feed

The added attributes are highlighted in the example below:

<div data-gwd-group="item-0" class="js-item gwd-div-fksl" data-product-index="0" ...
<div data-gwd-group="item-1" class="js-item gwd-div-gghl" data-product-index="1" ...
<div data-gwd-group="item-2" class="js-item gwd-div-io5d" data-product-index="2" ...
<div data-gwd-group="item-3" class="js-item gwd-div-w41l" data-product-index="3" ...
Was this article helpful?
How can we improve it?