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.

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 à six chiffres.
2. Si vous avez activé Comptes clients pour votre boutique, ajoutez un script supplémentaire afin d’identifier vos clients grâce à l’e-mail qu’ils utilisent pour se connecter à votre boutique. L’ensemble complet 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"> 
//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. Depuis votre interface d’administration Shopify, cliquez sur Boutique en ligne > Thèmes. Dans la liste déroulante, cliquez sur Modifier le code.
   

2. Recherchez les fichiers auxquels vous souhaitez ajouter l’extrait de code et cliquez dessus pour l’ouvrir dans l’éditeur. Vous pouvez ajouter l’extrait de code à n’importe quels modèles de page pour lesquels vous souhaitez activer les formulaires et le tracking Klaviyo sur les pages correspondantes.
3. Faites défiler jusqu’en bas du fichier et collez votre extrait de code sous l’autre code.
   

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 à votre site web.
2. Sur votre page d’accueil, ajoutez ce qui suit à la fin de l’URL, en remplaçant exemple@gmail.com par votre adresse e-mail :
   ?utm_email=exemple@gmail.com

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

Vous devriez constater qu’un profil Klaviyo a été créé pour vous (s’il n’en existait pas déjà un) et que cette activité a été enregistrée dans votre fil d’activité.

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