So installierst du Klaviyo.js manuell für Shopify-Shops

Übersicht

Erfahre, wie du Klaviyos Active on Site -Tracking-Snippet, auch bekannt als Klaviyos Onsite JavaScript oder Klaviyo.js, manuell in deinem Shopify-Shop installierst. Das solltest du nur tun, wenn du sehr hohen Web-Traffic verzeichnest oder deine Website aus einem anderen Grund unter langen Ladezeiten leidet (Klaviyo hat die Ladezeiten kürzlich verbessert und ist daher möglicherweise nicht die Ursache). Andernfalls empfehlen wir, Klaviyo.js zu installieren, indem du Klaviyo Shopify-App-Einbettung aktivierst.

Bevor du anfängst

Wenn du dich dafür entscheidest, Klaviyo.js manuell zu installieren und es zuvor über Klaviyos App-Einbettung aktiviert hattest, musst du zuerst die App-Einbettung in den Shopify-Theme-Einstellungen deaktivieren.

Installiere Klaviyo.js in deinem Shopify-Shop

1. Kopiere das Code-Fragment unten:

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

1. Achte im Code-Fragment darauf, PUBLIC_API_KEY durch deinen sechsstelligen öffentlichen Klaviyo API-Schlüssel zu ersetzen.
2. Wenn du Kund*innen-Konten für deinen Shop aktiviert hast, füge ein zusätzliches Skript hinzu, um deine Kund*innen anhand der E-Mail-Adresse zu identifizieren, die sie zum Anmelden in deinem Shop verwenden. Der vollständige Satz an Skripten sieht wie folgt aus:

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
<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">
//Customer accounts
var klaviyo = window.klaviyo || [];
if ("{{ customer.email }}") {klaviyo.identify({"$email" : "{{ customer.email }}"})};
</script>

1. Klicke in deinem Shopify-Administrator auf Onlineshop > Themes. Klicke in der Drop-down-Liste auf Code bearbeiten.
   

2. Suche nach den Dateien, zu denen du das Snippet hinzufügen möchtest, und klicke sie an, um sie im Editor zu öffnen. Du kannst das Snippet zu beliebigen Seitenvorlagen hinzufügen, auf denen du Klaviyo-Formulare und Tracking auf den entsprechenden Seiten aktivieren möchtest.
3. Scrolle bis zum Ende der Datei und füge dein Snippet unter dem anderen Code ein.
   

4. Klicke auf Speichern.

Teste dein „Auf Seite aktiv“-Tracking

Um zu testen, ob dein aktiv on Site -Tracking richtig eingerichtet ist, folge diesen Schritten:

1. Navigiere zu deiner Website.
2. Füge auf deiner Startseite den folgenden Text an das Ende der URL an und ersetze dann example@gmail.com durch deine E-Mail-Adresse:
   ?utm_email=example@gmail.com

3. Lade die Seite neu.
4. Suche in Klaviyo nach deiner E-Mail-Adresse.

Du solltest sehen, dass ein Klaviyo-Profil für dich erstellt wurde (falls noch nicht vorhanden) und dass diese Aktivität in deinem Aktivitäts-Feed nachverfolgt wurde.

Nachdem du Klaviyo.js installiert hast, kannst du das aktiv auf Site-Tracking, Klaviyo-Anmeldeformular und mehr nutzen.

Weitere Ressourcen