Balises Google Floodlight

Cet article s'adresse aux développeurs qui souhaitent transférer des balises Floodlight d'un conteneur Web Tag Manager vers un conteneur de serveur.

Tag Manager côté serveur vous permet de déplacer vos balises de ventes et de compteur Google Floodlight de la page Web vers le serveur. Le déplacement de ces balises vers le serveur réduira la quantité de code à exécuter sur la page et contribuera à améliorer le temps de chargement de la page.

Avant de commencer

Avant de pouvoir déplacer des balises vers votre serveur, assurez-vous de disposer des éléments suivants :

• Accès administrateur à Google Tag Manager et Floodlight
• Vous avez configuré et installé Google Tag Manager.
• Configurer un conteneur de serveur
• Configurer le client Google Analytics : GA4

Étape 1 : Configurez la balise Conversion Linker

Votre compte Floodlight ne peut envoyer des données de conversion à Google Tag Manager que si vous avez configuré une balise Conversion Linker.

Si vous avez déjà configuré une balise Conversion Linker dans votre conteneur serveur, vous pouvez ignorer cette étape.

Pour configurer la balise Conversion Linker :

1. Dans l'espace de travail de votre conteneur serveur, ouvrez le menu Balises sur la gauche de la page.
2. Cliquez sur Nouveau pour ajouter une balise.
3. Sélectionnez le type de balise Conversion Linker.
4. Configurez le déclencheur qui déclenchera la balise côté serveur Conversion Linker.
   Dans la plupart des cas, le déclencheur Toutes les pages est la meilleure option.
5. Attribuez un nom à la balise, puis cliquez sur Enregistrer.

Étape 2 : Configurez les balises Floodlight

Google Tag Manager est compatible avec les balises de compteur et de ventes Floodlight dans le conteneur serveur.

Compteur Floodlight

Pour configurer une balise Compteur Floodlight :

1. Dans l'espace de travail de votre conteneur serveur, sélectionnez le menu Balises sur la gauche de la page.
2. Cliquez sur Nouveau pour ajouter une balise.

3. Sélectionnez le type de balise Compteur Floodlight.

   

4. Pour rassembler les valeurs requises pour la configuration de la balise, ouvrez une autre fenêtre de navigateur et connectez-vous à Campaign Manager 360. Cliquez sur Annonceurs, puis sur le nom de l'annonceur. Saisissez les valeurs suivantes dans votre nouvelle balise Compteur Floodlight Tag Manager :

   • Référence annonceur : la référence annonceur apparaît sur la page d'informations sur l'annonceur, juste en dessous de son nom. Cela correspond également à la valeur du paramètre src= dans l'extrait de code généré pour une balise Floodlight.
   • Chaîne de balise de groupe : dans le tableau "Activité", identifiez l'activité qui vous intéresse et recherchez la chaîne de balise de groupe indiquée dans une colonne à droite. Cela correspond également à la valeur de type= dans l'extrait de code d'une balise Floodlight généré.
   • Chaîne de balise d'activité : dans le tableau "Activité", identifiez l'activité qui vous intéresse et recherchez la chaîne de balise d'activité indiquée dans une colonne à droite. Cela correspond également à la valeur de cat= dans l'extrait de code d'une balise Floodlight généré.

5. Définissez la méthode de comptabilisation souhaitée :

   • Standard : comptabilise chaque conversion.
   • Unique : comptabilise la première conversion pour chaque utilisateur unique durant chaque période de 24 heures, de minuit à minuit (heure de la côte Est des États-Unis).
   • Par session : comptabilise une conversion par utilisateur et par session. La durée de la session est définie par le site sur lequel la balise Floodlight est déployée.

6. Ouvrez la fenêtre Choisir un déclencheur.

7. Dans le menu Configuration du déclencheur, sélectionnez un déclencheur. Dans la plupart des cas, l'option Toutes les pages est la plus appropriée.

   

8. Saisissez le nom du tag, puis cliquez sur Enregistrer.

   

Ventes Floodlight

Pour configurer une balise Ventes Floodlight :

1. Dans l'espace de travail de votre conteneur serveur, sélectionnez le menu Balises sur la gauche de la page.
2. Cliquez sur Nouveau pour ajouter une balise.

3. Sélectionnez le type de balise Ventes Floodlight. Remarque : La balise Ventes Floodlight collecte automatiquement les valeurs suivantes à partir du champ d'e-commerce correspondant :

   *   Order ID (Transaction ID)
   *   Revenue (Value)
   

4. Pour rassembler les valeurs requises pour la configuration de la balise, ouvrez une autre fenêtre de navigateur et connectez-vous à Campaign Manager 360. Cliquez sur Annonceurs, puis sur le nom de l'annonceur. Saisissez les valeurs suivantes dans votre nouvelle balise Compteur Floodlight Tag Manager :

   • Référence annonceur : la référence annonceur apparaît sur la page d'informations sur l'annonceur, juste en dessous de son nom. Cela correspond également à la valeur du paramètre src= dans l'extrait de code généré pour une balise Floodlight.
   • Chaîne de balise de groupe : dans le tableau "Activité", identifiez l'activité qui vous intéresse et recherchez la chaîne de balise de groupe indiquée dans une colonne à droite. Cela correspond également à la valeur de type= dans l'extrait de code d'une balise Floodlight généré.
   • Chaîne de balise d'activité : dans le tableau "Activité", identifiez l'activité qui vous intéresse et recherchez la chaîne de balise d'activité indiquée dans une colonne à droite. Cela correspond également à la valeur de cat= dans l'extrait de code d'une balise Floodlight généré.

5. Définissez la méthode de comptabilisation souhaitée :

   • Standard : comptabilise chaque conversion.
   • Unique : comptabilise la première conversion pour chaque utilisateur unique durant chaque période de 24 heures, de minuit à minuit (heure de la côte Est des États-Unis).
   • Par session : comptabilise une conversion par utilisateur et par session. La durée de la session est définie par le site sur lequel la balise Floodlight est déployée.

6. Ouvrez la fenêtre Choisir un déclencheur.

7. Dans le menu Configuration du déclencheur, sélectionnez un déclencheur. Dans la plupart des cas, l'option Toutes les pages est la plus appropriée.

8. Saisissez le nom du tag, puis cliquez sur Enregistrer.

Facultatif : Configurez les conversions avec les données du panier

Vous pouvez configurer votre tag de vente Floodlight pour envoyer les conversions avec les données du panier. Les conversions avec les données du panier fournissent des informations détaillées sur les événements de conversion au niveau du SKU. En envoyant l'ID marchand, le libellé du flux, la langue du flux et les données produit, vous pouvez identifier les articles qui se vendent bien et ceux qui pourraient avoir besoin de plus d'aide.

Étape 1 sur 2 : Envoyez les paramètres des données du panier à la couche de données

1. Créez un tableau JSON ecommerce.purchase.products. Exemple :

       'ecommerce':{
       'purchase':{
           'products': [{
               'id': 'String',
               'price': 'Floating point',
               'quantity': Integer,
               'country': 'String', // Optional
               'accountId': 'String' // Optional
           },
           {
               … // Each SKU (product) in the transaction
               // is in its own array item.
           }]
       }
       }'
   

2. Utilisez la méthode dataLayer.push pour que les données soient disponibles dans la couche de données de Google Tag Manager.

Étape 2 sur 2 : Configurez la balise de ventes Floodlight

Données d'événement

1. Dans votre conteneur serveur, ouvrez votre balise Ventes Floodlight.
2. Sous "Création de rapports sur les produits", cochez la case Fournir des données sur les ventes au niveau des produits.
3. Sélectionnez Données d'événement dans le menu déroulant "Source de données". Google Tag Manager utilisera automatiquement les données transmises à la couche de données dans le tableau ecommerce.purchase.products.
4. Cliquez sur Enregistrer.

Configuration personnalisée

1. Dans votre conteneur serveur, ouvrez votre balise Ventes Floodlight.
2. Sous "Création de rapports sur les produits", cochez la case Fournir des données sur les ventes au niveau des produits.
3. Sélectionnez Configuration personnalisée dans le menu déroulant "Source de données".
4. Sélectionnez une variable dynamique ou saisissez manuellement une valeur dans les champs suivants :
   • Données produit : chaîne mise en forme contenant les données produit.
   • ID de marchand : ID Google Merchant Center du marchand.
   • Libellé du flux : libellé identifiant le flux spécifique utilisé dans Google Merchant Center.
   • Langue du flux : langue du flux, représentée par le code ISO 639-1 à deux lettres.
5. Cliquez sur Enregistrer.

Remarque : Pour utiliser pleinement cette fonctionnalité, vous devez répondre aux exigences concernant les conversions avec données du panier.

Facultatif : Configurer le suivi avancé des conversions

Si vous n'utilisez pas le suivi avancé des conversions, passez directement à Valider votre configuration.

Pour configurer les conversions avancées, suivez les étapes ci-dessous.

Configurer une variable de données fournies par l'utilisateur

Il existe trois méthodes pour implémenter le suivi avancé des conversions dans Tag Manager. Il vous suffit de choisir une option afin de collecter les données fournies par l'utilisateur.

	Collecte automatique	Configuration manuelle	Configuration du code
Méthode de collecte	Collecte automatiquement les données fournies par l'utilisateur en fonction du code de votre site Web. Si vous souhaitez pouvoir contrôler où collecter les entrées, optez pour la configuration manuelle ou avec code.	Spécifiez certaines propriétés CSS ou variables JavaScript pour collecter les données fournies par l'utilisateur. Si vous souhaitez pouvoir contrôler le hachage et le formatage des données, optez pour la configuration avec code.	Ajoutez à votre site Web un extrait de code qui envoie les données client hachées pour la mise en correspondance. Cette méthode est idéale pour optimiser la justesse du suivi avancé des conversions. En effet, elle vous permet d'envoyer des données correctement formatées chaque fois que votre balise de conversion se déclenche.
Complexité	Simple	Moyenne	Complexe
Compétences	Ne nécessite aucune compétence particulière	HTML et CSS	Développement Web

Collecte automatique

1. Dans votre conteneur Web, ouvrez le menu Variables.
2. Créez une variable définie par l'utilisateur de type Données fournies par l'utilisateur.
3. Définissez le Type sur Collecte automatique.
4. Nommez la variable, par exemple My user-defined data.
5. Cliquez sur Enregistrer.

Configuration manuelle

1. Dans votre conteneur Web, ouvrez le menu Variables.
2. Créez une variable définie par l'utilisateur de type Données fournies par l'utilisateur.
3. Définissez le Type sur Configuration manuelle.

4. Ajoutez une variable nouvelle ou existante pour le champ pertinent des données utilisateur que vous souhaitez fournir par le biais du suivi avancé des conversions.

   Remarque : Si votre couche de données comporte déjà des variables (que vous utilisiez des sélecteurs CSS ou d'autres types de variables), vous pouvez les sélectionner plutôt que d'en créer d'autres. En cas de doute, suivez les instructions. Les variables peuvent être hachées ou non hachées.

5. Pour préciser un élément du DOM, sélectionnez Nouvelle variable > Configuration de la variable > Élément DOM.

6. Sous Mode de sélection, vous pouvez utiliser Sélecteur CSS ou ID. Conseil : Si vos variables CSS changent fréquemment, ajoutez un ID HTML à votre site et utilisez la variable d'ID.

7. Saisissez le sélecteur CSS ou le nom de l'ID. Vous pouvez laisser le champ "Nom de l'attribut" vide.

8. Nommez la variable d'élément DOM, puis enregistrez-la. pour revenir aux paramètres Données fournies par l'utilisateur.

9. Nommez la variable Données fournies par l'utilisateur, par exemple My user-defined data.

10. Cliquez sur Enregistrer.

Configuration avec code

Étape 1 : Identifiez et définissez les variables pour le suivi avancé des conversions

Vous pouvez envoyer soit des données non hachées, que Google hachera avant qu'elles ne parviennent aux serveurs, soit des données préhachées. Si vous envoyez des données préhachées, veuillez les encoder à l'aide de l'algorithme SHA256 encodé en hexadécimal. Dans les deux cas, fournissez au moins l'un des deux champs suivants : "email" ou "phone_number".
Pour transmettre les données non hachées à la couche de données :

1. Sur votre site Web, stockez les données fournies par l'utilisateur en tant que paires clé/valeur dans une variable JavaScript. Exemple :

   var leadsUserData = {
     'email': '[e-mail]',
     'phone_number': '[phone]',
     'address': {
       first_name: 'John',
       last_name: 'Doe',
       street: '123 Lemon',
       city: 'Some city',
       region: 'CA',
       country: 'US',
       postal_code: '12345',
     },
   };
   

2. Envoyez les données utilisateur avec un événement utilisant dataLayer.push(). Exemple :

   <script>
     dataLayer.push({
       'event': 'formSubmitted',
       'leadsUserData': {
         'email': '[e-mail]',
         'phone_number': '[phone]',
         'address': {
            first_name: 'John',
            last_name: 'Doe',
            street: '123 Lemon',
            city: 'Some city',
            region: 'CA',
            country: 'US',
           postal_code: '12345',
          },
        },
     });
   <script>
   

La variable leadsUserData est désormais disponible dans Google Tag Manager.

Pour transmettre les données préhachées à la couche de données :

1. Sur votre site Web, hachez les données fournies par l'utilisateur à l'aide de l'algorithme SHA256 encodé en hexadécimal. La clé correspondant aux données encodées doit commencer par sha256_. Exemple :

   {'sha256_email_address':await hashEmail(email.trim()),
   }
   

2. Envoyez les données utilisateur avec un événement utilisant dataLayer.push(). L'exemple ci-dessous illustre l'implémentation d'une couche de données qui part du principe que vous avez vous-même écrit une fonction de hachage que vous exécutez de manière asynchrone.

   <script>
     dataLayer.push({
       'event': 'formSubmitted',
       'leadsUserData': {
         'sha256_email_address': await hashEmail(email.trim()),
         'sha256_phone_number': await hashPhoneNumber(phoneNumber),
         'address': {
           sha265_first_name: await hashString(firstname),
           sha256_last_name: await hashString(lastname),
           sha256_street: await hashString(streetAddress),
           postal_code: '12345',
          },
        },
     });
   <script>
   

La variable leadsUserData est désormais disponible dans Google Tag Manager.

Étape 2 : Créez la variable de données fournies par l'utilisateur

1. Dans votre conteneur Web, ouvrez le menu Variables.
2. Créez une variable définie par l'utilisateur de type Données fournies par l'utilisateur.
3. Définissez le Type sur Code.
4. En ce qui concerne le champ pertinent des données utilisateur que vous souhaitez fournir, cliquez sur le menu déroulant, puis sélectionnez Nouvelle variable.
5. Sous Sélectionner un type de variable, sélectionnez Variable de couche de données.
6. Dans Variable de couche de données, indiquez vos données utilisateur stockées Exemple :leadsUserData
7. Attribuez un nom à la variable de couche de données, puis enregistrez-la. pour revenir aux paramètres Données fournies par l'utilisateur.
8. Nommez la variable Données fournies par l'utilisateur, par exemple My user-defined data.
9. Cliquez sur Enregistrer.

Attribuer la variable à la balise Google

1. Dans votre conteneur Web, ouvrez le menu Balises.
2. Modifiez la balise Google que vous utilisez pour envoyer des données au serveur de taggage.
3. Sous Paramètres de configuration, ajoutez un paramètre de configuration appelé user_data. Définissez Valeur sur la variable Données fournies par l'utilisateur, par exemple {{My user-provided data}}.

4. Enregistrez les modifications. Votre balise doit se présenter comme suit :

   

Configurer une balise Floodlight côté serveur

Dans votre conteneur serveur, activez le suivi avancé des conversions en configurant la balise Ventes Floodlight ou Compteur Floodlight.

Remarque : Lorsque les balises Floodlight se déclenchent, elles envoient à Google toutes les données de conversion disponibles (y compris les données fournies par les utilisateurs). Si vous souhaitez modifier ou exclure des paramètres d'événement avant le déclenchement de la balise, configurez et utilisez les transformations appropriées, puis associez-les à votre balise.

Les données fournies par l'utilisateur vous permettent d'effectuer des mesures plus précises en envoyant des données first party hachées depuis votre site Web. Pour ce faire, vous devez d'abord accepter les règles et les conditions d'utilisation des données fournies par les utilisateurs dans votre compte Search Ads 360.

Si vous souhaitez inclure des données fournies par l'utilisateur pour le suivi avancé des conversions pour le Web, les informations permettant d'identifier personnellement l'utilisateur (PII) doivent être envoyées depuis le site Web (conteneur côté client), qui sont ensuite transmises par le conteneur côté serveur. Si vous ne souhaitez pas que les informations permettant d'identifier personnellement l'utilisateur soient envoyées par un tag spécifique, utilisez "Transformations" pour les masquer pour les tags sélectionnés.

Facultatif : Valeur du revenu

La balise de vente Floodlight utilise le paramètre value de l'événement comme montant par défaut pour calculer les revenus. Pour spécifier une base différente pour calculer la valeur du revenu, vous devez configurer une variable pour extraire les données de votre base de données et l'attribuer à votre balise Floodlight de vente.

Remarque : Le conteneur serveur chiffre la valeur du revenu pour s'assurer que les données de conversion ne sont pas exposées lorsque le serveur renvoie des données au navigateur.

Pour créer une variable :

1. Dans votre conteneur serveur, ouvrez le menu Variables.
2. Créez une variable définie par l'utilisateur pour l'entrée de données. Par exemple, si vous souhaitez utiliser une valeur provenant d'une base de données Firestore, créez une variable {{Recherche Firestore}}.
3. Spécifiez les sources de données pour la variable.
4. Nommez la variable (par exemple, "Recherche du bénéfice") et enregistrez-la.

Pour utiliser la variable dans la balise de ventes Floodlight :

1. Dans votre conteneur de serveur, ouvrez le menu Balises.
2. Modifiez la balise Ventes Floodlight.

3. Dans la section Paramètres uniques :

   • Pour Source de données, sélectionnez Configuration personnalisée.
   • Pour Revenu, sélectionnez la variable que vous avez créée précédemment.
   • Pour ID de la commande, saisissez un ID ou utilisez une variable pour renseigner dynamiquement l'ID de la commande.

   

4. Enregistrez la balise.

Facultatif : paramètres personnalisés

Vous pouvez transmettre des champs personnalisés de votre page Web à Google Marketing Platform, comme match_id.

Google Tag Manager

Pour configurer des champs personnalisés pour Floodlight, ajoutez x-dc- au début du nom d'un paramètre :

1. Dans votre conteneur Web, ouvrez le menu Balises.
2. Modifiez un tag d'événement GA4 ou créez-en un.

3. Dans Paramètres de l'événement, ajoutez le nom du paramètre. Pour indiquer qu'il s'agit d'une balise Floodlight, ajoutez x-dc- au début. Par exemple, si vous envoyez normalement match_id, remplacez-le par x-dc-match_id.

   

4. Enregistrez la balise.

gtag.js

Pour configurer des champs personnalisés pour Floodlight, ajoutez x-dc- au nom du paramètre d'événement :

  gtag('event', 'purchase', {
      'x-dc-match_id': [MATCH_ID],
      ...
  })

Étape 3 : Validez votre configuration

Une fois que vous avez commencé à envoyer des données avec le conteneur serveur, vous pouvez vérifier qu'il fonctionne correctement en procédant comme suit :

1. Ouvrez votre site Web.
2. Dans votre conteneur de serveur Google Tag Manager, sélectionnez Aperçu. Tag Assistant démarre et charge le conteneur de votre serveur.
3. L'onglet Balises affiche toutes les balises qui se sont déclenchées. Assurez-vous de vérifier si la balise que vous avez configurée s'est déclenchée.
4. L'onglet Console affiche les éventuelles erreurs qui se sont produites lors de la transmission des données au conteneur serveur. Recherchez les erreurs et corrigez-les.

Pour obtenir de l'aide concernant le débogage des conteneurs Tag Manager, consultez Aide sur la prévisualisation et le débogage.

Étapes suivantes

Une fois que votre balise Floodlight fonctionne comme prévu, vous pouvez supprimer toutes les balises Floodlight équivalentes dans un conteneur Web pour éviter la duplication des données.