Envoi de données du Google Tag Manager conteneur Web au conteneur du serveur

Disposer de données fiables lors de la configuration de Google Tag Manager côté serveur est essentiel pour un balisage précis. L’un des moyens les plus populaires pour envoyer des données du Web au serveur GTM est Google Analytics 4. GA4 a ses limites. C’est pourquoi nous avons créé Data Tag et Data Client qui doivent fonctionner ensemble pour fournir des données d’événements et d’utilisateurs du Web au serveur GTM.

Dans cet article, je souhaite vous montrer comment utiliser Data Tag. Cette balise personnalisée envoie des paramètres du conteneur Web Google Tag Manager au conteneur serveur. Lorsqu’il est utilisé avec Data Client pour le conteneur serveur Google Tag Manager, il permet d’envoyer des variables de couche de données, des paramètres personnalisés et d’autres données du Web vers le conteneur serveur. Par conséquent, Data Client récupère les informations de Data Tag dans les événements du serveur Google Tag Manager.

Le conteneur serveur n’a pas d’accès direct aux données côté navigateur – telles que la couche de données, les cookies ou le contexte de la page – ; ces données doivent donc être envoyées explicitement depuis le conteneur web. Deux méthodes sont disponibles à cet effet :

• Data Tag, associé à Data Client dans le conteneur serveur pour recevoir et analyser ses requêtes, envoie les variables de la couche de données et d’autres paramètres indépendamment de toute plateforme spécifique ;
• Google Analytics 4, qui envoie les données via un Google Tag configuré avec l'URL du conteneur serveur. Ces deux méthodes sont décrites ci-dessous.

Étape 1. Installez le modèle Data Tag :

1. 1.
   Cliquez sur le menu Tags.
2. 2.
   Cliquez sur Nouveau.
3. 3.
   Ouvrez la section Modèles de votre conteneur Google Tag Manager web → ajoutez Data Tag depuis la galerie de modèles.
4. 4.
   Cliquez sur l’onglet Configuration de la balise.
5. 5.
   Cliquez sur Découvrir d’autres types de balises dans la galerie de modèles de la communauté → recherchez Data Tag → cliquez sur Ajouter à l’espace de travail → cliquez sur Ajouter.

Étape 2. Ensuite, nous allons configurer Data Tag pour l’événement « pageview » :

1. 1.
   Sous Nom de l’événement, vous pouvez sélectionner un nom d’événement standard, ajouter un nom d’événement personnalisé ou ajouter un nom d’événement dynamique à l’aide de la variable {{Event}}.
2. 2.
   Saisissez votre URL côté serveur GTM (vous pouvez trouver votre URL côté serveur GTM dans votre compte stape.io en ouvrant le conteneur sGTM et en consultant la section Domaine.)
3. 3.
   Cochez la manière dont vous souhaitez que les données soient envoyées :

   1. 3.1.
      Envoyer tout depuis la couche de données : enverra toutes les informations présentes dans la couche de données GTM web vers les données d’événements GTM côté serveur.
   2. 3.2.
      Envoyer les données communes — ajoute à la requête les champs page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution et viewport_size.
   3. 3.3.
      Ajouter l’état de consentement — ajoute l’objet consent_state à la requête. Il comprend les propriétés suivantes : ad_storage, analytics_storage, functionality_storage, personalization_storage et security_storage.
   4. 3.4.
      Ajouter un cookie commun : la balise enverra des cookies communs dans eventData afin de contourner certaines limitations des plateformes de commerce électronique. Cela est par exemple nécessaire pour les événements qui fonctionnent sur les pages de paiement de Shopify.
4. 4.
   Sous Données d’événement, vous pouvez ajouter manuellement des données à la requête. Vous pouvez également appliquer des transformations (comme le hachage, le tronquage, etc.) ou stocker des données.
5. 5.
   Sous Données utilisateur, vous pouvez envoyer des paramètres utilisateur et appliquer des transformations ou stocker des données.
6. 6.
   Sous Paramètres et Paramètres avancés, vous trouverez exactement cela : des options de configuration avancées. À moins de savoir exactement ce que vous faites, il est préférable de ne pas modifier ces paramètres.
7. 7.
   Donnez un nom descriptif à votre balise et cliquez sur Enregistrer.

Étape 3. Vous pouvez ensuite configurer Data Tag pour d’autres événements. L’exemple ci-dessous montre comment configurer des événements de commerce électronique lorsque Data Layer est disponible.

Cette balise déclenche chaque événement de commerce électronique dans la couche de données. Dans cet exemple, tous les événements de commerce électronique se terminent par _stape ; nous utilisons donc une expression régulière qui inclut tous les événements contenant _stape.

Exemple de variable permettant d’extraire les données utilisateur de la couche de données.

Étape 4. Ensuite, téléchargez Data Client depuis GitHub :

1. 1.
   Suivez ce lien.
2. 2.
   Cliquez sur Code → Télécharger le fichier ZIP.

Étape 5. Maintenant, importez Data Client :

1. 1.
   Ouvrez votre conteneur Google Tag Manager serveur.
2. 2.
   Cliquez sur Modèles.
3. 3.
   Sous Clients, cliquez sur Nouveau.
4. 4.
   Cliquez sur les trois points dans le coin supérieur droit.
5. 5.
   Cliquez sur Importer et sélectionnez le client de données que vous avez téléchargé depuis GitHub (vous devrez peut-être d'abord décompresser l'archive).
6. 6.
   Une fois l’importation terminée, cliquez sur Enregistrer.

Étape 6. Ouvrez l’onglet Clients et cliquez sur Nouveau → choisissez Data Client → cliquez sur Enregistrer.

Étape 7. Ouvrez les écrans d’aperçu GTM Web et Serveur et testez la configuration. Vous devriez voir Data Tag se déclencher dans le conteneur GTM Web et Data Client analyser les requêtes Data Tag dans le sGTM.

Étape 1. Créez une variable de configuration pour l’URL du conteneur serveur. Pour ce faire :

1. 1.
   Cliquez sur le menu Variables.
2. 2.
   Cliquez sur Nouveau sous la barre Variable définie par l’utilisateur.
3. 3.
   Cliquez sur la barre Configuration des variables.
4. 4.
   Sélectionnez le type Balise Google : Paramètres de configuration.
5. 5.
   Cliquez sur Ajouter un paramètre.
6. 6.
   Saisissez les paramètres suivants :

   1. 6.1.
      Paramètre de configuration : server_container_url.
   2. 6.2.
      Valeur : l’URL de votre conteneur serveur Tag Manager.
7. 7.
   Donnez un nom descriptif à votre variable et cliquez sur Enregistrer.

Étape 2. Créez une balise Google Analytics 4 :

1. 1.
   Cliquez sur le menu Balises.
2. 2.
   Cliquez sur Nouveau.
3. 3.
   Cliquez sur l’onglet Configuration de la balise.
4. 4.
   Sélectionnez Google Analytics → Balise Google.
5. 5.
   Sous ID de balise, saisissez l’ID de votre compte GA4 (pour le trouver, accédez à votre compte GA4 → cliquez sur Administration → Flux de données → sélectionnez le flux → consultez l’ID de mesure).
6. 6.
   Sous Paramètres de configuration, sélectionnez la variable du conteneur serveur que vous avez créée précédemment.
7. 7.
   Sous Déclenchement, assurez-vous que l’option Initialisation - Déclencheur toutes les pages est sélectionnée.
8. 8.
   Donnez un nom descriptif à votre balise et cliquez sur Enregistrer.
9. 9.
   Cliquez sur Publier pour que le conteneur soit mis en ligne.

Étape 3. Voyons ensuite comment créer un événement GA4, en prenant l’événement « Tous les clics » comme exemple :

1. 1.
   Cliquez sur le menu Balises.
2. 2.
   Cliquez sur Nouveau.
3. 3.
   Cliquez sur l’onglet Configuration de la balise.
4. 4.
   Sélectionnez Google Analytics → Google Analytics : Événement GA4.
5. 5.
   Saisissez votre ID de mesure (issu du menu Flux de données de GA4).
6. 6.
   Donnez un nom descriptif à votre événement.
7. 7.
   Cliquez sur Déclenchement → Tous les clics.
8. 8.
   Donnez un nom descriptif à la balise.
9. 9.
   Cliquez sur Enregistrer.

Vous devrez ensuite configurer l’envoi de vos données d’événement vers votre plateforme de marketing ou d’analyse. Les étapes exactes dépendront de la plateforme que vous aurez choisie. Consultez nos guides sur les plateformes les plus courantes pour plus d’informations :

• Comment configurer l’API Meta Conversions
• Comment configurer le suivi Google Analytics 4 (GA4)
• Comment configurer le suivi des conversions Google Ads
• Autres plateformes

Le premier cas d’utilisation qui vient à l’esprit est l’envoi d’une couche de données du conteneur Web au serveur. À l’aide de ces données, vous pouvez alimenter vos balises côté serveur avec des paramètres supplémentaires, ce qui s'avère particulièrement utile pour fiabiliser votre suivi AdWords ou vos pixels de réseaux sociaux.

Dans la capture d’écran ci-dessous, j’ai utilisé ces paramètres pour envoyer la couche de données au conteneur serveur :

• Événement personnalisé: {{event}}
• Activé, envoyer tous les éléments de la couche de données
• Activé, envoyer les données communes

Cette balise de données se déclenche sur tous les événements d’e-commerce avancés.

Dans le mode Aperçu du conteneur serveur, vous verrez que Data Tag a envoyé des demandes sur tous les événements d’e-commerce et que Data Client a reçu et traité ces demandes à l’intérieur du conteneur serveur. Si vous cliquez sur le nom de l’événement et vérifie event_data, vous devriez voir tous les paramètres de la couche de données Web.

Supposons que vous souhaitiez envoyer des données utilisateur telles que le prénom, le nom ou l’adresse e-mail à l’API Conversions de Facebook pour augmenter la qualité de votre correspondance d’événement. Vous pouvez utiliser Data Tag à cette fin. Si vous utilisez notre balise pour configurer une balise de l’API Conversions de Facebook, la balise FB capturera automatiquement les données utilisateur à partir de Data Tag.

J’ai envoyé l’adresse e-mail, le prénom et le nom de l’utilisateur avec les événements de paiement dans les exemples ci-dessous. J’ai ajouté les données utilisateur à la balise de données dans le conteneur Web de Google Tag Manager. J’utilise des paramètres statiques pour le test. Toutefois, vous pouvez transmettre ces paramètres de manière dynamique à l’aide de variables. Notre balise Facebook capture automatiquement les paramètres utilisateur du client de données et envoie des informations hachées à Facebook.

Pour vérifier si Facebook a reçu ces paramètres, vous pouvez ajouter l’identifiant de test Facebook à la balise du serveur Facebook et vérifier quels paramètres Facebook voit dans l’outil de test du gestionnaire d’événements.

Vous pouvez envoyer des données depuis le conteneur Web de Google Tag Manager vers votre CRM, Slack, webhooks, etc. Cet exemple vous montre comment envoyer des informations sur un nouvel achat sur votre site vers le canal Slack.

    1. Assurez-vous d’envoyer les informations correctes depuis le conteneur Web de Google Tag Manager à l’aide de Data Tag.

    2. Générez un webhook sur Slack.

    3. Dans le conteneur serveur, créez une nouvelle balise et choisissez un type de balise Requête HTTP.

    4. Dans l’URL de destination, ajoutez l’URL que vous avez générée sur Slack.

    5. Méthode HTTP POST.

    6. Dans le corps de la requête, ajoutez le texte et les paramètres que vous souhaitez envoyer à Slack.

{“text”: “New Purchase \n email: {{email}}  \n transation_id: {{transaction ID}} \n purchase_value: {{transaction ID}}”}

Si vous travaillez assez souvent avec Google Tag Manager, il est déjà arrivé que la couche de données (ou toute autre variable) doive être transmise d’une page de votre site à une autre.

Malheureusement, Google Tag Manager ne propose pas d’option permettant de stocker des données et de les transmettre entre les pages du site. Par exemple, il est possible d’envoyer un e-mail à un utilisateur uniquement s’il existe sur la page. Mais que se passe-t-il si les données utilisateur ne sont pas disponibles sur la page de remerciement et qu’elles ne peuvent être capturées qu’à partir de la page précédant la page de remerciement ?

À l’aide d’une balise de données, vous pouvez stocker toutes les variables que vous souhaitez transmettre à d’autres pages.

À titre d’exemple, je vais utiliser une évaluation créée avec Instapage. Nous devions configurer un événement de lead pour l’API de conversion Facebook. Lors de la soumission de l’évaluation, l’utilisateur devait saisir des informations telles que son adresse e-mail, son numéro de téléphone, son prénom, etc. Ces informations sur l’utilisateur étaient disponibles sur les pages d’évaluation, mais pas sur la page de remerciement.

Pour obtenir un score de qualité de correspondance d’événement élevé sur Facebook, vous devez envoyer des paramètres utilisateur avec l’événement CAPI. C’est pourquoi j’ai utilisé Data Tag pour stocker les données utilisateur dans le stockage local. J’ai créé un Data Tag pour l’application de soumission qui récupère les paramètres utilisateur de la couche de données et les stocke au niveau local. Cette balise se déclenche lorsqu’un utilisateur clique sur le bouton de soumission de l’évaluation.

Pour activer le stockage des données dans la balise de données, sélectionnez l’option de stockage à côté des données que vous souhaitez stocker.

Ensuite, j’ai ajouté un nouveau type de variable dans le conteneur Web (vous pouvez le télécharger en suivant ce lien). Créez de nouvelles variables pour toutes les données que vous avez stockées.

Pour finir, j’ai créé une balise de données Lead qui envoie les données stockées au conteneur serveur.

Vous pouvez utiliser un Data Client pour récupérer toutes les requêtes entrantes. Pour ce faire, vous devez modifier les paramètres du chemin. Il peut être utilisé, par exemple, pour récupérer des données à partir de Webhooks. Vous pouvez consulter cet article qui décrit comment utiliser les webhooks entrants. 

Si vous ne voyez pas les requêtes de la balise de données dans le conteneur serveur, cela peut être dû à la raison suivante: le client de données n’est pas publié. Ouvrez le conteneur serveur et publiez le client de données.

Data Tag et Data Client vous fourniront une source d’informations solide pour alimenter les balises que vous utilisez dans le conteneur serveur. Grâce à cette balise, vous pouvez accélérer le déploiement de nouvelles technologies et de nouveaux outils de suivi côté serveur. Cette balise permettra d’économiser du temps et de l’argent aux services informatique et marketing: tout le monde y gagne!