Wie man Klaviyo.js für Shopify Laden manuell installiert

Du wirst lernen

Lerne, wie du Klaviyo's Active on Site Tracking Snippet, auch bekannt als Klaviyo's onsite JavaScript oder Klaviyo.js, manuell in deinem Shopify Laden installierst. Du solltest dies nur tun, wenn du sehr viel Webverkehr hast oder deine Seite aus einem anderen Grund unter langsamen Ladezeiten leidet (obwohl Klaviyo vor kurzem die Ladezeiten verbessert hat und daher möglicherweise nicht die Ursache ist). Andernfalls empfehlen wir dir, Klaviyo.js zu installieren, indem du unter die Einbettung der Klaviyo-App in Shopify aktivierst.

Bevor du beginnst

Wenn du dich dafür entscheidest, Klaviyo.js manuell zu installieren und es zuvor über die App-Einbettung von Klaviyo aktiviert hast, musst du die App-Einbettung zunächst in deinen Shopify-Theme-Einstellungen deaktivieren.

Installiere Klaviyo.js auf deinem Shopify Laden

1. Kopiere das folgende Code-Fragment:

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

2. Ersetze im Code-Fragment den PUBLIC_API_KEY durch deinen sechsstelligen Klaviyo Public API-Schlüssel.
3. Wenn du Kundenkonten für deinen Laden aktiviert hast, füge ein zusätzliches Skript hinzu, um deine Kunden mit der E-Mail zu identifizieren, mit der sie sich in deinem Laden anmelden. 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"> //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"> 
    //Kundenkonten
   var Klaviyo = window.Klaviyo || [];
   if ("{{ customer.email }}" ) {Klaviyo.identify({"$email" : "{{ customer.email }}"})};
   </script>
   

4. Klicke in deinem Shopify Admin auf Online-Shop > Themes. Klicke in der Dropdown-Liste auf Code bearbeiten.
   
5. Suche nach den Dateien, denen du das Snippet hinzufügen möchtest, und klicke darauf, um es im Editor zu öffnen. Du kannst das Snippet zu jeder Seitenvorlage hinzufügen, auf der du Klaviyo Formulare und Tracking auf den entsprechenden Seiten aktivieren möchtest. 
6. Scrolle zum Ende der Datei und füge dein Snippet unter dem anderen Code ein.
   
7. Klicke auf Speichern.

Teste dein Active on Site Tracking

Um zu testen, ob dein Active on Site Tracking richtig eingerichtet ist, befolge diese Schritte:

1. Navigiere zu deiner Website.
2. Füge auf deiner Homepage am Ende der URL Folgendes hinzu und ersetze example@gmail.com mit deiner 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 verfolgt wird.

Jetzt, wo du Klaviyo.js installiert hast, kannst du das Active on Site Tracking, das Klaviyo Anmeldeformular und vieles mehr nutzen. 

Zusätzliche Ressourcen

• Erste Schritte mit Shopify
• Erste Schritte mit Klaviyo Onsite-Tracking
• Erste Schritte mit dem Anmeldeformular