Du willst als Onlineshop Pinterest Ads schalten und brauchst ein funktionierendes E-Commerce Tracking über den Google Tag Manager?
Hier lernst du nicht nur, wie du das Tracking vollumfänglich einrichtest, sondern gewinnst auch tiefgehendes Verständnis über die Funktionsweise des Google Tag Managers.
Code-Snippets zum Kopieren
cjs ee product data to pinterest
function() {
return function(items) {
if (!Array.isArray(items)) {
return items;
}
var prodsForPinterest = items.map(function(prod) {
var prodObj = new Object();
if (prod.item_name) {prodObj.product_name = prod.item_name};
if (prod.item_id) {prodObj.product_id = prod.item_id.toString()};
if (prod.price) {prodObj.product_price = parseFloat(prod.price)};
if (prod.quantity) {prodObj.product_quantity = parseInt(prod.quantity)};
if (prod.item_category) {prodObj.product_category = prod.item_category};
if (prod.item_variant) {prodObj.product_variant = prod.item_variant};
if (prod.item_brand) {prodObj.product_brand = prod.item_brand};
return prodObj;
})
return prodsForPinterest;
}
}
cjs – pinterest Ecommerce items
function() {
var products = {{Ecommerce Items}};
return {{cjs ee product data to pinterest}}(products);
}
Voraussetzungen
- GTM-Basis Code muss im Head Bereich deines Onlineshops implementiert sein
- E-Commerce Data Layer für dein Purchase Event, Add-to-Cart Event und View-Item Event
- Pinterest Ads Account muss erstellt sein
1. Pageview Tag anlegen
Zunächst legen wir dein Pinterest Pageview Tag an. Dafür gehst du auf ads.pinterest.com und klickst hier auf Anzeigen > Conversions.
Hier kannst du dann unter Pinterest Tag auf Tag Manager klicken und wirst den Button „Neues Tag erstellen“ sehen. Dort solltest du zu dieser Ansicht gelangen und kannst dir die Tag-ID herauskopieren.
Nun gehst du in deinen Google Tag Manager Account und öffnest deinen Arbeitsbereich. Hier kannst du jetzt erstmal eine neue Variable für dein Pinterest Tag-ID anlegen. Lege dafür eine Konstante an und füg deine Tag-ID ein.
Nächster Schritt – Du legst ein neues Tag an und konfigurierst es wie folgt:
Hinweis: Wenn du keine produktspezifischen Parameter übergeben möchtest, kannst du hier unter Trigger „All Pages“ auswählen. Problem: Wenn du „All Pages“ auswählst, erhältst du keine Ereignisparameter, weil diese erst nach dem All Pages Trigger (Nämlich im View_item Event) gefeuert werden. Daher nehmen wir in diesem Fall das gtm.load event, das du als benutzerdefiniertes Event anlegen musst.
Abspeichern & das war’s auch schon im ersten Schritt.
2. Add-to-Cart Tag anlegen
Dafür müssen wir uns erst mal einen Überblick über deinen Data Layer verschaffen.
Was ist überhaupt Data Layer?
Ein Data Layer ist ein Skript, was dein Onlineshop versendet, das:
- Ereignisse versendet: Das heißt zum Beispiel, wenn ein Nutzer ein Produkt in Warenkorb gelegt hat, sagt dein Shop dem Google Tag Manager „Ein Produkt wurde in den Warenkorb gelegt„.
- Eventparameter versendet: Zu jedem Event brauchst du einen Data Layer, der event-spezifische Werte wie zum Beispiel: „Welches Produkt wurden Warenkorb gelegt? Wie teuer war dieses Produkt? Von welcher Marke?“ übergibt
Jetzt schauen wir uns erst mal deinen Data Layer an, um zu ermitteln, wie du die Variablen (event-spezifische Werte, die du dem Google Tag Manager „erklärt“ hast) nennen musst, sodass der Google Tag Manager sie erkennt. Da jeder Data Layer leicht anders ist, musst du dort sehr genau sein.
Dafür gehst du jetzt auf „In Vorschau ansehen“ und gibst hier deine Shop-URL ein. Wenn das ganze geladen ist, musst du erstmal einen Testlauf abschließen. Öffne danach wieder dein Vorschaufenster. Dort siehst du auf der linken Seite deine Seitenaufrufe und unter jedem davon verschiedene Events.
Klicke jetzt auf „add_to_cart“ (Bei dir könnte das Event anders heißen) und dann auf Data Layer.
Dort siehst du den Event-Namen auch nochmal unter event: „add_to_cart“.
Add to Cart Trigger anlegen
Dafür legst du im Google Tag Manager unter „Trigger“ einen neuen Trigger vom Typ „Benutzerdefiniertes Event“ an und gibst deinen Eventnamen / Ereignisnamen ein.
Als nächstes benötigen wir den Add-to-Cart Value.
Und wenn du dir jetzt mal meinen Data Layer ansiehst, dann wirst du merken, hier gibt es keinen globalen Add-to-Cart Value, sondern wir bedienen uns am Produkt Preis von dem Produkt, was ich gerade in Warenkorb gelegt habe.
Objects und Arrays im Data Layer
Jetzt tauchen wir ein bisschen tiefer in die Materie der Data Layer ein. Dabei musst du hier erst mal den Unterschied zwischen Objects und Arrays verstehen. Im Grunde sind beides Objects, aber ein Array kann viele verschiedene Objects enthalten, also zum Beispiel viele verschiedene Produkte.
- Ein reines Objekt wird durch { eröffnet und enthält meist produkt-unabhängige Werte wie Transaktions-ID, Transaktions-Summe, Währungscode.
- Ein Array wird durch [ eröffnet und enthält produkt-spezifische Werte, wie z.B. Marke, Produkttitel, Produktpreis – Jeweils für das erste, zweite, dritte, .. Produkt.
Du fragst dich vielleicht: „Wieso muss ich das jetzt wissen?!“
Während du beim Benennen der Variable eines Objekts die Struktur ganz einfach durch einen Punkt trennen kannst, musst du bei einem Array erstmal festlegen, welches Objekt innerhalb dieses Arrays du ansprechen möchtest. Das heißt von welchem Produkt möchte ich überhaupt den Wert wissen?
Das heißt in der Praxis gesprochen: Würden wir hier jetzt Items als Data Layer Variable einstellen wollen, müsste es heißen „ecommerce.items„.
Für die Variable des Produktpreises müssen wir das erste Objekt innerhalb des Arrays ansprechen (Ist zwar auch das Einzige, aber das ist egal). Das erste Produkt wird hingegen mit einer Null angesprochen. Also: „ecommerce.items.0.price„.
Wenn dir hingegen ein globaler Warenkorbwert im Data Layer zur Verfügung steht, solltest du den als Warenkorbwert-Variable nutzen. Zum Beispiel: Im Falle vom Data Layer des WooCommerce-Plugins GTM4WP heißt die Variable „ecommerce.value„.
Schlussendlich musst du genau darauf achten, wie dein Data Layer strukturiert ist.
Aber in meinem Fall ist es jetzt „ecommerce.items.0.price„. Diese Variable legen wir jetzt an:
- Unter Variablen klickst du unter „benutzerdefinierte Variablen“ auf „Neu“
- Benenne die Variable (Nur für dich zur Erkennung, hier muss noch nicht der Data Layer Code platziert werden)
- Wähle unter „Variable konfigurieren“ ► Datenschichtvariable
- Gib deinen Variablen-Code ein (Bei mir „ecommerce.items.0.price„)
- Abspeichern
Tag anlegen
Lege nun ein neues Tag an, benenne es und wähle als Tag-Konfiguration „Pinterest Tag“. Konfiguriere es wie folgt:
- Tag ID: Pinterest-ID Konstante eingeben
- Event to fire: Add to Cart
- Order Value: Deine Variable für Warenkorbwert mit klick auf + Symbol auswählen
- Currency: „EUR“ oder individuell alternative Währungscodes wie USD
- Als Trigger dein Add to Cart Event auswählen
3. Purchase Event anlegen
Dafür gehst du hier wieder zurück in ein Vorschau Fenster klickst unter dem letzten Seitenaufruf deiner Bestellbestätigungsseite auf das purchase event und siehst dir den Data Layer an.
Lege nun auch hier für den Eventnamen einen Trigger vom Typ „Benutzerdefiniertes Ereignis“ an.
Welche Parameter benötigen wir nun als Variablen?
- Finaler Bestellwert: In meinem Fall „ecommerce.value“
- Transaktions-ID: In meinem Fall „ecommerce.transaction_id“
Ermittle deine Variablennamen und lege dafür jeweils Datenschichtvariablen an.
Dann können wir auch schon das Purchase Tag anlegen. Lege wie gewohnt ein neues Tag an und konfiguriere es wie folgt:
- Tag ID: Pinterest-ID Konstante eingeben
- Event to fire: Checkout
- Order Value: Deine Variable für finalen Bestellwert auswählen
- Currency: „EUR“ oder individuell alternative Währungscodes wie USD
- Order-ID: Deine Variable für Transaktions-ID auswählen
- Als Trigger dein Purchase Event auswählen
Abspeichern und fertig.
Testing #1
Wir testen das ganze jetzt erst mal wieder im Vorschau-Fenster. Dafür klickst du auf „In Vorschau ansehen“, damit die Änderungen dafür gespeichert werden und schließt wieder eine Testbestellung ab.
Jetzt gehen wir wieder in unser Vorschau-Fenster und sehen uns an, ob:
- die Events ausgelöst wurden
- und ob die jeweiligen Ereignis Parameter richtig übergeben wurden.
Wird das Pageview Tag ausgelöst?
Prüfe bei einem beliebigen Seitenaufruf, ob das Tag gefeuert wurde. Klicke drauf und gehe sicher, dass alles so aussieht wie hier:
Wird das Add to Cart Tag ausgelöst und stimmen die Werte?
Prüfe beim Klick auf das Add to Cart Event auf der linken Seite, ob das Tag gefeuert wurde. Klicke drauf und gehe sicher, dass alles so aussieht wie hier:
Wird das Purchase Tag ausgelöst und stimmen die Werte?
Prüfe bei einem beliebigen Seitenaufruf, ob das Tag gefeuert wurde. Klicke drauf und gehe sicher, dass alles so aussieht wie hier:
4. Optional: line_items übergeben
Kommen wir nun zum schwierigen Teil des Tutorials, und zwar das Übergeben der line_items.
Dazu müssen wir für das übergeordnete Produkt-Object eine Variable anlegen – Falls die Data Layer Struktur pro Event voneinander abweicht, brauchst du für jedes Event eine Variable.
Das heißt praktisch gesprochen wir wollen z.B. „ecommerce.items„. In meinem Fall ist es hingegen so, dass sich die Struktur des Data Layers für alle Events nicht unterscheidet.
Bei dir könnte es hingegen sein, dass du für dein Add to Cart Event z.B. die Variable „ecommerce.add.items“ anlegen musst. Überprüfe daher unbedingt jeden Event Data Layer nochmal.
Aber in meinem Fall gehe ich jetzt wieder einen Google Tag Manager und lege unter Variablen eine neue Variable an.
Konvertierung des Data Layers
Jetzt kommen wir zum größten Problem beim Pinterest E-Commerce Tracking. Wahrscheinlich ist dein Data Layer im besten Fall in einer GA4-konformen Struktur.
Das heißt: Die einzelnen Ereignisse, Parameter heißen hier zum Beispiel:
- item_id
- item_name
- price
Damit Pinterest die ganzen Ereignis Parameter lesen kann, müssten sie aber heißen:
- product_id
- product_name
- product_price
Nun kommt ein kleiner Workaround mit einer JavaScript Funktion, die unseren Data Layer konvertiert.
Lege dafür eine neue Variable an, nenne sie genau „cjs ee product data to pinterest„. Variable konfigurieren ► benutzerdefiniertes JavaScript. Füge jetzt diesen JS-Code ein:
function() {
return function(items) {
if (!Array.isArray(items)) {
return items;
}
var prodsForPinterest = items.map(function(prod) {
var prodObj = new Object();
if (prod.item_name) {prodObj.product_name = prod.item_name};
if (prod.item_id) {prodObj.product_id = prod.item_id.toString()};
if (prod.price) {prodObj.product_price = parseFloat(prod.price)};
if (prod.quantity) {prodObj.product_quantity = parseInt(prod.quantity)};
if (prod.item_category) {prodObj.product_category = prod.item_category};
if (prod.item_variant) {prodObj.product_variant = prod.item_variant};
if (prod.item_brand) {prodObj.product_brand = prod.item_brand};
return prodObj;
})
return prodsForPinterest;
}
}
Wichtig: Gleiche nun deinen Data Layer mit den Bezeichnungen im JS-Code ab (rot markiert). Wenn sie sich unterscheiden, musst du den Code entsprechend anpassen.
In meinem Fall gehen wir davon aus, dass wir nichts austauschen müssen und speichern die Variable.
„Auftraggeber“ Variable anlegen
Damit jetzt auch immer auf die richtige Variable zurückgegriffen wird, müssen wir eine Variable erstellen, die festlegt, welche Variable als Quelle für die Konvertierung genutzt wird.
Lege nun eine neue Variable an, nenne sie „cjs – pinterest Ecommerce items“ und füge diesen Code ein:
function() {
var products = {{Ecommerce Items}};
return {{cjs ee product data to pinterest}}(products);
}
Wichtig: Wenn sich deine Variable für dein Add to Cart-, View item- und Purchase-Event unterscheidet, musst du pro Event eine davon anlegen (z.B. „cjs – pinterest Ecommerce ATC items„) und deine Quell-Variable (rot-markiert) austauschen.
Nun integrierst du all deine Auftraggeber-Variablen in allen entsprechenden Pinterest-Tags unter „custom parameters“. Setze dort das Häkchen und gib folgende Werte ein:
- Name: „line_items“
- Value: Deine Auftraggeber-Variable des jeweiligen Events
Abspeichern.
Testing #2
Wir gehen jetzt hier wieder in unser Vorschau Fenster, sorgen dafür, dass die ganzen Änderungen gespeichert werden und lösen einen erneuten Testkauf aus.
Werden die line_items beim Pageview Tag übergeben?
Prüfe bei einem Produktseitenaufruf, ob die Produktwerte übergeben wurden und gehe sicher, dass alles so aussieht wie hier:
Wichtig: Die line_items Werte siehst du nur, wenn das Pageview Tag auf einer Produktseite ausgelöst wurde.
Werden die line_items beim Add to Cart Tag übergeben?
Prüfe beim Klick auf das Add to Cart Event, ob die Produktwerte übergeben wurden und gehe sicher, dass alles so aussieht wie hier:
Werden die line_items beim Purchase Tag übergeben?
Prüfe beim Klick auf das Purchase Event, ob die Produktwerte übergeben wurden und gehe sicher, dass alles so aussieht wie hier:
Tags livestellen
Klicke nun im Tag Manager oben rechts auf „Senden“ und veröffentliche alle Tags.
Testing #3
Gehe nun wieder in deinen Pinterest Ads Manager und navigiere zu „Events testen“.
Gib hier deine Shop-URL ein und tätige einen (hoffentlich) letzten Testkauf. Nach Abschluss kannst du im Ads Manager alle Events inkl. korrekter Ereigniswerte sehen, wenn du alles richtig eingerichtet hast.
Fertig ist die Magie!
