Comment installer manuellement Klaviyo.js pour les boutiques Shopify

Objectif de cet article

Découvrez comment installer manuellement l’extrait de code de tracking Active on Site de Klaviyo, également appelé le JavaScript sur site de Klaviyo ou Klaviyo.js, sur votre boutique Shopify. Vous ne devez effectuer cette opération que si vous constatez un trafic Web très élevé ou si votre site souffre de temps de chargement lents pour une autre raison (bien que Klaviyo ait récemment amélioré les temps de chargement et que cela puisse donc ne pas être la cause). Sinon, nous vous recommandons d’installer Klaviyo.js en activant l’intégration de l’application Shopify de Klaviyo.

Avant de commencer

Si vous choisissez d’installer Klaviyo.js manuellement et que vous l’aviez auparavant activé via l’intégration d’application de Klaviyo, vous devez d’abord désactiver l’intégration d’application dans les paramètres de thème Shopify, puis enregistrer la modification.

Installer 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>

1. Dans l’extrait de code, veillez à remplacer PUBLIC_API_KEY par votre clé d’API publique Klaviyo à 6 caractères (ID de site).
2. Si vous avez activé les comptes clients pour votre boutique, utilisez l’ensemble complet de scripts ci-dessous à la place du premier extrait afin d’identifier les clients connectés à l’aide de leur adresse e-mail. Remplacez PUBLIC_API_KEY dans cette version par votre clé d’API publique également :

<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. Ouvrez l’éditeur de code de votre thème Shopify en suivant les instructions de Shopify pour modifier le code du thème.

2. Ouvrez le modèle Liquid ou la section Liquid pour les pages où vous souhaitez les formulaires Klaviyo et le tracking. Si une page utilise un modèle JSON, ajoutez l’extrait à une section Liquid référencée par ce modèle, et non au fichier JSON. Pour en savoir plus, consultez la documentation de Shopify sur le modèle JSON.
3. Collez votre extrait sous le code HTML existant dans le fichier Liquid, en dehors de tout bloc {% schema %}, {% javascript %} ou {% stylesheet %}. N’incluez Klaviyo.js qu’une seule fois sur chaque page.

4. Cliquez sur Enregistrer.

Testez votre tracking d’activité sur le site

Pour tester si votre tracking Actif sur le site est correctement configuré, suivez les étapes suivantes :

1. Accédez à une page de votre boutique sur laquelle vous avez installé le snippet. Si votre boutique exige un consentement au tracking pour votre visite, fournissez-le avant de tester.
2. Sur cette page, ajoutez ce qui suit à la fin de l’URL, en remplaçant example@gmail.com par votre adresse e-mail :
   ?utm_email=example@gmail.com
   
   Si l’URL contient déjà un point d’interrogation (?), ajoutez &utm_email=example@gmail.com à la place, en utilisant votre adresse e-mail.

3. Actualisez la page.
4. Recherchez votre adresse e-mail dans Klaviyo et ouvrez votre profil.
   

Vous devriez voir un profil Klaviyo associé à votre adresse e-mail (créé s’il n’en existait pas déjà). Dans son Journal d’activité, recherchez un évènement Actif sur le site pour votre visite de test.

Maintenant que vous avez installé Klaviyo.js, vous pourrez utiliser le tracking Active on Site, les formulaires d’inscription Klaviyo, et plus encore.

Ressources supplémentaires