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

Übersicht

Erfahre, wie du Klaviyos Onsite-Tracking-Snippets mithilfe von Google Tag Manager zu deiner Website hinzufügst. Einige Website-Betreiber*innen nutzen Google Tag Manager als zentrale Stelle, um alle Web-Snippets von Drittanbietern zu verwalten, die sie ihrer Website hinzufügen müssen. Klaviyos Onsite-Tracking gehört in diese Kategorie und kann über Google Tag Manager hinzugefügt und verwaltet werden.

Bevor du anfängst

Google Tag Manager einrichten

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

Wenn du neu in der Nutzung von Google Tag Manager bist, sieh dir die Dokumentation zum Einrichten eines Kontos und zum Hinzufügen der Installations-Skripte zu deiner Website an.

Einen neuen Tag erstellen

1. Erstelle im Workspace für deine Website einen neuen Trigger für dein Klaviyo- Active on Site -Tracking. Wir empfehlen, einen separaten Trigger für dein aktiv auf der Website - und Produkt angesehen -Tracking zu erstellen. Das liegt daran, dass das Viewed Product -Tracking nur auf deinen Produktseiten auslöst, während das Active on Site -Tracking auf jeder Seite deiner Website auslösen sollte.
2. Wähle Custom HTML als Tag-Typ aus.

3. Um dein aktiv auf der Website -Snippet in Klaviyo zu finden, klicke auf dein Kontomenü und wähle Integrationen.
4. Klicke hier auf die Schaltfläche für Web-Tracking einrichten oben rechts.

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

7. Lege deinen Trigger so fest, dass er bei einem Seitenaufruf für alle Seiten ausgelöst wird. So wird dein Active on Site -Snippet immer ausgelöst, wenn Kund*innen eine Seite auf deiner Website aufrufen.

8. Speichere deinen neuen Tag. Damit ist das Hinzufügen deines aktiv auf der Website -Tracking-Snippets mit dem Google Tag Manager abgeschlossen.

Du kannst dein Viewed Product -Snippet mit derselben Methode hinzufügen. Passe den Trigger so an, dass er nur auf Seiten ausgelöst wird, die deine Produkte enthalten. Auf einigen Websites kannst du das erreichen, indem du den Trigger so einschränkst, dass er nur auf Seiten ausgelöst wird, deren URL das Wort „product“ enthält.

Onsite-Tracking testen

1. Navigiere zu deiner Website.
2. Füge Folgendes ans Ende der URL an:

?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 Activity Feed ein neues Aktiv auf der Website -Ereignis von der E-Mail-Adresse, die du oben im URL-Parameter eingegeben hast.

Wenn du Probleme hast, dein Viewed Product -Event auszulösen, stelle sicher, dass deine Tags so eingerichtet sind, dass sie in einer bestimmten Reihenfolge ausgelöst werden. Du solltest immer zuerst dein aktiv auf der Website -Snippet auslösen lassen, bevor dein Viewed Product -Snippet ausgelöst wird.

Wenn du beim Versuch, eines der Tracking-Snippets in Google Tag Manager zu speichern, eine Fehlermeldung erhältst, musst du die Snippets direkt in deine Website einfügen.

Google Tag Manager auf Shopify verwenden

Bei Shopify wirst du dazu angehalten, anstatt Google Tag Manager zu verwenden, das Klaviyo-Onsite-Tracking über Klaviyos App-Einbettung in Shopify zu aktivieren. Die App-Einbettung ermöglicht sowohl das Tracking für aktiv auf der Website als auch für Produkt angesehen, vorausgesetzt, sie ist aktiviert und die Einstellung Produkt angesehen ist auf der Seite mit den Integrationseinstellungen aktiviert. Unsere Shopify-Integrationen ermöglichen über die Einstellung Track behavioral events auch Submitted Search, Viewed Collection und Added to Cart.

Wenn du stattdessen Onsite-Tracking über Google Tag Manager hinzufügen möchtest, deaktiviere zuerst das App-Einbetten. Verwende dann den folgenden Code.

„Collections“ sind nicht über Shopifys AJAX API verfügbar, daher werden stattdessen Shopify-Produkt-Tags (Tag) im Snippet unten erfasst.

<script type="text/javascript"> 
//Initialize the Klaviyo object on page load
!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">
//Viewed Product
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("Viewed Product", item);
  klaviyo.trackViewedItem({
    Title: item.Name,
    ItemId: item.ProductID,
    Tags: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// If you would like to add the Added to Cart snippet as well, place that here without its script tags
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>