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 Manager, vous pouvez ignorer ces étapes et passer à la section sur la création d’un tag.
1. Créez un compte Google Tag Manager.
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 déclencheur pour votre tracking Klaviyo Active on Site. Nous vous recommandons de créer un déclencheur distinct pour votre tracking Active on Site et Viewed Product. C’est parce que 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 toutes les pages de votre site.
2. Sélectionnez HTML personnalisé comme type de tag.

3. Pour trouver votre extrait de code Active on Site dans Klaviyo, cliquez sur le menu de votre compte et sélectionnez Intégrations.
4. À partir de là, cliquez sur le bouton Configurer le tracking web en haut à droite.

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. Cette opération termine l’ajout de votre snippet de tracking Active on Site à l’aide de Google Tag Manager.

Vous pouvez ajouter votre extrait Viewed Product en utilisant la même méthode. Modifiez le déclencheur pour qu’il ne se déclenche que sur les pages qui incluent vos produits. Sur certains sites, vous pouvez y parvenir en limitant le déclencheur afin qu’il ne se déclenche que sur les pages dont l’URL inclut le mot « product ».

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

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

3. Ensuite, dans votre compte Klaviyo, accédez à Tableau de bord > Fil d’activité. Si votre tracking sur site est installé correctement, vous verrez un nouvel événement Actif sur le site en haut de votre fil d’activité, provenant de l’e-mail que vous avez saisi dans le paramètre d’URL ci-dessus.

Si vous rencontrez des difficultés à 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 déclencher votre extrait de code Active on Site avant votre extrait de code Viewed Product.

Si vous obtenez une erreur lorsque vous essayez d’enregistrer l’un des extraits de code de tracking dans Google Tag Manager, vous devrez coller les extraits 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 sur site de Klaviyo via l’ intégration de l’application Klaviyo dans Shopify. L’intégration de l’application active le tracking Active on Site et Viewed Product, à condition qu’elle soit activée et que le paramètre Viewed Product 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. Ensuite, utilisez l’extrait ci-dessous.

Les "Collections" ne sont pas disponibles via l’API AJAX de Shopify ; les tag de produit Shopify (tag) sont donc capturés à la place dans l’extrait de code ci-dessous.

<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 || [];
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 Product", item);
  klaviyo.trackViewedItem({
    Title: item.Name,
    ItemId: item.ProductID,
    Tags: item.Categories,
    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>