Comment ajouter le suivi sur site de Klaviyo à l'aide de Google Tag Manager ?

Vous apprendrez

Apprenez à ajouter les snippets de suivi sur site de Klaviyo à votre site à l'aide de Google Tag Manager. Certains propriétaires de sites utilisent Google Tag Manager comme point unique pour gérer tous les extraits web tiers qu'ils doivent ajouter à leur site. Le suivi sur site de Klaviyo entre dans cette catégorie et peut être ajouté et géré via Google Tag Manager.

Avant de commencer

Configuration de Google Tag Manager

Si vous avez déjà créé un compte Google Tag Manager, vous pouvez sauter ces étapes et passer à la section sur la création d'une balise.
1. Créez un compte Google Tag Manager.
2. Ajoutez les scripts d'installation à votre site.

Si vous n'avez jamais utilisé Google Tag Manager, consultez la documentation relative à la création d'un compte et à l'ajout de scripts d'installation sur votre site.

Création d'une nouvelle balise

1. Dans l'espace de travail de votre site, créez un nouveau déclencheur pour votre suivi Klaviyo Active on Site. Nous vous recommandons de créer un déclencheur distinct pour le suivi de vos produits actifs sur le site et consultés. En effet, le suivi des produits vus ne se déclenche que sur les pages de vos produits, alors que le suivi actif sur le site doit se déclencher sur toutes les pages de votre site.
2. Sélectionnez Custom HTML comme type de balise.

3. Pour localiser votre snippet Active on Site dans Klaviyo, cliquez sur le menu de votre compte et sélectionnez Intégrations.
4. Cliquez ensuite sur le bouton " Setup Web Tracking" en haut à droite.


5. Copiez le premier extrait. 

6. Depuis votre Google Tag Manager, collez votre snippet Klaviyo Active on Site dans la boîte HTML.

7. Paramétrez votre déclencheur pour qu'il se déclenche lors de l'affichage d'une page pour toutes les pages. Cela permet de s'assurer que votre snippet Active on Site s'activera chaque fois que les clients consulteront une page de votre site.

8. Enregistrez votre nouvelle balise. Ceci termine l'ajout de votre snippet de suivi Active on Site à l'aide de Google Tag Manager.

Vous pouvez ajouter votre extrait de produit visualisé en utilisant la même méthode. Modifiez le déclencheur pour qu'il ne se déclenche que sur les pages qui contiennent vos produits. Sur certains sites, cela peut être réalisé en limitant le déclenchement aux pages dont l'URL contient le mot "product".

Testez votre suivi sur site

1. Accédez à votre site web.
2. Ajoutez ce qui suit à la fin de l'URL :

?utm_email=klaviyogreen@gmail.com

Vous pouvez remplacer "klaviyogreen@gmail.com" par votre propre adresse électronique. Appuyez sur la touche Entrée pour recharger la page.

3. Ensuite, dans votre compte Klaviyo, accédez à Dashboard > Activity Feed. Si votre suivi sur site est correctement installé, vous verrez un nouvel événement " Actif sur le site " en haut de votre flux d'activité à partir de l'e-mail que vous avez saisi dans le paramètre URL ci-dessus.

Si vous ne parvenez pas à déclencher l'événement Viewed Product, assurez-vous que vos balises sont configurées pour se déclencher dans un ordre spécifique. Vous devez toujours faire en sorte que l'extrait " Active on Site " s'affiche avant l'extrait " Viewed Product ".

Si vous obtenez un message d'erreur lorsque vous essayez d'enregistrer l'un ou l'autre des extraits de suivi dans Google Tag Manager, vous devrez coller les extraits directement sur votre site.

Utiliser Google Tag Manager sur Shopify

Avec Shopify, au lieu d'utiliser Google tag Manager, nous vous encourageons à activer le suivi sur site Klaviyo via l'applicationKlaviyo intégrée dans Shopify. L'intégration de l'application permet à la fois le suivi de Active on Site et de Viewed Product, étant donné qu'elle est bouton bascule on et que le paramètre Viewed Product est coché sur la page des paramètres d'intégration. Notre intégration à Shopify permet également d'activer les fonctions Recherche soumise, Collection consultée et Ajout au panier via le paramètre Suivi des événements comportementaux.

Si vous souhaitez ajouter le suivi sur site via Google tag Manager, assurez-vous d'abord de désactiver l'intégration de l'application. Ensuite, utilisez l'extrait ci-dessous.

"Les collections" ne sont pas disponibles via l'API AJAX de Shopify. Les étiquettes de produits Shopify (Tags) sont donc capturées à la place dans l'extrait ci-dessous.

<script type="text/javascript"> 
//Initialiser 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">
//Produits consultés
var klaviyo = window.klaviyo || [] ;
product_handle = location.href.split( '/' ).pop().split( '?' )[0] ;
fetch('/products/'+product_handle+'.js').then(function(response){return response.json()})
.then(function(product){
  var item = {
    Name: product.title,
    ProductID: product.id,
    Tags: product.tags,
    ImageURL: "https:"+product.featured_image,
    URL: location.href.split( '/' )[0] + '//' + location.href.split( '/' )[2]+product.url,
    Brand: product.vendor,
    Price: product.price/100,
    CompareAtPrice: product.compare_at_price_max/100
  };
  klaviyo.track("Viewed Produit", article) ;
  klaviyo.trackViewedItem({
    Titre : item.Name,
    ItemId : item.ProductID,
    Tags : item.Categories,
    ImageUrl : item.ImageURL,
    Url : item.URL,
    Metadata : {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  }) ;
// Si vous souhaitez également ajouter le snippet Added to Cart, placez-le ici sans ses balises de script
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
}) ;
</script>

Ressources complémentaires

• Démarrer avec le suivi sur site de Klaviyo
• Comprendre le suivi de la conversion des messages
• Guide de création d'un flux d'abandon de navigation