Cette fonctionnalité fait partie d'une version bêta ouverte et peut donc encore changer.
Ces instructions s'adressent aux administrateurs et aux éditeurs qui souhaitent identifier les données fournies par les utilisateurs sur leur site Web et les inclure dans Google Tag Manager.
Présentation
Vous devez mettre à jour le code sur toutes les pages sur lesquelles vous collectez des données fournies par les utilisateurs (par exemple, une page d'inscription, de génération de prospects, de paiement ou similaire). Vous pouvez envoyer les données plusieurs fois au cours d'une session pour vous assurer qu'elles sont transmises à Analytics.
Avant de commencer
Ces instructions supposent que vous respectez les conditions suivantes :
- Vous avez accès au conteneur Tag Manager pour votre site Web.
- Vous avez activé la collecte et autorisé l'utilisation des données fournies par les utilisateurs.
- Vous avez configuré une balise "Google Analytics : Événement GA4" dans votre conteneur Tag Manager.
Instructions
- Connectez-vous à Google Tag Manager.
- Dans l'onglet Espace de travail, cliquez sur Balises à gauche.
- Ouvrez la balise Google Analytics : Événement GA4 que vous utilisez pour collecter les données client.
- Sélectionnez Inclure les données fournies par l'utilisateur depuis votre site Web.
- Dans le menu déroulant Données utilisateur, sélectionnez ou créez une variable "Données fournies par l'utilisateur".
- Dans la variable "Données fournies par l'utilisateur", sélectionnez Configuration manuelle.
- Pour chaque champ, développez le menu déroulant et sélectionnez une variable.
- Si vous créez une variable pour un champ de données, procédez comme suit :
- Cliquez sur Configuration de la variable > Élément DOM.
- Attribuez un nom à la variable en haut de l'écran.
- Dans le champ Mode de sélection, sélectionnez Sélecteur CSS.
- Dans le champ Sélecteur d'éléments, indiquez le sélecteur CSS qui fait référence aux données client. Découvrez comment identifier les sélecteurs CSS pour les champs de données fournies par les utilisateurs.
- Laissez le champ Nom de l'attribut vide.
- Ignorez le champ Valeur relative au format pour éviter tout problème de configuration.
- Enregistrez la variable "Élément DOM".
- Répétez cette procédure pour tous les champs que vous souhaitez collecter.
- Dans la variable "Données fournies par l'utilisateur", ignorez le champ Valeur relative au format.
- Enregistrez la balise d'événement.
- En haut à droite, cliquez sur Envoyer pour publier les modifications.
Identifier les sélecteurs CSS pour les champs de données fournies par l'utilisateur
Pour identifier les sélecteurs CSS à saisir dans les champs, procédez comme suit pour chaque champ. Si votre code comporte déjà des variables non hachées, vous pouvez les sélectionner au lieu de créer des variables CSS. En savoir plus sur les champs à définir
Remarque : Si vous utilisez des variables JavaScript, il est sans doute plus simple de demander à votre développeur de vous indiquer celles qu'il faut ajouter à ces champs. Si vous utilisez des sélecteurs CSS, vous pouvez suivre la procédure ci-dessous.
- Ouvrez une fenêtre du navigateur Google Chrome.
- Accédez à votre site Web, mais laissez Google Tag Manager ouvert.
- Identifiez les données client que vous souhaitez envoyer à Google Analytics. Par exemple, si vous souhaitez envoyer une adresse e-mail, identifiez l'emplacement de l'adresse e-mail sur la page.
- Effectuez un clic droit sur le champ, puis sélectionnez Inspecter. Par exemple, si vous essayez de collecter une adresse e-mail, assurez-vous d'effectuer un clic droit dessus.
- Sur la page des outils pour les développeurs Chrome, une partie du code apparaît en surbrillance. Ce code correspond à l'élément de page depuis lequel vous devez extraire les sélecteurs CSS pour les données client.
- Pointez sur le code en surbrillance, puis effectuez un clic droit dessus.
- Faites défiler l'écran jusqu'à "Copier", puis sélectionnez Copier le sélecteur.
- Collez le texte copié dans le champ correspondant de Google Analytics ou de Tag Manager.
- Le texte copié doit se présenter comme suit :
tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > custEmail
- Le texte copié doit se présenter comme suit :
Next steps
Validate that user-provided data collection is set up correctly. Show me how.