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 que vous pouvez ajouter à un site Web pour mesurer l'activité des utilisateurs sur différents produits Google, y compris Google Analytics 4, Google Ads et Google Marketing Platform. 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 s'adresse 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 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 pour les balises Google. Si vous ne possédez pas d'ID de développeur de balise Google, 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 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 de saisie des utilisateurs
  3. Implémenter l'API Consent
  4. Configurer les données d'événement
  5. Vérifier votre intégration mise à jour
  6. Mettre à jour vos instructions de déploiement pour les utilisateurs

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. Assurez-vous de supprimer toutes les anciennes intégrations de balises (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 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, comme le remarketing, à l'aide du paramètre allow_ad_personalization_signals (voir Désactiver la collecte de données dans le cadre de la publicité personnalisée).
  • Idéalement, l'extrait de balise Google ne doit apparaître qu'une seule fois par page. L'extrait peut contenir plusieurs ID de balise. Si une instance de gtag.js existe déjà, vous devez ajouter de nouveaux ID de balise à la balise existante. En savoir plus

Mettre à jour la structure de saisie 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'exemple suivant montre une entrée de balise Google simple. L'intégration doit être présentée comme un déploiement pour la balise Google. On peut considérer cela comme une méthode de déploiement de Google Ads et de Google Analytics.

Image d&#39;une zone de saisie d&#39;ID de 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.

Une image d&#39;Analytics et d&#39;Ads
vers un flux d&#39;entrée

La saisie 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 intègre une API Consentement pour gérer le consentement des utilisateurs. Il peut différencier le consentement de l'utilisateur pour les cookies à des fins publicitaires de ceux à des fins d'analyse.

Le résultat attendu est que les clients bénéficient au moins de l'intégration de l'appel gtag('consent', 'update' {...}), sans action requise de leur part. Cela devrait permettre aux balises Google (Google Ads, Floodlight, Google Analytics, Conversion Linker) de lire le dernier état du consentement de l'utilisateur et de l'inclure dans les requêtes réseau envoyées à Google (via le paramètre &gcs).

Des étapes d'implémentation supplémentaires consisteraient à déployer l'état gtag('consent', default' {...}) (par exemple, via une UI) ou à aider les annonceurs à le faire et à débloquer les balises Google (c'est-à-dire, sans déclenchement conditionnel basé sur le consentement) pour activer le mode Consentement afin 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 (site 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'il ait à effectuer une action. 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 quelques bonnes pratiques à suivre pour ajouter des événements:

  • Enregistrer tout ce qui est possible
  • Configurez au moins huit événements de base.
  • Prioriser les événements d'e-commerce

Enregistrer tout ce qui est possible

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

  • Événements clés, tels que purchase ou sign_up
  • Événements avant les événements clés tels que add_to_cart
  • Les interactions comportementales, comme les interactions avec les médias, qui aident les clients à comprendre comment ils interagissent

Vous devez ajouter des extraits d'événements clés uniquement sur les pages d'événements clés (par exemple, confirmation d'achat, confirmation d'envoi d'un 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 le même ID de développeur de la balise Google que celui que vous avez inclus dans la balise de site globale décrite 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 identifiant 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' correspond à 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 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 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 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 de base.

Nous vous recommandons de configurer un ensemble d'événements de base qui sont les plus intéressants 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'éléments (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 afin que l'utilisateur final puisse voir les méthodes d'inscription les plus populaires (par exemple, (compte Google, adresse e-mail, etc.). 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 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 des utilisateurs qui aident les annonceurs à comprendre comment ils engagent 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 leur compatibilité avec les éléments suivants:

  • Votre balise Google avec une destination Google Analytics 4
  • 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 Network (Réseau) pour filtrer les requêtes contenant "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 savoir si les serveurs Google reçoivent les appels avec balise.

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

Dans la mesure du possible, veuillez partager l'accès test avec Google pour une validation continue.

Mettre à jour vos instructions de déploiement pour les utilisateurs

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