So fügst du Klaviyo Onsite-Tracking mit dem Google Tag Manager hinzu

Du wirst lernen

Erfahre, wie du die Onsite-Tracking-Snippets von Klaviyo mit dem Google Tag Manager zu deiner Website hinzufügst. Einige Website-Betreiber nutzen den Google Tag Manager als zentralen Punkt, um alle Web-Snippets von Drittanbietern zu verwalten, die sie ihrer Website hinzufügen müssen. Das Onsite-Tracking von Klaviyo fällt in diese Kategorie und kann über den Google Tag Manager hinzugefügt und verwaltet werden.

Bevor du beginnst

Google Tag Manager einrichten

Wenn du bereits ein Google Tag Manager-Konto erstellt hast, kannst du diese Schritte überspringen und mit dem Abschnitt zum Erstellen eines Tags fortfahren.
1. Erstelle ein Google Tag Manager-Konto.
2. Füge die Installationsskripte zu deiner Website hinzu.

Wenn du den Google Tag Manager zum ersten Mal verwendest, solltest du dir die Dokumentation zum Einrichten eines Kontos und zum Hinzufügen der Installationsskripte auf deiner Website ansehen.

Einen neuen Tag erstellen

1. Erstelle im Arbeitsbereich für deine Website einen neuen Trigger für dein Klaviyo Active on Site Tracking. Wir empfehlen dir, einen separaten Auslöser für dein Active on Site und Viewed Product Tracking zu erstellen. Das liegt daran, dass das Viewed Product Tracking nur auf deinen Produktseiten ausgelöst wird, während das Active on Site Tracking auf jeder Seite deiner Website ausgelöst werden sollte.
2. Wähle "Benutzerdefiniertes HTML" als Tag-Typ.

3. Um dein Active on Site Snippet in Klaviyo zu finden, klicke auf dein Account-Menü und wähle Integrationen.
4. Klicke oben rechts auf die Schaltfläche für Webtracking einrichten .


5. Kopiere das erste Snippet. 

6. Füge in deinem Google Tag Manager dein Klaviyo Active on Site Snippet in das HTML-Feld ein.

7. Lege deinen Auslöser so fest, dass er bei einer Seitenansicht für alle Seiten ausgelöst wird. Dadurch wird sichergestellt, dass dein Active on Site Snippet immer dann ausgelöst wird, wenn Kunden eine Seite auf deiner Website aufrufen.

8. Speichere deinen neuen Tag. Damit ist das Hinzufügen deines Active-on-Site-Tracking-Snippets mit dem Google Tag Manager abgeschlossen.

Du kannst dein Viewed Product Snippet mit der gleichen Methode hinzufügen. Ändere den Trigger so, dass er nur auf Seiten ausgelöst wird, die deine Produkte enthalten. Auf einigen Websites kann dies erreicht werden, indem der Auslöser nur auf Seiten ausgelöst wird, deren URL das Wort "product" enthält.

Teste dein Onsite-Tracking

1. Navigiere zu deiner Website.
2. Füge das Folgende am Ende der URL hinzu:

?utm_email=klaviyogreen@gmail.com

Du kannst "klaviyogreen@gmail.com" durch deine eigene E-Mail Adresse ersetzen. Drücke die Eingabetaste, um die Seite neu zu laden.

3. Navigiere dann in deinem Klaviyo-Konto zu Dashboard > Activity Feed. Wenn dein Onsite-Tracking korrekt installiert ist, siehst du oben in deinem Aktivitäts-Feed ein neues Ereignis Active on Site von der E-Mail, die du oben in den URL-Parameter eingegeben hast.

Wenn du Probleme damit hast, dass das Ereignis "Gesehenes Produkt" ausgelöst wird, stelle sicher, dass deine Tags so eingestellt sind, dass sie in einer bestimmten Reihenfolge ausgelöst werden. Du willst immer, dass dein "Active on Site "-Snippet vor deinem " Viewed Product" -Snippet erscheint.

Wenn du eine Fehlermeldung erhältst, wenn du versuchst, eines der Tracking-Snippets im Google Tag Manager zu speichern, musst du die Snippets direkt auf deiner Website einfügen.

Google Tag Manager auf Shopify verwenden

Bei Shopify kannst du statt des Google Tag Managers das Onsite-Tracking von Klaviyo über die Klaviyo-App-Einbettung in Shopify aktivieren. Die eingebettete App ermöglicht sowohl das Active on Site- als auch das Viewed Product-Tracking, vorausgesetzt, sie ist umgeschaltet und die Einstellung Viewed Product ist auf der Einstellungsseite der Integration aktiviert. Unsere Shopify-Integration ermöglicht über die Einstellung "Verhaltensereignisse verfolgen" auch " Eingereichte Suche", " Gesehene Kollektion" und "In den Warenkorb gelegt".

Wenn du stattdessen das Onsite-Tracking über den Google Tag Manager hinzufügen möchtest, musst du zuerst die App-Einbettung umschalten. Dann verwende das folgende Snippet.

"Collections" sind nicht über Shopify's AJAX API verfügbar, daher werden Shopify Produkt-Tags (Tag) stattdessen im folgenden Snippet erfasst.

<script type="text/javascript"> 
//Initialisiere das Klaviyo Objekt beim Laden der Seite
!function(){if(!window.Klaviyo){window._klOnsite=window._klOnsite||[];try{window.Klaviyo=new Proxy({},{get:function(n,i){return"Push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.Push([i].concat(o,[function(i){t&&t(i),n(i)}]))});return e}}})}catch(n){window.Klaviyo=window.Klaviyo[],window.Klaviyo.Push=function(){var n;(n=window._klOnsite).Push.apply(n,arguments)}}}}(); </script>
<script type="text/javascript">
//Betrachtetes Produkt
var Klaviyo = window.Klaviyo || [];
product_handle = location.href.Split( '/' ).pop()Split( '?' )[0];
fetch('/products/'+product_handle+'.js').then(function(response){return response.json()})
.then(function(product){
  var item = {
    Name: product.title,
    ProductID: product.id,
    Tags: product.tags,
    ImageURL: "https:"+product.featured_image,
    URL: location.href.split( '/' )[0] + '//' + location.href.split( '/' )[2]+product.url,
    Brand: product.vendor,
    Price: product.price/100,
    CompareAtPrice: product.compare_at_price_max/100
  };
  Klaviyo.track("Gesehen Produkt", Artikel);
  Klaviyo.trackViewedItem({
    Titel: item.Name,
    ItemId: item.ProductID,
    Tag: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadaten: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// Wenn du auch das "Added to Cart"-Snippet hinzufügen möchtest, füge es hier ohne sein Skript ein Tag
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>

Zusätzliche Ressourcen

• Erste Schritte mit Klaviyo Onsite-Tracking
• Verstehen der Nachricht Conversion Tracking
• Leitfaden zur Erstellung einer Browse-Abandonment-Flow