Comment installer manuellement Klaviyo.js pour les boutiques Shopify

Vous apprendrez

Apprenez à installer manuellement le snippet de suivi Active on Site de Klaviyo, également connu sous le nom de Klaviyo's onsite JavaScript ou Klaviyo.js, sur votre boutique Shopify. Vous ne devriez le faire que si vous avez un trafic web très élevé ou si votre site souffre d'un temps de chargement lent pour toute autre raison (bien que Klaviyo ait récemment amélioré les temps de chargement et ne soit donc peut-être pas la cause). Sinon, nous vous recommandons d'installer Klaviyo.js à l'adresse en activant l'intégration de l'application Shopify de Klaviyo.

Avant de commencer

Si vous choisissez d'installer manuellement Klaviyo.js et que vous l'aviez précédemment activé via l'application intégrée de Klaviyo, vous devez d'abord désactiver l'application intégrée dans les paramètres de votre thème Shopify.

Installez Klaviyo.js sur votre boutique Shopify

1. Copiez l'extrait de code ci-dessous :

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

2. Dans l'extrait de code, veillez à remplacer PUBLIC_API_KEY par Klaviyo votre clé d' à sixAPI chiffres.
3. Si vous avez activé les comptes clients pour votre magasin, ajoutez un script supplémentaire pour identifier vos clients avec l'email qu'ils utilisent pour se connecter à votre magasin. L'ensemble des scripts ressemblera à ce qui suit :

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
   <script type="text/javascript"> //Initialise l'objet Klaviyo au chargement de la page !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"> 
    //comptes clients
   var Klaviyo = window.Klaviyo || [] ;
   if ("{{ customer.email }}" ) {Klaviyo.identify({"$email" : "{{ customer.email }}"})} ;
   </script>
   

4. Dans l'administration de Shopify, cliquez sur Online Store > Themes. Dans la liste déroulante, cliquez sur Modifier le code.
   
5. Recherchez les fichiers auxquels vous souhaitez ajouter le snippet et cliquez pour l'ouvrir dans l'éditeur. Vous pouvez ajouter le snippet à n'importe quel modèle de page où vous souhaitez activer les formulaires Klaviyo et le suivi sur les pages correspondantes. 
6. Faites défiler le fichier jusqu'en bas et collez votre extrait sous l'autre code.
   
7. Cliquez sur Enregistrer.

Testez votre suivi des actifs sur le site

Pour vérifier que le suivi de Active on Site est correctement configuré, procédez comme suit :

1. Naviguez vers votre site web.
2. Sur votre page d'accueil, ajoutez ce qui suit à la fin de l'URL, en remplaçant example@gmail.com avec votre adresse e-mail :
   ?utm_email=example@gmail.com
   
   
3. Rechargez la page.
4. Recherchez votre adresse e-mail dans Klaviyo.
   

Vous devriez voir qu'un profil Klaviyo a été créé pour vous (s'il n'en existait pas déjà un) et que cette activité a été suivie dans votre flux d'activité.

Maintenant que vous avez installé Klaviyo.js, vous pourrez utiliser le suivi actif sur le site, les formulaires d'inscription Klaviyo, etc. 

Ressources complémentaires

• Démarrer avec Shopify
• Démarrer avec le suivi sur site de Klaviyo
• Les formulaires d'inscription