Comment ajouter le tracking onsite de Klaviyo à l’aide de Google Tag Manager

Objectif de cet article

Découvrez comment ajouter les snippets de tracking onsite de Klaviyo à votre site à l’aide de Google Tag Manager. Certains propriétaires de site utilisent Google Tag Manager comme point central pour gérer tous les snippets web tiers qu’ils doivent ajouter à leur site. Le tracking onsite de Klaviyo entre dans cette catégorie et peut être ajouté et géré via Google Tag Manager.

Avant de commencer

Configurer Google Tag Manager

Si vous avez déjà créé un compte Google Tag gestionnaire et installé son conteneur sur votre site, vous pouvez ignorer ces étapes et passer à la section sur la création d’un tag.
1. Créez un compte Google Tag gestionnaire.
2. Ajoutez les scripts d’installation à votre site.

Si vous débutez avec Google Tag gestionnaire, consultez sa documentation pour configurer un compte et ajouter les scripts d’installation à votre site.

Créer un nouveau tag

1. Dans l’espace de travail de votre site, créez un nouveau tag pour votre tracking Klaviyo Active on Site. Nous vous recommandons de créer des tags et des déclencheurs distincts pour votre tracking Active on Site et Viewed Product. En effet, le tracking Viewed Product ne se déclenchera que sur vos pages produit, tandis que le tracking Active on Site doit se déclencher sur chaque page de votre site.
2. Sélectionnez HTML personnalisé comme type de tag.

3. Dans Klaviyo, sélectionnez intégrations dans la barre latérale.
4. Sélectionnez Gérer les données > Configurer le tracking web.

Si vous y êtes invité, sélectionnez Configurer manuellement, puis Suivant pour afficher votre extrait de code. Si l’écran de configuration affiche plutôt des instructions pour vos intégrations e-commerce, utilisez l’ extrait de code Active on Site manuel et remplacez l’espace réservé de la clé d’API publique comme indiqué.

6. À partir de votre gestionnaire de balises Google, collez votre extrait Active on Site Klaviyo dans la zone HTML.

7. Configurez votre déclencheur pour qu’il se déclenche lors de l’affichage d’une page pour toutes les pages. Cela garantit que votre extrait Active on Site se déclenchera chaque fois que les clients consulteront une page sur votre site.

8. Enregistrez votre nouveau tag. Prévisualisez vos modifications pour vérifier que le tag se déclenche, puis publiez votre conteneur afin d’activer le tracking sur votre site web. Le fait d’enregistrer le tag seul ne le publie pas.

Vous pouvez ajouter votre snippet Viewed Product en utilisant la même méthode. Utilisez l’extrait de code pour votre plateforme e-commerce à partir du guide tracking Viewed Product. Modifiez le déclencheur afin qu’il ne se déclenche que sur les pages de détail des produits. Sur certains sites, cela peut être accompli en limitant le déclencheur afin qu’il ne se déclenche que sur les pages dont l’URL inclut le mot "product". Vérifiez que votre règle correspond uniquement aux pages de détails du produit, puis enregistrez, prévisualisez et publiez le tag.

Tester le tracking sur votre site

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

?utm_email=klaviyogreen@gmail.com

Remplacez "klaviyogreen@gmail.com" par votre propre adresse e-mail avant de charger l’URL. Si l’URL contient déjà un ?, ajoutez &utm_email=your-email@example.com à la place. Placez le paramètre avant tout fragment #, puis appuyez sur Entrée pour recharger la page.

3. Dans Klaviyo, accédez à Analytics > Indicateurs, sélectionnez Active on Site, puis ouvrez Activity feed. Recherchez un événement associé à l’adresse e-mail que vous avez utilisée dans l’URL.

4. Si vous avez ajouté le tracking Viewed Product, consultez une page de détails du produit dans le même navigateur. Dans Klaviyo, ouvrez Analytics > Indicateurs, sélectionnez Viewed Product, puis vérifiez son flux d’activité pour votre événement de test et les détails du produit.

Si vous avez du mal à faire se déclencher votre événement Viewed Product, assurez-vous que vos tags sont configurés pour se déclencher dans un ordre précis. Vous devez toujours faire en sorte que votre snippet Active on Site se déclenche avant votre snippet Viewed Product. Suivez les instructions de séquençage des tags de Google pour définir l’ordre.

Si Google tag gestionnaire signale une erreur lorsque vous enregistrez un snippet, vérifiez le code par rapport aux exigences de Google en matière de HTML personnalisé. Si vous ne parvenez pas à résoudre l’erreur, vous pouvez plutôt installer les snippets directement sur votre site.

Utilisation de Google Tag Manager sur Shopify

Avec Shopify, au lieu d’utiliser Google Tag Manager, il est recommandé d’activer le tracking onsite Klaviyo via l’intégration d’application Klaviyo dans Shopify. L’intégration d’application active le tracking Active on Site et Viewed Product, à condition que l’intégration d’application soit activée et que le paramètre Add Viewed Product tracking to my site soit coché sur la page des paramètres d’intégration. Notre intégration Shopify active également Submitted Search, Viewed Collection et Added to Cart via le paramètre Track behavioral events.

Si vous souhaitez plutôt ajouter le tracking sur site via Google Tag Manager, veillez d’abord à désactiver l’intégration de l’application. Configurez le tag Active on Site à partir des étapes ci-dessus pour charger Klaviyo.js sur toutes les pages. Ajoutez ensuite l’extrait de code ci-dessous en tant que tag Viewed Product distinct, qui se déclenche uniquement sur les pages de détails produit, après le tag de base. Cet extrait de code ne charge pas Klaviyo.js lui-même. Enregistrez, prévisualisez, et publiez les deux tags, puis effectuez les deux tests de tracking ci-dessus.

Le points de terminaison de produit Shopify utilisé ci-dessous renvoie des tag de produit, et non l’appartenance à une collection ; par conséquent, l’extrait capture Tags au lieu des collections.

<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">
//Viewed Product
var klaviyo = window.klaviyo || [];
var product_handle = location.pathname.replace(/\/$/, '').split('/').pop();
fetch(window.Shopify.routes.root + '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 Product", item);
  klaviyo.trackViewedItem({
    Title: item.Name,
    ItemId: item.ProductID,
    Tags: item.Tags,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// If you would like to add the Added to Cart snippet as well, place that here without its script tags
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>

Ressources supplémentaires