Thursday, March 30, 2023

Preise in dynamischen Google Ads-Anzeigen anzeigen - Google Web Designer-Hilfe [gg-webdesigner-de]

Zeigen Sie Preise in dynamischen Google Ads-Anzeigen an

Google Ads-Feeds können mehr als einen Preis für einen Artikel enthalten, z. B. den regulären Preis und einen Sonderangebotspreis. Sie können den dynamischen Google Ads-Anzeigen in Google Web Designer Funktionen hinzufügen, um festzulegen, welcher Preis für jeden Feed-Artikel angezeigt werden soll.

Erfahren Sie mehr über das Erstellen dynamischer Anzeigen für Google Ads in Google Web Designer.

Zeigen Sie einen einzigen Preis für jeden Artikel an

Wenn Ihr Feed nur einen einzigen Preis für jeden Artikel enthält, binden Sie den Textinhalt des Preiselements an das Preisattribut, das Sie anzeigen möchten, z. B. Einzelhandel 0 > Regulärer Preis .

Zeigen Sie den Verkaufspreis neben dem regulären Preis an

Sie können Code verwenden, um festzulegen, wie Preise angezeigt werden, je nachdem, ob ein Artikel einen Verkaufspreis hat und ob der Verkaufspreis vom regulären Preis abweicht. Im Beispiel unten wird der Verkaufspreis des Artikels im Angebot unterhalb des regulären Preises angezeigt, der durchgestrichen dargestellt ist.

Die folgenden responsiven Vorlagen für Google Ads enthalten diese Funktion bereits:

  • Dynamische Remarketing-Einzelseite mit Panels und individuellen CTA-Buttons
  • Dynamisches Remarketing mit ausgerichteten Panels und individuellen CTA-Buttons
  • Dynamisches Remarketing mit Headline und individuellen CTA-Buttons
  • Dynamisches Remarketing mit Überschrift und einzelnem CTA-Button
  • Dynamisches Remarketing mit Paginierung und einzelnem CTA
  • Dynamisches Remarketing mit Single CTA II

Andernfalls können Sie, wenn Sie mit der Verwendung von Google Web Designer in der Codeansicht vertraut sind, den erforderlichen Code hinzufügen, indem Sie die folgenden Schritte ausführen. Dieser Prozess funktioniert für das dynamische Einzelhandelsschema, aber Sie können ihn möglicherweise für andere Feedtypen anpassen, indem Sie andere Bindungen verwenden.

1. Erstellen Sie Textelemente für die Preise

Erstellen Sie im Creative drei Textelemente für die folgenden Preistypen:

  • Standardpreis - Dieser Preis wird von selbst angezeigt, wenn es keinen Verkaufspreis gibt.
  • Aktionspreis – Sofern im Feed angegeben, wird dieser Preis neben dem regulären Preis angezeigt.
  • Regulärer Preis – Wenn der Sonderangebotspreis im Feed bereitgestellt wird, wird dieser Preis neben dem Sonderangebotspreis angezeigt, normalerweise durchgestrichen, damit Betrachter die beiden vergleichen können.

Alle drei Textelemente sollten dasselbe Elternelement haben.

2. Bindungen hinzufügen

Fügen Sie im Bereich „Dynamisch" dynamische Bindungen für Textinhalte der Preiselemente zu den folgenden Datenschemaobjekten hinzu:

  • Standardpreis - An Einzelhandel binden 0 > Niedrigster Preis
  • Verkaufspreis - An Einzelhandel binden 0 > Verkaufspreis
  • Regulärer Preis – An Einzelhandel binden 0 > Regulärer Preis

Für andere Datenschemas als Einzelhandel müssen Sie möglicherweise den Standardpreis und den regulären Preis an dasselbe Datenschemaobjekt binden.

    3. Klassen hinzufügen

    Fügen Sie in der Codeansicht die folgenden Klassen hinzu:

    • Übergeordnetes Element, das die Preise enthält - Fügen Sie dem übergeordneten Element die Klasse js-item hinzu. Wenn Ihre Preise Teil einer Swipeable Gallery-Gruppe sind, fügen Sie diese Klasse der Gruppeninstanz hinzu.
    • Standardpreis - Fügen Sie dem Textelement die Klasse js-item-price hinzu.
    • Verkaufspreis – Fügen Sie dem Textelement die Klasse js-item-saleprice hinzu.
    • Regulärer Preis – Fügen Sie dem Textelement die Klasse js-item-regularprice hinzu.

    4. Funktionen hinzufügen

    Kopieren Sie in der Codeansicht den entsprechenden Code von unten und fügen Sie ihn in Ihr Dokument innerhalb des <head> -Tags ein, je nachdem, ob Ihre Elemente in einer Swipe-Galerie angezeigt werden oder nicht.

    Funktioniert, wenn es eine Swipeable Gallery gibt

    Dieser Code geht davon aus, dass Ihre Swipeable Gallery die ID von swipegallery-items hat. Wenn dies nicht der Fall ist, ändern Sie den hervorgehobenen Text in die richtige ID.

    <script>

      initItemDisplay_ = function(item) {
        gwd.myGallery = document.getElementById('swipegallery-items');
        elems = document.querySelectorAll('#' + gwd.myGallery.id + ' [data-gwd-grp-id=item-name]');
        elemsCta = document.querySelectorAll('#' + gwd.myGallery.id + ' [data-gwd-grp-id=cta-on]');

        var itemPrice = item.querySelector('.js-item-price');
        var itemSalePrice = item.querySelector('.js-item-saleprice');
        var itemRegularPrice = item.querySelector('.js-item-regularprice');
        displayCorrectPrices(itemPrice, itemSalePrice, itemRegularPrice);
        // turn off all item highlights.
        for (let i = 0; i < elems.length; i++) {
          elems[i].style.opacity = 0;
        }
      };

      displayCorrectPrices = function(defaultPrice, salePrice, regularPrice) {
        var priceValues = {
          defaultPrice: defaultPrice && defaultPrice.textContent || null,
          salePrice: salePrice && salePrice.textContent || null,
          regularPrice: regularPrice && regularPrice.textContent || null
        };
        showSalePrice(true, defaultPrice, salePrice, regularPrice);
        if (isSalePriceEnabled_(priceValues)) {
          showSalePrice(true, defaultPrice, salePrice, regularPrice);
        } else {
          showSalePrice(false, defaultPrice, salePrice, regularPrice);
        }

        function showSalePrice(state, defaultPrice, salePrice, regularPrice) {
          showElement(defaultPrice, !state);
          showElement(salePrice, state);
          showElement(regularPrice, state);

          function showElement(el, state) {
            if (!el) return;
            if (state) {
              el.style.opacity = 1;
              el.style.visibility = 'visible';
            } else {
              el.style.opacity = 0;
              el.style.visibility = 'hidden';
            }
          };
        };

        function isSalePriceEnabled_(item) {
          var isEnabled = item.salePrice && item.regularPrice &&
            !isEmptyString(item.salePrice) && !isEmptyString(item.regularPrice) &&
            stringValuesAreUnique(item.salePrice, item.regularPrice);
          return isEnabled;

          function isEmptyString(str) {
            if (!str) {
              return true;
            }
            str = str.trim();
            return !str || !str.length;
          };

          function stringValuesAreUnique(value1, value2) {
            var valuesNotEqual = value1 != value2;
            var valuesBothEmpty = isEmptyString(value1) && isEmptyString(value2);
            return valuesNotEqual && !valuesBothEmpty;
          };
        };
      };

    </script>

    Funktioniert, wenn keine Swipeable Gallery vorhanden ist

    <script>

    initItemDisplay_ = function(item) {
      var itemPrice = item.querySelector('.js-item-price');
      var itemSalePrice = item.querySelector('.js-item-saleprice');
      var itemRegularPrice = item.querySelector('.js-item-regularprice');
      displayCorrectPrices(itemPrice, itemSalePrice, itemRegularPrice);
    };

    displayCorrectPrices = function(defaultPrice, salePrice, regularPrice) {
      var priceValues = {
        defaultPrice: defaultPrice && defaultPrice.textContent || null,
        salePrice: salePrice && salePrice.textContent || null,
        regularPrice: regularPrice && regularPrice.textContent || null
      };
      showSalePrice(true, defaultPrice, salePrice, regularPrice);
      if (isSalePriceEnabled_(priceValues)) {
        showSalePrice(true, defaultPrice, salePrice, regularPrice);
      } else {
        showSalePrice(false, defaultPrice, salePrice, regularPrice);
      }

      function showSalePrice(state, defaultPrice, salePrice, regularPrice) {
        showElement(defaultPrice, !state);
        showElement(salePrice, state);
        showElement(regularPrice, state);

        function showElement(el, state) {
          if (!el) return;
          if (state) {
            el.style.opacity = 1;
            el.style.visibility = 'visible';
          } else {
            el.style.opacity = 0;
            el.style.visibility = 'hidden';
          }
        };
      };

      function isSalePriceEnabled_(item) {
        var isEnabled = item.salePrice && item.regularPrice &&
          !isEmptyString(item.salePrice) && !isEmptyString(item.regularPrice) &&
          stringValuesAreUnique(item.salePrice, item.regularPrice);
        return isEnabled;

        function isEmptyString(str) {
          if (!str) {
            return true;
          }
          str = str.trim();
          return !str || !str.length;
        };

        function stringValuesAreUnique(value1, value2) {
          var valuesNotEqual = value1 != value2;
          var valuesBothEmpty = isEmptyString(value1) && isEmptyString(value2);
          return valuesNotEqual && !valuesBothEmpty;
        };
      };
    };

    </script>

    5. Fügen Sie ein Ereignis hinzu

    Wechseln Sie in der Entwurfsansicht zum Bedienfeld „Ereignisse" und fügen Sie ein neues Ereignis hinzu, um den Code aus dem vorherigen Schritt auszulösen. Konfigurieren Sie das Ereignis gemäß einer der folgenden Tabellen, je nachdem, ob Sie eine Swipe-Galerie haben oder nicht:

    Ereignis, wenn eine Swipe-Galerie vorhanden ist

    Ändern Sie bei Bedarf die ID für Ihre Swipeable Gallery im benutzerdefinierten Code.

    Ziel swipegallery-items
    Fall Wischbare Galerie > Bilder geladen
    Aktion Benutzerdefiniert > Benutzerdefinierte Aktion hinzufügen
    Benutzerdefinierter Code var gallery = document.getElementById(' swipegallery-items ');
    var items = gallery.querySelectorAll('.js-item');
    for (var i = 0; i < items.length; i++) {
    var item = items[i];
    initItemDisplay_(item);
    }     var gallery = document.getElementById(' swipegallery-items ');
    var items = gallery.querySelectorAll('.js-item');
    for (var i = 0; i < items.length; i++) {
    var item = items[i];
    initItemDisplay_(item);
    }     var gallery = document.getElementById(' swipegallery-items ');
    var items = gallery.querySelectorAll('.js-item');
    for (var i = 0; i < items.length; i++) {
    var item = items[i];
    initItemDisplay_(item);
    }

    Ereignis, wenn keine Swipe-Galerie vorhanden ist

    Ziel page1
    Fall Seite > Bereit, die Seite zu präsentieren
    Aktion Benutzerdefiniert > Benutzerdefinierte Aktion hinzufügen
    Benutzerdefinierter Code var items = document.querySelectorAll('.js-item');
    for (var i = 0; i < items.length; i++) {
    var item = items[i];
    initItemDisplay_(item);
    }
    Posted by at

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)