Intégrer la balise Google dans votre CMS ou votre outil de création de sites Web

La balise Google (gtag.js) est un extrait de code qui peut être ajouté à un site Web pour mesurer l'activité des utilisateurs sur divers produits Google, y compris Google Analytics 4, Google Ads et Google Marketing Platform. En savoir plus sur la balise Google

Ce guide explique comment intégrer la balise Google à votre système de gestion de contenu (CMS) ou à votre outil de création de sites Web pour permettre à vos utilisateurs finaux d'accéder aux produits de mesure de Google.

Audience

Ce guide est destiné aux propriétaires de systèmes de gestion de contenu (CMS) ou aux créateurs de sites Web qui souhaitent proposer à leurs utilisateurs une intégration avec les produits de mesure Google. Ce guide ne s'adresse pas aux utilisateurs d'un CMS ou d'un outil de création de sites Web.

Avant de commencer

Assurez-vous de disposer d'un ID de développeur pour la balise Google. Si vous n'avez pas d'ID de développeur pour la balise Google, remplissez le formulaire de demande d'ID de développeur pour la balise Google. Votre ID de développeur est différent des autres ID, tels que l'ID de mesure ou l'ID de conversion, que vos utilisateurs finaux ajoutent au code de mesure de leur site Web.

Présentation

Pour intégrer votre plate-forme aux produits Google, procédez comme suit:

  1. Créer une intégration avec la balise Google
  2. Mettre à jour la structure des entrées utilisateur
  3. Implémenter l'API Consent
  4. Configurer des données d'événement
  5. Valider votre intégration mise à jour
  6. Mettre à jour vos instructions de déploiement utilisateur

Créer une intégration avec la balise Google

En créant une intégration avec la balise Google, vos clients peuvent déployer des produits de mesure Google (via gtag.js) sur chaque page de leur site. Veillez à supprimer toutes les anciennes intégrations de balises existantes (analytics.js, par exemple) avant de créer une intégration avec gtag.js.

Pour créer une intégration avec la balise Google, remplacez votre extrait de code existant par l'extrait suivant. Assurez-vous que les utilisateurs peuvent remplacer TAG_ID par leur propre ID de balise.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

  gtag('config', 'GOOGLE_TAG_ID');
</script>

Veuillez noter les points suivants :

  • Les annonceurs peuvent désactiver les fonctionnalités de personnalisation des annonces telles que le remarketing à l'aide du paramètre allow_ad_personalization_signals (consultez Désactiver la collecte de données dans le cadre de la publicité personnalisée).
  • Idéalement, l'extrait de code de la balise Google ne doit apparaître qu'une seule fois par page. L'extrait peut accueillir plusieurs ID de balise. S'il existe déjà une instance de gtag.js, vous devez ajouter de nouveaux ID de balise à la balise existante. En savoir plus

Mettre à jour la structure des entrées utilisateur

Vos clients doivent pouvoir fournir plusieurs formes d'ID de balise Google via une seule interface, quel que soit le produit de mesure Google qu'ils déploient.

Par exemple, voici une entrée de balise Google simple. L'intégration doit être définie comme un déploiement pour la balise Google. Cela peut être sous-titré comme une méthode de déploiement de Google Ads et Google Analytics.

Image de la zone de saisie de l&#39;ID de la balise Google

Le schéma suivant montre également qu'une plate-forme peut comporter des flux utilisateur distincts pour Analytics et Ads, mais que chaque flux mène à une interface dans laquelle les utilisateurs fournissent leur ID de balise Google.

Image d&#39;Analytics et d&#39;Ads menant
à un flux de saisie

L'ID de tag saisi doit accepter plusieurs variantes d'ID à l'aide du modèle d'expression régulière [A-Z]{1,3}\w{5,}[\w]*

La balise Google intègre une API Consent pour gérer le consentement de l'utilisateur. Il est capable de différencier le consentement des utilisateurs pour les cookies publicitaires et ceux à des fins d'analyse.

Le résultat attendu est que les clients obtiennent au moins l'appel gtag('consent', 'update' {...}) intégré sans qu'aucune action ne soit requise de leur part. Cela devrait s'assurer que les balises Google (Google Ads, Floodlight, Google Analytics, Conversion Linker) peuvent lire le dernier état de consentement de l'utilisateur et l'inclure dans les requêtes réseau adressées à Google (via le paramètre &gcs).

Des étapes d'implémentation supplémentaires consisteraient à déployer l'état gtag('consent', default' {...}) ou à aider les annonceurs à déployer l'état gtag('consent', default' {...}) et à débloquer les balises Google (pas de déclenchement conditionnel basé sur le consentement) pour permettre au mode Consentement de les déclencher en tenant compte du consentement.

Pour en savoir plus sur l'implémentation, consultez Gérer les paramètres de consentement (Web).

Configurer les données d'événement

Vous devez envoyer des données d'événement enrichies depuis le site Web du client vers son compte Google sans qu'aucune action ne soit requise de sa part. Par exemple, vous pouvez ajouter les événements le long d'un entonnoir d'achat add_to_cart, begin_checkout, add_payment_info, add_shipping_info et purchase), la génération de prospects et les inscriptions.

Voici les bonnes pratiques à suivre pour ajouter des événements:

  • Tout enregistrer dans un journal
  • Configurez au moins huit événements principaux
  • Donner la priorité aux événements d'e-commerce

Tout enregistrer dans un journal

Dans la mesure du possible, configurez des événements par défaut. Ce bloc inclut les éléments suivants :

  • Événements de conversion tels que purchase ou sign_up
  • Événements précédant des événements de conversion comme add_to_cart
  • Les engagements comportementaux, comme les interactions avec les médias qui aident les clients à comprendre comment

Vous ne devez ajouter des extraits d'événement de conversion qu'aux pages de conversion (par exemple, confirmation d'achat ou confirmation d'envoi de formulaire). Notez que vous devez toujours ajouter la balise Google sur chaque page du site.

Les événements sont envoyés à l'aide de la commande event. Cela inclut l'ID de développeur de la balise Google que vous avez inclus dans le global site tag décrit ci-dessus:

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

Par exemple, vous pouvez utiliser la commande event pour envoyer un événement login avec la valeur method de "Google":

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});
<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

Veuillez noter les points suivants :

  • Votre ID de développeur <developer ID> est unique et spécifique à votre plate-forme. Joignez cet ID à chaque événement.
  • Les paramètres suivants sont facultatifs et peuvent être omis :
    • 'value' est la valeur numérique de la conversion (par exemple, le prix d'un achat).
    • 'currency' est un code de devise à trois lettres, utile pour les annonceurs qui acceptent plusieurs devises.
    • 'transaction_id' est un identifiant unique pour la transaction (par exemple, un ID de commande). Il est utilisé à des fins de déduplication.
  • Bien que certains paramètres soient facultatifs, nous vous recommandons d'inclure autant d'informations que possible pour chaque événement.
    • Les paramètres fournissent des informations supplémentaires sur la façon dont les utilisateurs interagissent avec votre site Web ou votre application. Par exemple, lorsqu'une personne consulte un produit que vous vendez, vous pouvez inclure des paramètres qui le décrivent, tels que son nom, sa catégorie et son prix.
    • Certains paramètres renseignent automatiquement les dimensions et métriques prédéfinies dans Google Analytics, et permettent aux utilisateurs de mieux comprendre leurs clients.

Si vous souhaitez mesurer un événement de conversion basé sur un clic (par exemple, un clic sur un bouton ou une réponse dynamique pour un site utilisant AJAX), vous pouvez également utiliser l'extrait de code suivant:

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

Configurez au moins huit événements principaux

Nous vous recommandons de configurer un ensemble principal d'événements présentant le plus d'intérêt aux propriétaires de sites. Nous vous recommandons de configurer au minimum les événements suivants:

  • view_item_list: lorsqu'un utilisateur consulte une liste d'articles (par exemple, une liste de produits). En savoir plus

    gtag('event', 'view_item_list', {
      item_list_id: "related_products",
      item_list_name: "Related products",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Item",
        currency: "USD",
        discount: 2.22,
        price: 99.9,
        quantity: 1
      }]
    });
    
  • add_to_cart: lorsqu'un utilisateur ajoute un ou plusieurs produits à son panier. En savoir plus

    gtag('event', 'add_to_cart', {
      value: 99.0,
      currency: "USD",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Product",
        price: 99.0,
        currency: ‘USD’,
        quantity: 1,
        item_category: "All Products"
      }]
    });
    
  • begin_checkout: lorsqu'un utilisateur lance le processus de paiement pour un ou plusieurs produits. En savoir plus

    gtag('event', 'begin_checkout') {
      value: 99.0,
      currency: "USD",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Product",
        price: 99.0,
        currency: ‘USD’,
        quantity: 1,
        item_category: "All Products"
      }]
    });
    
  • purchase: lorsqu'un utilisateur achète un ou plusieurs produits ou services. En savoir plus

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});
    
  • sign_up: lorsqu'un utilisateur s'inscrit pour que l'utilisateur final puisse voir les méthodes d'inscription les plus populaires (par exemple, (compte Google ou adresse e-mail). En savoir plus

    gtag('event', 'sign_up', {method: 'web'});
    
  • generate_lead: lorsqu'un utilisateur envoie un formulaire. En savoir plus

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});
    
  • subscribe: lorsqu'un utilisateur s'abonne à un service ou à une newsletter.

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});
    
  • book_appointment: lorsqu'un utilisateur prend un rendez-vous.

    gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});
    

Recommandations supplémentaires

Google accepte de nombreux autres événements et paramètres, en particulier pour l'e-commerce. En règle générale, nous vous conseillons de capturer les éléments suivants:

  • Tout événement abouti directement associé à la valeur
  • Événements de réussite qui contribuent aux conversions principales (add_to_cart, sign_up, etc.)
  • Engagements et interactions des utilisateurs qui aident les annonceurs à comprendre comment ils interagissent avec leurs utilisateurs finaux

Vous trouverez ci-dessous des ressources supplémentaires qui expliquent plus en détail la collecte d'événements:

Nous aimerions discuter des extensions potentielles de ce schéma. N'hésitez donc pas à nous faire part de vos suggestions.

Vérifier votre intégration mise à jour

Avant de déployer vos modifications en production, vérifiez la compatibilité avec les éléments suivants:

  • Votre balise Google avec une destination Google Analytics 4
  • Votre balise Google pour la mesure du remarketing et des conversions

En outre, vérifiez que la balise se déclenche correctement sur toutes les pages, y compris les pages de conversion, à l'aide des outils suivants:

  • Google Tag Assistant: Tag Assistant vous permet de voir quelles balises Google se sont déclenchées et dans quel ordre. Le mode débogage de Tag Assistant indique les données transmises à la couche de données et les événements qui ont déclenché ces échanges de données.
  • Outils pour les développeurs Chrome : utilisez l'onglet Network (Réseau) pour filtrer les requêtes qui contiennent "google" afin de vérifier comment les données sont envoyées.
  • (côté serveur) Rapport Google Analytics en temps réel : créez un compte Google Analytics sans frais et utilisez le rapport Temps réel pour voir si les appels avec balise sont reçus par les serveurs de Google.

Pour signaler un bug ou envoyer des commentaires sur les informations manquantes, remplissez le formulaire d'assistance pour le système de gestion de contenu.

Dans la mesure du possible, veuillez partager l'accès aux tests avec Google pour que nous puissions poursuivre la validation.

Mettre à jour les instructions de déploiement utilisateur

Mettez à jour votre documentation pour fournir des instructions claires sur la façon d'implémenter les produits de mesure Google via votre implémentation. Veuillez partager un brouillon de ces instructions en remplissant le formulaire d'examen de la documentation sur la configuration de l'intégration CMS pour que nous puissions vous faire part de vos commentaires.