Mehrere Elemente in einer Galerie in dynamischen Anzeigen für Google Ads aufrufen

Auf dieser Seite wird beschrieben, wie Sie Elemente aus Ihrem dynamischen Feed für Google Ads in einer Galerie anzeigen können. In der Galerie wird automatisch jedes Element der Reihe nach geladen und das aktive Element erfasst, damit die Exit-URL auf eine Webseite mit Bezug zu diesem Element verweist.

Vorlagen verwenden

Wenn Sie eine Vorlage aus der Kategorie Dynamic Remarketing for Google Ads der Vorlagengalerie verwenden (mit Ausnahme der Vorlage "Dynamic Remarketing Blank Slate") und sich für das Standardlayout entscheiden, ist das Tracking bereits in Ihrem Creative implementiert.

Folgen Sie den Anleitungen auf dieser Seite, wenn Sie zusätzliche dynamische Elemente hinzufügen oder Ihr Creative mit der Vorlage "Dynamic Remarketing Blank Slate" neu erstellen.

Schritt 1: Artikelgruppe einrichten

Sie können das Tracking vereinfachen, indem Sie mehrere Elemente, die Sie für ein einzelnes Feedelement anzeigen möchten, gruppieren, etwa den Titel, das Bild und den Preis für den gleichen Artikel. Wenn Sie eine Gruppe verwenden, kann Ihr Creative die Interaktion mit der Gruppe anstatt mit jedem einzelnen Element erfassen.

1. Erstellen Sie Platzhalterelemente für einen einzelnen Artikel, z. B. für den Namen und ein Bild des Artikels.

   

2. Erstellen Sie eine neue Gruppe mit diesen Elementen. Wählen Sie die Elemente dazu aus, klicken Sie mit der rechten Maustaste auf die Auswahl und klicken Sie dann auf Gruppe erstellen.

   

3. Geben Sie einen Gruppennamen ein und klicken Sie auf OK.

Die Gruppe wird automatisch zur zukünftigen Verwendung in der Bibliothek hinzugefügt, aber löschen Sie die Gruppeninstanz im Anzeigebereich noch nicht. Sie können sie vorerst zur Seite verschieben.

Schritt 2: Artikel in einer Galerie anzeigen

Sie können entweder die Komponente Swipe-Galerie oder Karussell-Galerie verwenden, um Ihre Feedelemente aufzurufen.

1. Fügen Sie die Galerie zum Anzeigebereich hinzu.

2. Legen Sie im Steuerfeld Eigenschaften eine ID für die Galerie fest (z. B. gwd-swipegallery_1).

3. Geben Sie in das Eigenschaftsfeld Gruppen den Namen der Gruppe ein, die Sie zuvor erstellt haben, z. B. Group1.

   

Schritt 3: Dynamische Bindungen hinzufügen

Verknüpfen Sie die Creative-Elemente über dynamische Datenbindungen mit Ihrem Feed.

1. Klicken Sie im Bereich Dynamisch auf die Schaltfläche Dynamische Bindungen hinzufügen, um das Dialogfeld "Dynamische Eigenschaften" zu öffnen.

2. Wenn Sie noch kein Datenschema ausgewählt haben, wählen Sie das Schema aus.

3. Binden Sie für jedes Element in der Gruppe das Attribut des einzelnen Elements an das entsprechende Datenschemaobjekt.

   

4. Fügen Sie eine Bindung für die Gruppe innerhalb der Galerie hinzu und wählen Sie dann das Elementattribut Für jedes Element in der Sammlung wiederholen aus. Setzen Sie das Datenschemaobjekt auf das Element oberster Ebene, das Ihrem Datenschema entspricht, z. B. Einzelhandel oder Reisen).

   

5. Klicken Sie zum Speichern auf OK.

Sie können die Gruppeninstanz jetzt aus dem Anzeigebereich löschen.

Schritt 4: Ereignisse vom Typ "Nutzerinteraktion" zur Galerie hinzufügen

Alle Elemente müssen mouseover- und mouseout-Ereignisse enthalten, damit das aktive Element vom Creative erfasst werden kann.

1. Klicken Sie mit der rechten Maustaste auf die Galerie und wählen Sie Ereignis hinzufügen… aus, um ein neues Ereignis vom Typ Maus > mouseover hinzuzufügen.

   

2. Wählen Sie die Aktion Benutzerdefiniert > gwd.itemMouseover aus und klicken Sie dann auf OK.

   

3. Fügen Sie der Galerie die folgenden zusätzlichen Ereignisse hinzu, um insgesamt fünf Ereignisse mit der Galerie als Ziel festzulegen:

   Ereignis	Aktion
   Maus > mouseover (in den vorherigen Schritten hinzugefügt)	Benutzerdefiniert > gwd.ItemMouseover
   Maus > mouseout	Benutzerdefiniert > gwd.ItemMouseout
   Maus > click	Benutzerdefiniert > gwd.exitToItem
   Swipe-Galerie oder Karussell-Galerie > Frame aktiviert	Benutzerdefiniert > gwd.galleryFrameActivate
   Swipe-Galerie oder Karussell-Galerie > Angezeigter Frame	Benutzerdefiniert > gwd.galleryFrameShown

Schritt 5: Änderungen in der Codeansicht vornehmen

Wechseln Sie zur Codeansicht, um Codeänderungen vorzunehmen und die Galeriefunktionen mit Ihrem dynamischen Feed abzuschließen.

1. Suchen Sie in der Codeansicht das Gruppenelement, das im Galerieelement verschachtelt ist. Fügen Sie dem Gruppenelement die Klasse js-item hinzu.

   <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. Suchen Sie in der Codeansicht nach der Funktion handleWebComponentsReady. Entfernen Sie das Kommentarzeichen für die Zeile, in der die Funktion common.setGallery aufgerufen wird, indem Sie die Zeichen // entfernen. Ersetzen Sie dann swipegallery-items durch die ID Ihrer Galerie (z. B. 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);
   }

Weitere Maßnahmen

• Wenn Sie noch keinen dynamischen Datenfeed erstellt haben, folgen Sie dieser Anleitung.
• Sehen Sie sich Ihre Creatives mit Beispieldaten als Vorschau an.