Balises Google Floodlight

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

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

Avant de commencer

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

• Accès administrateur à Google Tag Manager et Floodlight
• Configurer et installer Google Tag Manager
• Configurer un conteneur serveur
• Configurez 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 à 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 activera la balise Conversion Linker côté serveur.
   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: Configurer 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 de compteur Floodlight:

1. Dans l'espace de travail de votre conteneur serveur, sélectionnez le menu Balises à 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: cette référence s'affiche sur la page d'informations sur l'annonceur, juste en dessous de son nom. Cette valeur est également identifiée comme valeur de src= dans l'extrait d'une balise Floodlight généré.
   • 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 du paramètre type= dans l'extrait de code d'une balise Floodlight généré.
   • Chaîne de balise d'activité: dans la table "Activité", identifiez l'activité que vous souhaitez utiliser et recherchez la chaîne de balise d'activité répertoriée dans une colonne à droite. Cela correspond également à la valeur du paramètre cat= dans l'extrait de code d'une balise Floodlight généré.

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

   • Standard: chaque conversion est comptabilisée.
   • Unique: comptabilise la première conversion pour chaque utilisateur unique au cours de chaque journée 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 Sélectionner 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 meilleure option.

   

8. Saisissez un nom de balise, puis cliquez sur Enregistrer.

   

Ventes Floodlight

Pour configurer une balise de ventes Floodlight:

1. Dans l'espace de travail de votre conteneur serveur, sélectionnez le menu Balises à 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: cette référence s'affiche sur la page d'informations sur l'annonceur, juste en dessous de son nom. Cette valeur est également identifiée comme valeur de src= dans l'extrait d'une balise Floodlight généré.
   • 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 du paramètre type= dans l'extrait de code d'une balise Floodlight généré.
   • Chaîne de balise d'activité: dans la table "Activité", identifiez l'activité que vous souhaitez utiliser et recherchez la chaîne de balise d'activité répertoriée dans une colonne à droite. Cela correspond également à la valeur du paramètre cat= dans l'extrait de code d'une balise Floodlight généré.

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

   • Standard: chaque conversion est comptabilisée.
   • Unique: comptabilise la première conversion pour chaque utilisateur unique au cours de chaque journée 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 Sélectionner 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 meilleure option.

8. Saisissez un nom de balise, puis cliquez sur Enregistrer.

Facultatif: Configurer le suivi avancé des conversions

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

Pour configurer le suivi avancé des conversions, procédez comme suit :

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

Il existe trois façons d'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 les utilisateurs en fonction du code de votre site Web. Si vous avez besoin de contrôler où collecter les entrées, optez pour une configuration manuelle ou par code.	Spécifiez certaines propriétés CSS ou variables JavaScript pour collecter les données fournies par l'utilisateur. Si vous devez contrôler le hachage et la mise en forme 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 précision du suivi avancé des conversions, car elle vous permet d'envoyer des données correctement formatées chaque fois que votre balise de conversion se déclenche.
de la 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. En ce qui concerne le champ pertinent des données utilisateur que vous souhaitez fournir via le suivi avancé des conversions, ajoutez une variable nouvelle ou existante.

   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 au lieu de créer des variables. En cas de doute, suivez les instructions. Les variables peuvent être hachées ou non.

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 un sélecteur CSS ou un 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. Attribuez un nom à la variable d'élément DOM, puis cliquez sur Enregistrer. Votre écran revient alors 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 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é des 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 à l'aide de dataLayer.push(). L'exemple ci-dessous montre une implémentation de la couche de données qui suppose 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 la Variable de couche de données, faites référence aux données utilisateur stockées. Exemple : leadsUserData.
7. Attribuez un nom à la variable de couche de données, puis cliquez sur Enregistrer. Votre écran revient alors 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 nouveau paramètre de configuration appelé user_data. Définissez le champ 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 dans la balise Ventes Floodlight ou Compteur Floodlight.

1. Cochez la case Inclure les données fournies par l'utilisateur.
   
2. Appuyez sur Enregistrer pour enregistrer vos modifications.

Facultatif: valeur du chiffre d'affaires

La balise de ventes 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 afin d'extraire les données de votre base de données et de les affecter à votre balise de ventes Floodlight.

Remarque :Le conteneur serveur chiffre la valeur des revenus pour garantir que les données de conversion ne sont pas exposées lorsque le serveur les transmet 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 {{Firestore Lookup}}.
3. Spécifiez les sources de données de la variable.
4. Attribuez un nom à la variable (par exemple, "Recherche de bénéfices", puis cliquez sur Enregistrer).

Pour utiliser la variable dans la balise de ventes Floodlight:

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

3. Dans la section Paramètres uniques:

   • Dans le champ Source de données, sélectionnez Configuration personnalisée.
   • Pour Revenus, sélectionnez la variable que vous avez créée précédemment.
   • Dans le champ ID de commande, saisissez un ID ou utilisez une variable pour renseigner l'ID de commande de manière dynamique.

   

4. Enregistrez la balise.

Facultatif: paramètres personnalisés

Vous pouvez transmettre des champs personnalisés de votre page Web à Google Marketing Platform (par exemple, match_id).

Google Tag Manager

Pour configurer des champs personnalisés pour Floodlight, ajoutez x-dc- au 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 signaler qu'il passe à Floodlight, ajoutez x-dc-. 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 commencez à envoyer des données avec le conteneur serveur, vous pouvez vérifier s'il fonctionne correctement en procédant comme suit:

1. Ouvrez votre site Web.
2. Dans votre conteneur serveur Google Tag Manager, sélectionnez Prévisualiser. Tag Assistant démarre et charge votre conteneur serveur.
3. L'onglet Balises affiche toutes les balises qui ont été déclenchées. Vérifiez si la balise que vous avez configurée s'est déclenchée.
4. L'onglet Console affiche les erreurs survenues lors de la transmission des données au conteneur serveur. Recherchez les erreurs éventuelles et corrigez-les.

Pour obtenir de l'aide sur le débogage des conteneurs Tag Manager, consultez l'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 afin d'éviter la duplication des données.