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

Dans cet article, je veux vous montrer comment utiliser Data Tag. Cette balise personnalisée envoie des paramètres du conteneur Web Google Tag Manager au conteneur de serveur. Lorsqu'il est utilisé avec Data Client pour Google Tag Manager server container, il permet d'envoyer des variables de couche de données, des paramètres personnalisés et d'autres données du Web au conteneur de serveur. En conséquence, Data Client récupère les informations de Data Tag dans Google Tag Manager Server Events.       

Comment envoyer des données du Google Tag Manager web au conteneur du serveurCopier le lien vers cette section

Les entreprises ont commencé à tirer parti des conteneurs côté serveur de Google Tag Manager au cours de quelques dernières années. Certains d'entre eux utilisent la combinaison de conteneurs Web et serveur. D'autres souhaitent déplacer leur suivi côté client et commencer à utiliser le suivi côté serveur. La balise de données (Data Tag) que nous avons créée est conçue pour fournir des données du Web au conteneur du serveur. Les clients qui souhaitent combiner le suivi Web et serveur le trouveront particulièrement utile.

Le suivi côté serveur permet de déplacer l'instrumentation de Google Tag Manager vers l'environnement serveur. Autrement dit, vous pouvez déplacer votre suivi du navigateur vers le serveur. Notre Data Tag et Data Client résolvent le problème du transport des données du Web de Google Tag Manager vers le conteneur du serveur. Disons que vous avez configuré toutes les données dont vous avez besoin sur le conteneur Web, mais que l'environnement du serveur ne peut pas utiliser les mêmes variables de couche de données, éléments DOM, etc. Notre Data Tag et Data Client résolvent le problème du transportation de toutes les données depuis le Web au conteneur de serveur sans efforts supplémentaires.

À l'aide de Data Tag, vous pouvez configurer les événements, les paramètres d'événement et les données d’utilisateur que vous souhaitez envoyer au conteneur du serveur à tout moment. De l'autre côté, notre Data Client (client de données) doit être placé à l'intérieur du conteneur du serveur pour écouter les informations de la balise de données (Data Tag information) et les traiter dans les données d'événements.

Toutes les informations seront stockées sur votre serveur. Data Tag et Data Client permettront de stocker, mouler et récupérer les données du conteneur Web et de les utiliser pour configurer des balises côté serveur. Data Tag et Data Client à l'intérieur du conteneur du serveur vont façonner et guider les données vers les destinations appropriées à l'aide de balises.

Description de Data TagCopier le lien vers cette section

Je vais commencer par décrire tous les champs et options de cette balise. Cela vous aidera à mieux comprendre quelles informations vous pouvez envoyer du Web au serveur.

Nom d’événement. Vous avez deux options : sélectionner un événement standard dans le menu déroulant ou envoyer un événement personnalisé. En utilisant l'événement personnalisé, vous pouvez ajouter la variable {{event}}, et dans ce cas, Data Tag enverra tous les événements que vous voyez dans le mode de prévisualisation.

GTM Server Side domain (domaine côté serveur GTM) est un champ obligatoire. Vous pouvez le trouver dans les paramètres de votre conteneur Google Tag Manager Server sous URL de balisage du serveur. Data Tag utilisera ce domaine pour envoyer des requêtes.

Pour voir les événements dans le mode prévisualisation du conteneur du serveur Google Tag Manager, vous devez ajouter l'en-tête GTM Server Preview HTTP header. Vous pouvez le trouver en cliquant sur les trois points dans le coin supérieur droit du mode prévisualisation du conteneur Google Tag Manager Server -> Cliquez sur "Send requests manually" -> Copiez “X-Gtm-Server-Preview HTTP header”. Veuillez noter que cet en-tête n'est pas statique. Il peut se changer lorsque vous démarrez la prochaine session de débogage. Si vous ne voyez pas les Events Data Tag dans le conteneur du serveur, veuillez vérifier que votre en-tête Preview est correct.

Vous pouvez choisir d'envoyer toutes les valeurs de la couche de données au conteneur du serveur en activant Send all from Data Layer.

Si vous activez Send common data, Data Tag enverra page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution, viewport_size (emplacement de la page, chemin de la page, nom d'hôte de la page, référent de la page, titre de la page, encodage de la page, résolution de l'écran, taille de la fenêtre d'affichage)

Dans l'onglet event data (données d'événement), vous pouvez ajouter le paramètre d'événement personnalisé que vous souhaitez envoyer au conteneur du serveur. Vous pouvez choisir n'importe quelle variable du gestionnaire de balises Web ou saisir la valeur statique ou du texte dans les champs Name et Value. Il existe également une option pour modifier les valeurs avec les fonctions Trim ou To Minuscules. Dans l'exemple sur la capture d'écran, j'ai envoyé du texte de clic depuis le Web vers le conteneur du serveur modifié avec la fonction Minuscule.

À l'aide de User Data, vous pouvez envoyer des paramètres utilisateur. Vous devez sélectionner le nom du paramètre dans le menu déroulant, ajouter la valeur statique ou utiliser la variable. Il existe également une option pour transformer la valeur avec des fonctions Trim ou Minuscules. Vous pouvez utiliser ces champs pour envoyer des données utilisateur à la balise Facebook du serveur afin d'augmenter la correspondance des événements pour votre CAPI Facebook. Si vous utilisez notre Data Tag, Data Client et Facebook CAPI, alors la balise Facebook prendra automatiquement les données utilisateur de Data Tag.

Dans la section Settings (Paramètres), vous pouvez modifier le type de demande (par défaut, le type de demande est POST, remplacez-le par GET), les versions de chemin et de protocole.

Advanced Settings (Paramètres avancés) sont des paramètres standard que vous avez dans toutes les balises Web de Google Tag Manager.

Avantages de Data TagCopier le lien vers cette section

Pour l'instant, il existe deux manières d'envoyer des données du Web au conteneur du serveur : à l'aide du tag GA4 et du Data Tag/Data Client. Data Tag/Data Client présente plusieurs avantages par rapport à GA4 :

1. Data Tag peut envoyer des tableaux de données. En comparaison, la balise GA4 ne peut envoyer que des variables et renvoie une erreur si vous essayez d'envoyer un tableau.

2. À l'aide de Data Tag/Data Client, vous pouvez envoyer toutes les informations de la couche de données Web aux données d'événement à l'intérieur du conteneur du serveur. Alors qu'avec GA4, vous devrez envoyer chaque variable à la main.

3. Si vous voulez stocker des données utilisateur dans les variables GTM, veuillez utiliser Data Tag (balise de données). Par exemple, il peut être utilisé lorsque l'orm soumis dispose de données utilisateur disponibles sur les clics sur les boutons, mais pas sur les pages de remerciement. Plus tard je montrerai comment cette fonction marche dans la section Cas d'utilisation des balises de données.

4. Data Tag/Data Client permet de transformer les données. Par exemple, données de hachage, minuscules, rognage.

Comment envoyer les données du Web au conteneur serveur à l'aide de Data Tag/Data ClientCopier le lien vers cette section

Je vais montrer comment utiliser Data Tag/Data Client pour l'événement d'achat. Cette logique d'utilisation de Data Tag/Data Client est la même pour tous les événements.

1. Téléchargez Data Tag du GitHub -> Ouvrez l’onglet Template dans le conteneur Web -> Cliquez sur New -> Cliquez sur trois points dans le coin supérieur droit -> Importer -> Cliquez sur Save.

2. Téléchargez Data Tag du GitHub -> Ouvrez l’onglet Template (Modèles) dans le conteneur Server -> Cliquez sur New sous la séction Clients -> Cliquez sur trois points dans le coin supérieur droit -> Import -> Cliquez sur Save.

3. Ouvrez le conteneur Web -> Créer New tag -> Tag Type Data vers GTM Server Side -> Choisissez le nom de l'événement -> Ajouter l'URL du GTM Server Side -> En-tête GTM Server Preview HTTP header. Vous devez ajouter un en-tête prévisualisé pour voir les demandes de Data Tag à l'intérieur du conteneur du serveur. Vous pouvez le trouver en cliquant sur les trois points dans le coin supérieur droit du mode prévisualisation du conteneur de Google Tag Manager Server et choisissez "Send requests manually"  -> Ajouter des données d'événement (telles que nom du produit, SKU, ID, etc.) -> Ajoutez User Data.

4. Sélectionnez le déclencheur  pour événement (trigger for the event ) et cliquez sur Save.

5. Ouvrez Server container -> Ouvrez Client -> Ajouter new client -> Type de client Request Data to Event Data  -> Cliquez sur Save. Publiez le conteneur du serveur.

6. Ouvrez le mode de prévisualisation du conteneur Web et serveur et vérifiez que le conteneur serveur voit les informations de balise de données. Si vous ne voyez pas des rêquetes de balise de données, mettez à jour l'en-tête HTTP GTM Server Preview

7. Une fois vous avez vérifié que Data Tag et Data Client fonctionnent correctement, veuillez publier le conteneur Web et serveur.

Cas d'utilisation de Data TagCopier le lien vers cette section

1. Couches de données du Web au conteneur du serveur.Copier le lien vers cette section

Le premier cas d'utilisation qui me 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 fournir des paramètres supplémentaires à vos balises côté serveur. Sur la capture d'écran ci- dessous, j'ai utilisé ces paramètres pour envoyer la couche de données au conteneur du serveur :

Événement personnalisé : {{event}}

Envoyer tout depuis la couche de données est activé.

Envoyer des données communes est activé

Cette balise de données se déclenche lorsqu'un utilisateur passe à la procédure de paiement sur le site.

Si je passe en mode de prévisualisation du conteneur Web et serveur, je peux voir que Data Tag s'est déclenché trois fois sur le conteneur Web et que Data Client a reçu et traité les trois événements à l'intérieur du conteneur de serveur. Si je clique sur le nom d’événement et vérifie request_data, je peux voir tous les paramètres de la couche de données Web.

2. Envoi de User Data à l'API conversion de Facebook.Copier le lien vers cette section

Supposons que vous souhaitiez envoyer des données utilisateur telles que prénom, nom ou e-mail à l'API conversion de Facebook pour augmenter la qualité de la correspondance de votre événement. Vous pouvez utiliser Data Tag pour cela. Et si vous utilisez notre balise pour configurer la balise API conversion de Facebook, la balise FB capturera automatiquement les données utilisateur du Data Tag.

Dans les exemples ci-dessous je voulais envoyer l'e-mail, le prénom et le nom d’utilisateur avec les événements de paiement. J'ai ajouté les données utilisateur à Data Tag sur le conteneur Web Google Tag Manager. J'utilise des paramètres statiques pour le test, mais vous pouvez transmettre ces paramètres de manière dynamique à l'aide de variables. Notre balise Facebook capture automatiquement les paramètres utilisateur du Data Client et envoie des informations hachées à Facebook.

Pour vérifier encore une fois si Facebook a bien reçu ces paramètres, vous pouvez ajouter ID 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.

3. Envoyez des données personnalisées du conteneur Web aux autres serveurs.Copier le lien vers cette section

Vous pouvez envoyer des données du Google Tag Manager web container à votre CRM, Slack, webhooks, etc. Cet exemple vous montre comment envoyer des informations sur le nouvel achat à votre site au canal Slack.

1. Veuillez vérifier que vous envoyez les informations correctes à partir du Google Tag Manager web container à l'aide de Data Tag.

2. Générez un webhook https://api.slack.com/tutorials/slack-apps-hello-world sur Slack.

3. Dans le conteneur du serveur, créez une nouvelle balise et choisissez le type de balise HTTP Request.

4. Dans la déstination URL, ajoutez l'URL que vous avez générée sur Slack.

5. Méthode HTTP POST.

6. Dans la Demande, 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}}"}

4. Stocker des données.Copier le lien vers cette section

Si vous travaillez assez souvent avec Google Tag Manager, il était une fois où la couche de données (ou toute autre variable) devait être transmise d'une page de votre site à une autre.

Malheureusement, Google Tag Manager n'a pas la possibilité 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 lorsqu'il existe sur la page. Mais que se passe-t-il si les données utilisateur ne sont pas disponibles sur la page de remerciements et qu'elles ne peuvent être capturées qu'à partir de la page précédant la page de remerciements ?

À l'aide de data tag, vous pouvez stocker toutes les variables que vous souhaitez transmettre à d'autres pages. À titre d'exemple, je vais utiliser une évaluation construite avec Instapage. Nous devions mettre en place un événement principal pour l'API conversion de Facebook. Lors de la soumission de l'évaluation, l'utilisateur devait entrer des détails tels que l'e-mail, le numéro de téléphone, le prénom, etc. Ces informations sur utilisateur étaient disponibles sur les pages d'évaluation mais pas sur la page de remerciement.

Pour avoir un score de qualité de correspondance d'événement élevé sur Facebook, vous devez envoyer les 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éé une balise de données  de soumission de demande qui prend les paramètres utilisateur de la couche de données et les stocke dans le stockage local. Cette balise se déclenche lorsqu'un utilisateur clique sur le bouton Soumettre l'évaluation.  

Pour activer le stockage des données dans Data Tag, veuillez sélectionner l'option de stockage en regard 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 utilisant ce lien.) Créez de nouvelles variables pour toutes les données que vous avez stockées.

 Et enfin, j'ai créé Lead Data Tag qui envoie les données stockées au conteneur du serveur.

Problèmes courants avec Data Tag et Data ClientCopier le lien vers cette section

Si vous ne voyez pas des demandes de Data Tag dans le conteneur du serveur, cela peut être à cause de raisons suivantes :

1. En-tête de prévisualisation est incorrect. Ouvrez le mode de prévisualisation du conteneur Server -> Cliquez sur trois points dans le coin supérieur droit -> Cliquez sur Send requests manually -> Copiez l'en-tête X-Gtm-Server-Preview HTTP -> Ouvrez le conteneur Web et mettez à jour l'en-tête GTM Server Preview HTTP que vous utilisez à l'intérieur du conteneur du serveur.

2. Data Client n'a pas été publié. Ouvrez le conteneur Server et publiez Data Client.

3. Remplacez POST par GET. Ouvrez la console et vérifiez si vous avez des erreurs. Ensuite, ouvrez le réseau et saisissez les données. Si vous voyez des erreurs, ouvrez la balise de données et changez le type de demande de POST par GET.

ConclusionCopier le lien vers cette section

Data Tag et Data Client fourniront la source d'informations solide pour alimenter les balises que vous utilisez à l'intérieur du conteneur du serveur. A l'aide de cette balise, vous pouvez accélérer le déploiement de nouvelles technologies et de suivi côté serveur. Cette balise permettra d'économiser du temps et de l'argent à la fois pour l'informatique et le marketing -  évidement avantageux pour tout le monde!