[GA4] Définir la configuration manuelle (Tag Manager)

This feature is part of an open beta. Keep in mind that the feature is subject to change.

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

1. Connectez-vous à Google Tag Manager.
2. Dans l'onglet Espace de travail, cliquez sur Balises à gauche.
3. Ouvrez la balise Google Analytics : Événement GA4 que vous utilisez pour collecter les données client.
4. Sélectionnez Inclure les données fournies par l'utilisateur depuis votre site Web.
   
5. Dans le menu déroulant Données utilisateur, sélectionnez ou créez une variable "Données fournies par l'utilisateur".
6. Dans la variable "Données fournies par l'utilisateur", sélectionnez Configuration manuelle.
   
7. Pour chaque champ, développez le menu déroulant et sélectionnez une variable.
8. Si vous créez une variable pour un champ de données, procédez comme suit :
   1. Cliquez sur Configuration de la variable > Élément DOM.
   2. Attribuez un nom à la variable en haut de l'écran.
   3. Dans le champ Mode de sélection, sélectionnez Sélecteur CSS.
   4. 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.
   5. Laissez le champ Nom de l'attribut vide.
   6. Ignorez le champ Valeur relative au format pour éviter tout problème de configuration.
   7. Enregistrez la variable "Élément DOM".
   8. Répétez cette procédure pour tous les champs que vous souhaitez collecter.
9. Dans la variable "Données fournies par l'utilisateur", ignorez le champ Valeur relative au format.
10. Enregistrez la balise d'événement.
11. En haut à droite, cliquez sur Envoyer pour publier les modifications.

Identify CSS selectors for user-provided data fields

To identify the CSS selectors to input into the fields, complete these steps for each field. If you already have unhashed variables in your code, you can select those instead of creating new CSS variables.

Note: If you’re using JavaScript variables, it’s likely easiest to ask your developer which variables should be added to these fields. If you’re using CSS Selectors, you can follow the steps below.

1. Open a Google Chrome browser window.
2. Go to your website, but keep Google Tag Manager open.
3. Identify the customer data you want to send to Google Analytics. For example, if you want to send an email address, identify where the email address is present on the page.
4. Right click the field and select Inspect. For example, if you are trying to capture an email address, make sure you are right clicking the email address.
5. On the Chrome Developer Tools page, you will see a portion of the code highlighted. This code is the page element where you need to extract CSS Selectors for the customer data.
6. Hover your mouse over the highlighted code and right-click it.
7. Scroll down to "Copy", then select Copy Selector.
8. Paste the copied text in the corresponding field in Google Analytics or Tag Manager.
   • The copied text should look something like the following:

     tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > custEmail

Next steps

Validate that user-provided data collection is set up correctly. Show me how.