E-commerce GA4 (Tag Manager): envoyer des événements GA4

Ce guide explique comment mettre à jour une implémentation de l'e-commerce Universal Analytics (Tag Manager) existante pour utiliser des événements d'e-commerce Google Analytics 4.

Vous trouverez d'autres ressources et guides de migration dans le Centre de migration pour les développeurs.

Résultat

Si vous suivez ce guide, votre implémentation Universal Analytics actuelle sera mise à jour pour utiliser les événements et paramètres d'e-commerce GA4. Cette nouvelle implémentation de l'e-commerce permettra également d'envoyer des données d'e-commerce à une nouvelle propriété GA4. Vos rapports sur l'e-commerce UA continueront d'être remplis de données et vous commencerez à en recevoir dans votre nouvelle propriété Google Analytics 4.

Attention :Bien que les événements d'e-commerce Google Analytics 4 soient automatiquement traduits comme étant compatibles avec Universal Analytics, ils n'ont pas tous un événement équivalent dans Universal Analytics. Les données de ces événements seront absentes des rapports sur l'e-commerce Universal Analytics. Consultez la section Compromis et considérations ci-dessous.

Avant de commencer

1. Utilisez l'outil d'aide à la migration de l'e-commerce pour vérifier que les éléments suivants décrivent votre implémentation actuelle:

   • Vous utilisez une propriété Universal Analytics
   • Votre site utilise Tag Manager et la couche de données pour envoyer les événements d'e-commerce.

2. Consultez les options de migration pour l'implémentation de l'e-commerce afin d'en savoir plus sur les avantages et les inconvénients propres à chaque option. Vérifiez que vous souhaitez vraiment suivre ce guide afin d'utiliser les événements d'e-commerce Google Analytics 4 pour votre intégration Universal Analytics existante.

3. Consultez la documentation de référence sur la compatibilité des événements pour découvrir comment les événements UA sont traduits lorsqu'ils sont envoyés à une propriété GA4.

Compromis et considérations

Examinez les informations ci-dessous pour bien comprendre les conséquences de l'utilisation d'événements d'e-commerce Google Analytics 4 avec votre implémentation de l'e-commerce Universal Analytics (Tag Manager).

Avantages	Inconvénients
Vous pouvez consulter les données d'e-commerce dans vos rapports GA4 et Universal Analytics. L'utilisation d'événements et de paramètres GA4 vous permet d'obtenir des rapports GA4 complets sur l'e-commerce.	Vous oblige à modifier vos événements d'e-commerce existants. Tous les événements et paramètres GA4 n'ont pas d'équivalent dans Universal Analytics. Les paramètres shipping_tier, discount, currency, location_id, promotion_name et promotion_id n'ont pas d'équivalent Universal Analytics et n'apparaîtront pas dans vos rapports Universal Analytics.

Implémentation

L'un des principaux objectifs d'implémentation consiste à passer de l'utilisation de la couche de données à l'API gtag.js. Pour vous assurer qu'il n'y a pas d'interruptions de mesure pendant cette transition, les instructions ci-dessous recommandent d'abord de terminer toutes les mises à jour de la configuration des balises, puis de mettre à jour la couche de données.

1. Créer et configurer une propriété GA4

Pour créer et configurer votre nouvelle propriété Google Analytics 4, procédez comme suit:

1. Créez une propriété Google Analytics 4.
   • Utilisez l'assistant de configuration GA4 pour créer automatiquement une propriété GA4 et copier les paramètres suivants depuis votre propriété Universal Analytics : nom de la propriété, URL du site Web, fuseau horaire et paramètres de devise. Toutefois, décochez l'option Activer la collecte des données à l'aide de vos balises existantes pour désactiver la fonctionnalité site tag associée. Si vous ne souhaitez pas copier les paramètres de votre propriété Universal Analytics, créez une propriété Google Analytics 4 sans l'assistant de configuration GA4.
2. Ajoutez la balise Google.
   1. Ouvrez le conteneur Google Tag Manager associé à votre intégration Universal Analytics existante.
   2. Cliquez sur Balises > Nouvelle.
   3. Cliquez sur Configuration de la balise et sélectionnez Balise Google.
   4. Saisissez l'ID de balise de votre propriété Google Analytics 4.
   5. Indiquez si vous souhaitez déclencher la balise sur toutes les pages (ou sur un sous-ensemble de pages à mesurer).
   6. Enregistrez et publiez la configuration de votre balise.

2. Ajouter une configuration de tag d'événement GA4 pour mesurer les événements d'e-commerce

Pour ajouter une balise d'événement GA4 afin d'envoyer des événements d'e-commerce et des paramètres à votre propriété GA4, procédez comme suit:

1. Créez une Configuration de la balise et sélectionnez Événement GA4.
2. Pour Nom de l'événement, utilisez la variable intégrée . Le nom de l'événement d'e-commerce GA4 envoyé via l'API gtag.js sera utilisé.
3. Sous Plus de paramètres, puis E-commerce, cochez Envoyer des données d'e-commerce.
4. Pour Source de données, sélectionnez Couche de données.
5. Cliquez sur Enregistrer. Des déclencheurs seront ajoutés aux étapes suivantes pour que vous puissiez ignorer en toute sécurité les avertissements concernant des déclencheurs manquants.

Important :Vous n'avez pas besoin de créer plusieurs tags d'événement GA4. À la place, un seul tag d'événement GA4 utilisant la variable Event intégrée peut être utilisé pour tous les événements d'e-commerce. Les déclencheurs de balise définissent les événements d'e-commerce GA4 spécifiques qui déclenchent la balise.

3. Modifiez les configurations de vos balises d'e-commerce UA afin d'utiliser les événements GA4

Pour chaque configuration de balise d'e-commerce Universal Analytics, vous devez ajouter un déclencheur qui s'active sur l'événement d'e-commerce GA4 équivalent et activer l'option de lecture des données d'événement d'e-commerce GA4.

Pour chaque événement d'e-commerce Universal Analytics, les étapes générales pour passer à un événement GA4 correspondant sont les suivantes:

1. Pour l'événement d'e-commerce UA que vous souhaitez mettre à jour, utilisez les informations disponibles dans Compatibilité entre les événements UA et GA4 et Paramètres comparables pour les tables UA et GA4 et/ou dans l'outil d'aide à la migration de l'e-commerce pour identifier le nom de l'événement GA4 correspondant. Par exemple, si vous mettez à jour un événement pour mesurer les clics sur les produits, le nom de l'événement GA4 est select_item.
2. Mettez à jour la configuration de la balise Universal Analytics pour l'événement :
   1. Sous Plus de paramètres, puis E-commerce, cochez la case Utiliser le schéma GA4 pour vous assurer que vos balises existantes lisent correctement l'événement d'e-commerce GA4 mis à jour. Vous pouvez effectuer cette modification avant de migrer de la couche de données vers l'API gtag.js.
   2. Dans la section Déclenchement, ajoutez un déclencheur Événement personnalisé, où Nom de l'événement correspond à l'événement d'e-commerce GA4 identifié ci-dessus. Une fois cette étape terminée, vous devez disposer d'au moins deux déclencheurs: le déclencheur d'origine qui a activé la balise et le nouveau déclencheur qui s'activera une fois la transition vers les événements GA4 terminée. Ce déclencheur supplémentaire permet de s'assurer qu'il n'y a pas d'interruption de données lors de la transition de la couche de données vers l'API gtag.js, comme décrit plus loin dans ce document.
   3. Enregistrez les modifications.
3. Ajoutez le nouveau déclencheur au tag d'événement GA4 :
   1. Ouvrez le tag Événement GA4 que vous avez précédemment configuré pour envoyer des événements et des paramètres d'e-commerce à votre propriété GA4.
   2. Dans la section Déclenchement, ajoutez le déclencheur Événement personnalisé créé ci-dessus (par exemple, select_item) afin que le tag d'événement GA4 se déclenche pour l'activité d'e-commerce associée après la transition vers les événements GA4.
   3. Enregistrez les modifications.
4. Répétez les étapes ci-dessus pour chaque activité d'e-commerce Universal Analytics. Publiez vos modifications dans Tag Manager lorsque vous avez terminé.

Attention :Veillez à activer l'option Utiliser un schéma GA4 dans la configuration de votre balise Universal Analytics. Si cette option n'est pas activée, vos rapports sur l'e-commerce UA ne s'afficheront pas correctement.

4. Activer l'API gtag.js

Pour passer d'UA à GA4 dans votre implémentation de l'e-commerce, nous vous recommandons de passer de l'utilisation de la couche de données à l'API gtag.js, qui fonctionne en coordination avec Tag Manager.

Pour activer l'API gtag.js, ajoutez l'extrait de code suivant en haut de votre page, au-dessus de l'extrait conteneur Tag Manager:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

Attention :Si vous avez déjà suivi la procédure Ajouter des variables de couche de données à une page et que vous avez déjà déclaré une variable de couche de données sur la page, l'extrait ci-dessus doit être placé après votre déclaration de couche de données existante.

5. Passer de la couche de données à gtag.js

Une fois que vous avez effectué toutes les mises à jour de configuration des balises et activé l'API gtag.js, vous pouvez passer de l'utilisation de la couche de données à l'API gtag.js.

Pour faciliter la mise à jour, utilisez les ressources suivantes:

• Le Guide du développeur sur l'e-commerce (GA4) pour découvrir comment envoyer des événements d'e-commerce GA4 à l'aide de l'API gtag.js et configurer la balise et les déclencheurs Événement GA4 dans Tag Manager
• Le tableau Compatibilité entre les événements UA et GA4 vous aide à trouver le nom d'événement GA4 approprié pour une activité d'e-commerce Universal Analytics. Par exemple, si vous mettez à jour un événement pour mesurer les impressions de produits, le nom de l'événement GA4 est view_item_list.
• Le tableau Paramètres comparables pour UA et GA4 pour vous aider à mapper les noms de paramètres d'e-commerce UA avec des noms de paramètres d'e-commerce GA4 équivalents
• L'outil d'aide à la migration de l'e-commerce pour vérifier que vous avez correctement mis à jour vos événements d'e-commerce.

Pour chaque événement d'e-commerce Universal Analytics, les étapes générales pour passer de l'utilisation de l'API dataLayer.push() avec les événements d'e-commerce UA à l'utilisation de l'API gtag.js avec l'événement d'e-commerce GA4 correspondant sont les suivantes:

1. Remplacez les noms d'événements personnalisés par le nom de l'événement GA4 correspondant. Par exemple, si vous mettez à jour un événement pour mesurer un clic sur un produit qui utilise le nom d'événement personnalisé productClick, le nom d'événement mis à jour pour GA4 sera select_item. Le nom de l'événement GA4 doit correspondre au nom d'un déclencheur que vous avez configuré précédemment.

   Par exemple, l'événement de clic sur un produit suivant utilisant la couche de données

   dataLayer.push({'event': 'productClick', 'ecommerce': {<ecommerce_parameters>}});
   

   devient ce qui suit lorsque vous passez à l'API gtag.js:

   gtag('event', 'select_item', {<ecommerce_parameters>});
   

2. Modifiez les paramètres d'e-commerce pour qu'ils correspondent à ce qui est attendu pour l'événement GA4. Veillez à utiliser des paramètres comparables pour UA et GA4, car les noms des paramètres ont été modifiés. Renseignez la valeur du paramètre GA4 avec la valeur du paramètre UA correspondante.

Remarque :Une fois la migration de l'API dataLayer.push() vers l'API gtag.js terminée, vous pouvez éventuellement supprimer tous les déclencheurs d'événements personnalisés qui se déclenchent en fonction des anciens événements de couche de données UA.

Exemple: Remplacer un événement UA par GA4

L'exemple suivant montre comment créer un événement GA4 équivalent pour une activité d'e-commerce clic sur un produit implémentée dans Tag Manager pour Universal Analytics.

Avant: envoyer des événements UA à l'aide de la couche de données

Vous trouverez ci-dessous la section Mesure un clic sur un produit pour Universal Analytics, implémentée à l'aide de la couche de données. Le nom de l'événement personnalisé est productClick.

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

Dans Tag Manager, la balise Universal Analytics est configurée comme suit:

Type de balise : Universal Analytics
Type de suivi : Événement
Catégorie d'événement: Ecommerce
Action d'événement: Product Click
Activer les fonctionnalités d'e-commerce amélioré: true
Utiliser la couche de données: true
Déclencheur: event est égal à productClick

La configuration du déclencheur est configurée pour déclencher la balise lorsque l'événement productClick est transmis à la couche de données:

Après: envoyer des événements GA4 à l'aide de gtag.js

Mises à jour de la configuration des balises pour UA

Dans Tag Manager, la configuration de la balise Universal Analytics est mise à jour pour que l'événement de clic sur le produit se déclenche sur le nom de l'événement GA4, et l'option Utiliser le schéma GA4 est activée. La configuration de la balise est maintenant la suivante:

Type de balise : Universal Analytics
Type de suivi : Événement
Catégorie d'événement: Ecommerce
Action d'événement: Product Click
Activer les fonctionnalités d'e-commerce amélioré: true
Utiliser la couche de données: true
Utiliser le schéma GA4: true
Déclencheur n° 1: event est égal(e) à productClick
Déclencheur n° 2: event est égal(e) à select_item

La configuration du nouveau déclencheur Événement personnalisé est configurée pour déclencher la balise sur le nom de l'événement select_item:

Mises à jour de la configuration des balises pour GA4

Un événement GA4 est configuré pour mesurer les activités d'e-commerce implémentées à l'aide d'événements et de paramètres GA4. La balise utilise la variable Event intégrée pour transmettre le nom de l'événement à GA4. Le même déclencheur créé pour la balise UA (select_item) est utilisé pour déclencher la balise GA4.

Passer de la couche de données à gtag.js

Vous trouverez ci-dessous comment l'implémentation UA ci-dessus est passée de l'événement personnalisé productClick avec l'API dataLayer.push() à l'événement select_item GA4 avec l'API gtag.js. Les valeurs de paramètres de select_item sont définies en conséquence.

<script>
/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  gtag('event', 'select_item', {
    'items': [{
      'item_id': productObj.id,
      'item_name': productObj.name,
      'index': productObj.position,
      'item_list_name': 'Search Results',
      'item_brand': productObj.brand,
      'item_category': productObj.cat,
      'item_variant': productObj.variant,
      'price': productObj.price
    }]
  });
}
</script>