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

La balise Google est un extrait de code qui peut être ajouté à un site Web pour mesurer l'activité des utilisateurs dans différents produits Google, y compris Google Analytics, 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 de Google. Il n'est pas destiné 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 de balise Google. Si vous n'en avez pas, remplissez le formulaire de demande d'ID de développeur de 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 à leur code de mesure de site Web.

Présentation

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

  1. Créez une intégration avec la balise Google.
  2. Mettez à jour la structure d'entrée utilisateur.
  3. Implémentez l'API de consentement.
  4. Configurez les données d'événement.
  5. Vérifiez votre intégration mise à jour.
  6. Mettez à jour les instructions de déploiement pour les utilisateurs.

Créez une intégration avec la balise Google

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

Pour créer une intégration avec la balise Google, remplacez l'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('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID
  gtag('js', new Date());

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

Veuillez noter les points suivants :

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

Mettez à jour la structure d'entrée utilisateur

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

Par exemple, l'illustration suivante montre une simple entrée de balise Google. L'intégration doit être présentée comme un déploiement pour la balise Google. Vous pouvez ajouter un sous-titre indiquant qu'il s'agit d'une méthode de déploiement de Google Ads et de Google Analytics.

Zone de saisie de l'ID de balise Google

Le schéma suivant montre comment une plate-forme peut avoir des flux utilisateur distincts pour Analytics et Ads, mais chaque flux mène à une interface unique où les utilisateurs fournissent leur ID de balise Google.

Analytics et Ads menant à un flux d'entrée unique

L'entrée de l'ID de balise 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 dispose d'une API de consentement intégrée pour gérer le consentement utilisateur. Elle est capable de différencier le consentement utilisateur pour les cookies à des fins publicitaires de celui à des fins d'analyse.

Le résultat attendu est que les clients obtiennent au moins l' gtag('consent', 'update' {...}) appel intégré sans aucune action requise par le client. Cela devrait garantir que les balises Google (Google Ads, Floodlight, Google Analytics, Conversion Linker) sont en mesure de lire le dernier état de consentement de l'utilisateur et d'inclure l'état dans les requêtes réseau envoyées à Google (via le paramètre &gcs).

Les étapes d'implémentation supplémentaires consistent à déployer ou à aider les annonceurs à déployer (par exemple, via une interface utilisateur) l'état gtag('consent', default' {...}) et à débloquer les balises Google (c'est-à-dire sans déclenchement conditionnel basé sur le consentement) pour permettre au mode Consentement de les déclencher avec vérification du consentement.

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

Configurez les données d'événement

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

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

  • Enregistrez tout ce qui est possible.
  • Configurez au moins huit événements principaux.
  • Priorisez les événements d'e-commerce.

Enregistrez tout ce qui est possible

Dans la mesure du possible, vous devez configurer les événements par défaut. Par exemple :

  • Événements clés, tels que purchase ou sign_up
  • Événements précédant les événements clés, tels que add_to_cart
  • Engagements comportementaux, tels que les interactions avec les médias, qui aident les clients à comprendre comment ils interagissent avec leurs utilisateurs finaux

Vous ne devez ajouter des extraits d'événements clés qu'aux pages d'événements clés (par exemple, confirmation d'achat, 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 event commande. Cela inclut le même ID de développeur de balise Google que celui 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 une 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. Associez l'ID à chaque événement.
  • Les paramètres suivants sont facultatifs et peuvent être omis :
    • 'value' est la valeur numérique de l'événement clé (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 ID 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 concernant les interactions des utilisateurs sur votre site Web ou dans votre application. Par exemple, lorsqu'une personne consulte un produit que vous vendez, vous pouvez inclure des paramètres décrivant ce produit (comme son nom, sa catégorie et son prix).
    • Certains paramètres insèrent 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 clé en fonction d'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 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 d'événements principaux qui présentent le plus de valeur pour les 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 à un 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, 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 est compatible avec de nombreux autres événements et paramètres, en particulier pour l'e-commerce. En général, nous vous conseillons de capturer les éléments suivants :

  • Tout événement de réussite directement associé à une valeur
  • Événements de réussite qui contribuent aux événements clés principaux (add_to_cart, sign_up, etc.)
  • Engagements et interactions utilisateur 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 sommes intéressés par la discussion d'éventuelles extensions de ce schéma. N'hésitez donc pas à nous faire part de vos suggestions.

Vérifiez 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
  • Votre balise Google pour le remarketing et la mesure des conversions

Vérifiez également que la balise se déclenche correctement sur toutes les pages, y compris les pages d'événements clés, à l'aide de l'un 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 vous permet de savoir quelles données sont transmises à la couche de données et quels événements ont déclenché ces échanges de données.
  • Outils pour les développeurs Chrome : utilisez l'onglet Réseau pour filtrer les requêtes contenant "google" et vérifier comment les données sont envoyées.
  • Rapport en temps réel Google Analytics (côté serveur) : créez un compte Google Analytics sans frais et utilisez le rapport Temps réel pour voir si les hits de balise sont reçus par les serveurs de Google.

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

Dans la mesure du possible, veuillez partager l'accès aux tests avec Google pour une vérification continue.

Mettez à jour les instructions de déploiement pour les utilisateurs

Mettez à jour votre documentation pour fournir des instructions claires sur l'implémentation des produits de mesure de Google à l'aide de votre implémentation. Partagez un brouillon de ces instructions en remplissant le formulaire d'examen de la documentation de configuration de l'intégration du CMS afin que nous puissions vous faire part de nos commentaires.