Preise in dynamischen Google Ads-Anzeigen einblenden

Google Ads-Feeds können mehrere Preise für einen Artikel enthalten, z. B. den regulären Preis und einen Sonderangebotspreis. Sie können den dynamischen Anzeigen in Google Ads über Google Web Designer Funktionen hinzufügen. So legen Sie fest, welcher Preis für jedes Feedelement angezeigt wird.

Weitere Informationen zum Erstellen von dynamischen Anzeigen für Google Ads in Google Web Designer

Für jeden Artikel einen einzelnen Preis anzeigen

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.

Sonderangebotspreis mit dem regulären Preis anzeigen

Mithilfe von Code können Sie festlegen, wie Preise dargestellt werden, je nachdem, ob ein Artikel einen Sonderangebotspreis hat und ob dieser vom regulären Preis abweicht. Im folgenden Beispiel wird der Sonderangebotspreis unter dem regulären Preis angezeigt, der durchgestrichen ist.

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

Dynamic Remarketing Single Page with Panels and Individual CTA Buttons
Dynamic Remarketing with Aligned Panels and Individual CTA Buttons
Dynamic Remarketing with Headline and Individual CTA Buttons
Dynamic Remarketing with Headline and Single CTA Button
Dynamic Remarketing with Pagination and Single CTA
Dynamic Remarketing with Single CTA II

Falls Sie sich mit der Verwendung von Google Web Designer in der Codeansicht auskennen, können Sie den erforderlichen Code auch wie unten beschrieben hinzufügen. Diese Vorgehensweise funktioniert für das dynamische Daten-Schema für den Einzelhandel. Sie können sie jedoch möglicherweise für andere Feedtypen anpassen, indem Sie verschiedene Bindungen verwenden.

1. Textelemente für die Preise erstellen

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

Standardpreis: Dieser Preis wird automatisch angezeigt, wenn kein Sonderangebotspreis vorliegt.
Sonderangebotspreis: Falls er im Feed enthalten ist, wird dieser Preis neben dem regulären Preis angezeigt.
Regulärer Preis: Wenn der Sonderangebotspreis im Feed enthalten ist, wird der reguläre Preis gemeinsam mit dem Sonderangebotspreis eingeblendet. Dabei ist er meistens durchgestrichen. So können Nutzer die Preise vergleichen.

2. Bindungen hinzufügen

Fügen Sie im Steuerfeld Dynamisch folgenden Datenschemaobjekten dynamische Bindungen für Textinhalte der Preiselemente hinzu:

Standardpreis: An Einzelhandel 0 > Niedrigster Preis binden.
Sonderangebotspreis: An Einzelhandel 0 > Sonderangebotspreis binden.
Regulärer Preis: An Einzelhandel 0 > Regulärer Preis binden.

Bei anderen 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 Swipe-Galerie-Gruppe sind, fügen Sie diese Klasse der Gruppeninstanz hinzu.
Standardpreis: Fügen Sie dem Element die Klasse „js-item-price“ hinzu.
Sonderangebotspreis: Fügen Sie dem Element die Klasse „js-item-saleprice“ hinzu.
Regulärer Preis: Fügen Sie dem Element die Klasse „js-item-regularprice“ hinzu.

4. Funktionen hinzufügen

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

Funktionen, wenn eine Swipe-Galerie vorhanden ist

Bei diesem Code hat die Swipe-Galerie die ID „swipegallery-items“. Falls das nicht der Fall ist, ändern Sie den markierten Text in die korrekte ID.

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>

Funktionen, wenn keine Swipe-Galerie vorhanden ist

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);
};

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 isEmptyString(str) {
if (!str) {
return true;
}
str = str.trim();
return !str || !str.length;
};

</script>

5. Ein Ereignis hinzufügen

Wechseln Sie in der Designansicht in den Bereich 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 unten aufgeführten Tabellen, je nachdem, ob Sie eine Swipe-Galerie haben oder nicht:

Ereignis, wenn eine Swipe-Galerie vorhanden ist

Falls nötig, ändern Sie im benutzerdefinierten Code die ID für Ihre Swipe-Galerie.

Ziel	`swipegallery-items`
Ereignis	Swipe-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); }`

Ereignis, wenn keine Swipe-Galerie vorhanden ist

Ziel	`page1`
Ereignis	Seite > Seitenpräsentation möglich
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); }`

War das hilfreich?

Wie können wir die Seite verbessern?