Mostrar varios elementos dentro de una galería en anuncios dinámicos de Google Ads

En esta página se explica cómo utilizar una galería para mostrar elementos de un feed dinámico en anuncios de Google Ads. La galería carga automáticamente los elementos de uno en uno y también hace un seguimiento de cuál es el elemento activo para que la URL de salida dirija a la página web específica de ese elemento.

Paso 1: Configure el grupo de elementos

Para simplificar el seguimiento, debe agrupar varios elementos que quiera mostrar en un mismo elemento del feed (por ejemplo, el título, la imagen y el precio de un mismo elemento). Al usar grupos, la creatividad puede hacer un seguimiento de la interacción con el grupo en lugar de hacerlo de la interacción con cada elemento por separado.

1. Cree marcadores de posición para cada elemento (por ejemplo, para el nombre y la imagen).

   

2. Cree un grupo con estos elementos. Para hacerlo, selecciónelos, haga clic con el botón derecho sobre la selección y, a continuación, haga clic en Crear grupo.

   

3. Asigne un nombre al grupo y haga clic en Aceptar.

El grupo se añade automáticamente a la biblioteca para que lo pueda utilizar cuando lo necesite, pero no elimine aún la instancia del grupo de la escena. Puede moverlo a un lado por ahora.

Paso 2: Muestre elementos en una galería

Puede utilizar los componentes galería deslizable o galería en carrusel para mostrar los elementos del feed.

1. Añada la galería a la escena.

2. En el panel Propiedades de la galería, especifique un ID (por ejemplo, gwd-swipegallery_1).

3. En el campo de propiedad Grupos, introduzca el nombre del grupo que creó anteriormente (por ejemplo, Group1).

   

Paso 5: Haga cambios en la vista de código

Cambie a la vista de código para editar el código y consolidar la función de la galería con su feed dinámico.

1. En la vista de código, busque el elemento de grupo anidado en el elemento de la galería. Añada la clase js-item al elemento de grupo.

   <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. En la vista de código, busque la función handleWebComponentsReady. Elimine el comentario de la línea que llama a la función common.setGallery quitando los caracteres // y, a continuación, sustituya swipegallery-items por el ID de su galería (por ejemplo, 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);
   }

Otros pasos

• Si aún no lo ha hecho, puede consultar cómo crear un feed de datos dinámicos.
• Previsualice su creatividad con datos de muestra para ver qué aspecto tendría.