Implémenter une stratégie d’analyse de données avec GA4 et GTM sur Shopify

Entrez dans le monde dynamique du commerce électronique moderne où l’art de suivre, d’analyser et d’optimiser l’expérience utilisateur est crucial pour le succès. Google Tag Manager (GTM) et Google Analytics 4 (GA4) sont des alliés puissants dans cette quête. Cet article explore en profondeur la façon de déployer ces outils sur la plateforme Shopify pour maîtriser la personnalisation, l’analyse et l’optimisation du site e-commerce. Découvrez comment GTM peut simplifier la gestion des balises, suivre et analyser le comportement des utilisateurs, personnaliser l’expérience utilisateur et intégrer des outils tiers. Plongeons dans les fondements techniques pour créer des événements personnalisés, comprendre les composants de GTM, et connecter efficacement ces outils pour exploiter pleinement leur potentiel sur Shopify.

Pour maximiser l’efficacité de votre site e-commerce, il est essentiel d’utiliser des outils avancés qui vous permettent de suivre, d’analyser et d’optimiser l’expérience de l’utilisateur. L’un de ces outils, Google Tag Manager (GTM), s’est imposé comme une option puissante et polyvalente pour améliorer votre site e-commerce. Voici quelques-uns des avantages offerts par GTM :

Simplifie la Gestion des Balises : L’un des principaux avantages de Google Tag Manager est sa capacité à simplifier la gestion des balises sur votre site e-commerce. Au lieu de devoir modifier manuellement le code source de votre site chaque fois que vous avez besoin d’ajouter, de modifier ou de supprimer des balises de suivi, GTM vous permet d’effectuer ces actions de manière centralisée et simple via une interface conviviale. Cela signifie que vous pouvez gagner du temps et des ressources, évitant des erreurs coûteuses dans le processus.

Suivre et Analyser le comportement de l’Utilisateur : Vous pouvez mettre en place des balises de suivi pour suivre le comportement des utilisateurs sur votre site e-commerce. Cela vous fournit des informations précieuses sur la manière dont les visiteurs interagissent avec votre site, quels produits ils consultent, mesurer le temps passé sur chaque page et/ou produit, et plus généralement, comment se caractérisent les interactions. Avec ces données, vous pouvez effectuer une analyse approfondie et prendre des décisions pour améliorer l’expérience de l’utilisateur et augmenter les conversions.

Personnalisation de l’Expérience Utilisateur : GTM ne vous permet pas seulement de suivre le comportement de l’utilisateur, il vous donne également la possibilité de personnaliser son expérience. Vous pouvez utiliser des règles et des déclencheurs pour afficher un contenu spécifique, des offres personnalisées ou des messages marketing à des segments de votre public. Cela peut augmenter la pertinence de votre site pour chaque utilisateur, ce qui par conséquence peut augmenter la probabilité d’achat.

Intégration Facile d’Outils Externes : Un autre avantage de GTM est sa capacité à intégrer facilement d’autres outils et services tiers sur votre site e-commerce. Vous pouvez ajouter des balises de suivi de Google Analytics, Facebook Pixel, des publicités Google Ads et de nombreux autres outils facilement, sans avoir à modifier directement le code de votre site web. Cela vous permet de profiter de toutes les capacités de ces outils sans complications techniques.

Facilite les Mises à Jour et les Modifications : Lorsque vous gérez un site e-commerce, vous êtes susceptible d’avoir besoin de faire des mises à jour fréquentes, comme des modifications dans le suivi des conversions, la mise en place de nouveaux événements ou la modification de balises existantes. GTM simplifie ce processus en vous permettant de réaliser ces mises à jour et modifications de manière centralisée, ce qui vous fait gagner du temps et évite les erreurs potentielles.

Nous allons vous expliquer, du point de vue technique, comment créer des événements personnalisés pour votre site e-commerce et tirer le meilleur parti de GTM. Mais avant de plonger dans ces détails techniques, il est important de connaître les définitions des différents composants.

Qu’est-ce que les conteneurs ?

En termes simples, un conteneur est un ensemble de fichiers et de ressources hébergés sur les serveurs de Google. Le conteneur contient des règles et des configurations qui déterminent quand et comment les balises sont activées. Il communique avec le code de votre site web via des événements et le Data Layer. En d’autres termes, ce conteneur agit comme un gestionnaire centralisé des implémentations de suivi sur votre site e-commerce.

Qu’est-ce que les balises ?

Les balises sont des morceaux de code insérés sur votre site web ou dans votre application pour collecter des données ou effectuer un suivi. Ces balises peuvent inclure des pixels de suivi tiers (Facebook, Twitter, etc.), des codes de suivi de conversions ou tout autre morceau de code personnalisé permettant de capturer des informations de votre site web et l’activité de vos utilisateurs. Sur le plan technique, les balises sont responsables de l’envoi de données aux outils d’analyse, de publicité et de suivi, et elles peuvent être configurées pour s’exécuter en réponse à des événements spécifiques, tels que les clics de boutons ou des visites de pages, qui sont définis par des déclencheurs (triggers).

Qu’est-ce que les déclencheurs (triggers) ?

Les déclencheurs sont des conditions ou des événements qui déclenchent l’exécution des balises. Ces sont des événements comme les clics, des visites de pages spécifiques ou des événements personnalisés définis sur le site web. Les déclencheurs déterminent quand et comment les balises sont exécutées. Lorsque la condition configurée dans un déclencheur est satisfaite ou lorsque l’événement se produit, la balise associée est activée, ce qui envoie les informations au serveur de Google pour un traitement ultérieur et une analyse.

Qu’est-ce que les variables ?

Les variables sont des objets qui stockent et récupèrent des valeurs spécifiques ou des informations qui seront utilisées dans les balises et les déclencheurs. Elles peuvent être des variables prédéfinies fournies par GTM ou des variables personnalisées que vous, en tant qu’administrateur, pouvez créer. Les variables sont utilisées pour collecter des données dynamiques, telles que le contenu d’une page, la valeur d’un élément sur le site ou toute autre donnée qui doit être envoyée avec les balises. Les variables permettent la personnalisation et la paramétrisation des balises et des déclencheurs.

Qu’est-ce que le data layer ?

C’est l’un des concepts les plus abstraits de l’ensemble de l’outil GTM, cependant, nous essaierons de le simplifier.

Imaginez que vous ayez un assistant personnel qui recueille des informations importantes et les transmet aux personnes qui ont besoin de les connaître. Le Data Layer est cet assistant. Lorsque quelqu’un visite votre site web et effectue des actions telles que l’ajout de produits au panier ou la soumission d’un formulaire, le Data Layer enregistre ces événements et les informations connexes, comme les produits ajoutés, les références, les stocks, la catégorie du produit, etc. Vous pouvez envoyer les données que vous souhaitez pour un événement, mais l’objectif est d’envoyer des informations pertinentes qui auront un réel impact sur vos objectifs commerciaux et vous aideront à prendre des décisions importantes sur votre site web. Ensuite, ces informations sont transmises à GTM, qui peut les utiliser pour suivre des événements tels que les achats ou les soumissions de formulaires, et envoyer ces données à des outils d’analyse tels que Google Analytics (GA4) et Facebook Analytics.

Pour une définition plus technique, le Data Layer est un objet JavaScript qui stocke des informations structurées et dynamiques sur les événements et les données sur le site web ou le e-commerce. Lorsqu’un événement se produit sur le site, les données sont ajoutées au Data Layer, et GTM peut ensuite accéder à ces données pour activer des balises ou des variables spécifiques en fonction des événements enregistrés.

Comment configurer des événements personnalisés dans GTM :

Configuration du déclencheur (trigger) :

1. Dans le panneau de navigation de GTM, cliquez sur « Déclencheurs ».

2. Cliquez sur « Nouveau » pour créer un déclencheur personnalisé.

3. Sélectionnez le type de déclencheur qui correspond à vos besoins. Vous pouvez choisir parmi plusieurs options, telles que « Clic – Certains clics » si vous souhaitez suivre un clic sur un bouton spécifique ou « Visibilité d’éléments » si vous souhaitez suivre quand un élément devient visible sur la page.

4. Configurez les conditions spécifiques du déclencheur. Par exemple, si vous avez sélectionné « Clic », vous pouvez spécifier le type de clic (clic sur un élément, clic sur un lien, etc.) et d’autres détails. Dans ce cas, configurez un clic sur des éléments HTML spécifiques ayant la classe « product-form__submit button ».

5. Enregistrez le déclencheur avec un nom descriptif indiquant son objectif, par exemple, « Clic sur le bouton d’achat » – « click_on_the_buy_button ».

Configuration/création des variables :

1. Dans le panneau de navigation de GTM, cliquez sur « Variables ».

2. Cliquez sur « Nouveau » pour créer une variable personnalisée.

3. Sélectionnez le type de variable qui convient à votre événement. Dans ce cas, nous allons configurer une variable appelée « Items » de type « Variable Data Layer » avec le nom « ecommerce ».

4. Vous pouvez configurer la variable en fonction de vos besoins, par exemple, en spécifiant la classe CSS ou la balise HTML de l’élément que vous souhaitez suivre.

5. Enregistrez la variable avec un nom descriptif, comme « Items » (« Articles »).

Configuration de l’étiquette pour l’événement :

1. Dans le panneau de navigation de GTM, cliquez sur « Étiquettes ».

2. Cliquez sur « Nouveau » pour créer une étiquette personnalisée.

3. Sélectionnez le type d’étiquette approprié pour votre événement, tel que « Google Analytics : Événement GA4 » si vous souhaitez envoyer des données à Google Analytics.

4. Configurez les détails de l’étiquette, tels que l’ID de suivi (nous examinerons cela plus en détail dans une prochaine newsletter) et le nom de l’événement.

5. Dans la section « Déclencheurs », choisissez le déclencheur que vous avez configuré précédemment, « click_on_the_buy_button ». Cela garantira que l’étiquette sera activée lorsque l’événement se produira.

6. Enregistrez l’étiquette avec un nom descriptif, par exemple, « Étiquette de produit ».

Maintenant, un peu de code :

Vous savez déjà ce qu’est un data layer et comment cette couche de données agit comme un pont entre votre site web et GTM, permettant une communication efficace et la collecte de données essentielles. Cette couche de données peut recevoir des informations personnalisées qui seront envoyées à GTM et/ou à des outils d’analyse après une activation ou un événement. Passons à l’action :

Supposons que nous voulions envoyer des informations supplémentaires sur notre produit avec un exemple très simple.

1. Dans Shopify, rendez-vous sur « Sales Channel » -> « Online Store » -> dans votre thème, activez le bouton « … » juste avant « Personnaliser », sélectionnez l’option « Modifier le code ».

2. Accédez au script principal du produit, dans notre exemple, il s’agit de « sections/main-product.liquid ».

3. Recherchez le bouton principal « Ajouter au panier », que vous pouvez trouver dans un bloc de code Liquid (le langage de templating de Shopify), qui contient généralement un formulaire de type produit {%- form ‘product’ %}.

4. Une fois là, recherchez le bouton principal et ajoutez l’attribut « id » avec la valeur « triggergtm », puis enregistrez les modifications. Ce bouton déclenchera un événement. Rappelez-vous que dans la configuration du déclencheur, nous avons configuré l’activation uniquement lorsque nous cliquons sur des éléments HTML avec la classe « product-form__submit button », mais pour cet exemple, nous n’ajouterons de nouvelles informations au data layer que lorsque le bouton avec l’id « triggergtm » sera cliqué.

5. Maintenant, allez dans le script « section/main-product.liquid » et, avant de fermer la balise « </section> », collez le code suivant :

<script>
      
      const buttonTrigger = document.querySelector("#triggergtm");

      buttonTrigger.addEventListener("click", () => {
        const productData = {
          event: "click_on_the_buy_button",
          ecommerce: {
            items: [
             {
              item_available:{{ product.available }}, 
              item_name: "{{ product.title }}",
              item_category: "{{ product.collections }}",
              item_price: {{ product.price }},
              item_id: {{ product.id }},
              item_url: "{{ product.url }}",
             },
            ],
          },
        };
       dataLayer.push(productData);
      });
     
  </script> 

Publication de la version GTM

Une fois que vous avez configuré le déclencheur, la variable et l’étiquette, assurez-vous qu’ils sont inclus dans la version actuelle de votre conteneur GTM. Ensuite, publiez cette version pour que les modifications soient appliquées à votre site web en direct.

Test de ma configuration

Une fois la version publiée, vous pouvez lancer un aperçu en cliquant sur le bouton « Aperçu », et l’assistant Google Tag vous permettra de vous connecter à votre site web, en analysant en temps réel tous les comportements du conteneur, de ses événements et de ses étiquettes en interaction avec le site.

Comment fonctionne l’objet data layer dans mon navigateur ?

Comme mentionné précédemment, le data layer est un objet JavaScript global qui stocke des informations liées aux interactions et aux éléments que vos visiteurs ont sur votre site web. Pour visualiser votre objet data layer dans le navigateur, suivez ces étapes :

1. Sur votre site web, faites un clic droit et sélectionnez l’option « Inspecter ».

2. Plusieurs options s’ouvriront dans votre navigateur, mais ne vous inquiétez pas, ces fenêtres font partie du quotidien d’un développeur web. Allez dans l’option « Console », puis saisissez le mot « dataLayer ».

3. Tout d’abord, avant de cliquer sur les éléments déclencheurs, vous trouverez un objet JavaScript avec des informations de base sur le data layer (ce qui signifie que votre configuration est correcte).

4. Après avoir cliqué sur un élément déclencheur, si vous inspectez à nouveau, vous trouverez plus d’éléments dans l’objet, en l’occurrence un nouvel élément avec l’événement « click_on_the_buy_button ».

Quelles sont les possibilités si vous connectez des outils comme GTM à GA4 ?

Il n’y a pas vraiment de limites avec GA4 et Google Tag Manager (GTM). Vous pouvez effectuer des analyses avancées et obtenir des informations précieuses pour améliorer votre stratégie de vente et de marketing. 

En voici quelques-unes :

Suivi des ventes : Utilisez les variables de produit pour suivre la performance de produits spécifiques, y compris des informations telles que le nom du produit, le prix, la collection et la disponibilité du produit. Cela vous permet d’évaluer quels sont les produits les plus populaires et ceux qui génèrent le plus de revenus.

Segmentation d’audience : Créez des segments d’audience en fonction de variables de produit, telles que la collection ou la marque du produit. Cela vous permet de mieux comprendre quels groupes d’utilisateurs s’intéressent à un type spécifique de produit et de personnaliser vos campagnes marketing en conséquence.

Analyse de la performance des campagnes : Si vous menez des campagnes publicitaires, vous pouvez utiliser les variables de produit pour suivre la performance des produits individuels dans ces campagnes. Cela vous permettra de répondre à des questions comme : « Quels produits génèrent le plus de conversions à partir d’une campagne spécifique ? »

Rapports sur le comportement des utilisateurs : Observez comment les utilisateurs interagissent avec les produits sur votre site. Quels produits sont les plus consultés ? Quels produits sont ajoutés au panier mais ne sont pas achetés ? Ces informations vous aideront à optimiser l’expérience utilisateur (UX).

Analyse des paniers abandonnés : Utilisez les variables de produit pour suivre les produits ajoutés au panier mais non achetés. Cela vous permet d’identifier les motifs d’abandon et de prendre des mesures pour récupérer ces ventes, telles que l’envoi de rappels par e-mail, l’ajout de sections dans votre panier, telles que l’Upsell, Cross sell, etc.

Optimisation des pages de produit : Analysez comment les utilisateurs interagissent avec des pages de produits spécifiques. Où passent-ils le plus de temps ? Où cliquent-ils ? Utilisez ces informations pour optimiser vos pages de produits et améliorer les taux de conversion.

Génération de rapports personnalisés : Créez des rapports personnalisés axés sur des variables de produit spécifiques essentielles pour votre entreprise. Cela vous fournira une vue détaillée des métriques et dimensions pertinentes.

Surveillance des stocks : Si vous avez un grand inventaire, vous pouvez utiliser GA4 pour suivre les niveaux de stock. Lorsque le stock d’un produit atteint un niveau critique, vous pouvez configurer des alertes pour prendre des mesures proactives.

Comparaison de produits : Comparez la performance de produits similaires ou de la même collection. Lequel se vend le mieux ? Lequel a un meilleur taux de conversion ? Cela vous aidera à prendre de meilleures décisions en matière de gestion de produits.

Conclusion:

Le monde du e-commerce évolue rapidement, et l’adoption de technologies avancées comme GTM et GA4 sur Shopify devient impérative pour rester compétitif. La mise en place de balises, de déclencheurs, de variables et l’exploitation du Data Layer permettent une compréhension approfondie du comportement des utilisateurs, des performances des produits et des opportunités de personnalisation. Cette fusion entre la puissance de GTM et les insights de GA4 offre une approche holistique pour maximiser les conversions, optimiser les campagnes marketing, améliorer l’expérience utilisateur et anticiper les besoins du marché. Les possibilités offertes par cette union entre les données, l’analyse et l’action sont infinies, ouvrant la voie à des stratégies e-commerce plus intelligentes et à des résultats plus probants. Prenez le contrôle de votre site e-commerce avec ces outils et transformez votre approche pour atteindre de nouveaux sommets dans le monde du commerce en ligne.