Mesurer les données des champs des métriques Core Web Vitals avec les métriques sur les annonces

1. Avant de commencer

Dans cet atelier de programmation, vous apprendrez à mesurer les Core Web Vitals à l'aide d'un modèle de balise Google Tag Manager (GTM) prédéfini et à envoyer les données à une propriété Google Analytics 4 (GA4). Vous découvrirez également comment extraire des données de Google Ad Manager et de Google AdSense vers GA4 afin de corréler les données réelles Core Web Vitals et les métriques de performances des annonces avec un tableau de bord Looker Studio prédéfini.

Objectifs de l'atelier

• Importer et configurer une balise dans votre conteneur Google Tag Manager
• Mesurer les Core Web Vitals de la page Web dans GA4
• Configurer un tag d'événement GA4 dans Google Tag Manager
• Explorer les données Web Vitals dans la dataLayer et dans les rapports GA4
• Associer votre propriété GA4 à Google Ad Manager et Google AdSense
• Corréler les Core Web Vitals et les revenus publicitaires via un tableau de bord Looker Studio

Ce dont vous avez besoin

• Un compte Google Analytics et une propriété Web GA4 avec accès Éditeur
• Un compte Google Tag Manager et un conteneur Web avec droits de publication
• Un réseau Google Ad Manager et/ou un compte Google AdSense avec accès administrateur
• Un compte Looker Studio

2. Ajouter le modèle de balise de GitHub à GTM

La mesure des Core Web Vitals via un modèle de balise GTM est basée sur la web-vitals bibliothèque. Nous allons d'abord télécharger le modèle de balise GTM.

1. Ouvrez le fichier template.tpl
2. Téléchargez le fichier sur votre ordinateur

Accédez maintenant à votre compte Google Tag Manager.

1. Ouvrez votre conteneur Web.
2. Créez un espace de travail et saisissez un nom (par exemple, "Mesure des Core Web Vitals").
3. Accédez à "Modèles".
4. Dans la section "Modèles de balise", cliquez sur le bouton "Nouveau".

5. Cliquez sur le menu Plus , puis sélectionnez "Importer".

6. Sélectionnez le fichier TPL que vous avez téléchargé précédemment sur votre ordinateur.
7. Cliquez sur le bouton "Sauvegarder".

Vous avez ajouté le modèle de balise à votre conteneur Google Tag Manager.

3. Configurer la balise Web Vitals

1. Dans votre espace de travail Google Tag Manager, accédez à "Balises".
2. Ajoutez la balise Web Vitals en cliquant sur "Nouveau", puis sur "Configuration de la balise" et sélectionnez la balise "Web Vitals" dans la section "Personnalisé".
3. L'étape suivante consiste à configurer les différents paramètres. Tous les paramètres sont expliqués dans le dépôt GitHub. Pour que cet atelier de programmation et le tableau de bord final fonctionnent, les paramètres suivants suffisent.

4. Appliquez l'un des déclencheurs de page vue, par exemple le déclencheur "Toutes les pages".
5. Ajoutez également des exceptions de déclencheur si nécessaire.
6. Nommez la balise "Core Web Vitals – Toutes les pages", puis enregistrez-la.

4. Explorer les données Web Vitals dans la dataLayer

Pour voir la balise en action, passez en mode Aperçu de Google Tag Manager. Tag Assistant s'ouvre et vous demande une URL pour prévisualiser et déboguer votre configuration. Indiquez l'URL d'une page sur laquelle le conteneur Google Tag Manager est implémenté, puis cliquez sur "Connecter". Un onglet distinct s'ouvre avec l'URL fournie.

1. Interagissez avec la page en faisant défiler et en cliquant sur des éléments ou des espaces vides.
2. Revenez ensuite à l'onglet contenant Tag Assistant et au mode Aperçu de Google Tag Manager.
3. Sur la gauche, vous verrez les différents événements envoyés dans la dataLayer.
4. Vous devez d'abord vérifier si la balise Web Vitals s'est déclenchée sur le déclencheur de page vue que vous avez choisi.

5. Vous devriez également voir trois événements "web_vitals", chacun représentant un Core Web Vital : LCP, INP et CLS.

6. Cliquez sur le premier, puis ouvrez l'onglet "Appel d'API" à droite. Vous y verrez les données envoyées par le modèle de balise dans la dataLayer.

7. Vérifiez également les autres entrées des événements "web_vitals". Utilisez la web-vitals.js documentation comme référence pour les différents types de données.

5. Envoyer les données Web Vitals à GA4

Pour extraire les données Core Web Vitals de la dataLayer et les envoyer à GA4, vous devez effectuer les opérations suivantes :

• Créer un déclencheur pour la balise GA4
• Créer des variables pour extraire des données de la dataLayer
• Créer le tag d'événement GA4

Créer le déclencheur

1. Dans votre espace de travail Google Tag Manager, accédez à "Déclencheurs".
2. Ajoutez un déclencheur en cliquant sur "Nouveau", puis sur "Configuration du déclencheur" et sélectionnez "Événement personnalisé" dans la section "Autre".
3. Définissez "web_vitals" dans le champ "Nom de l'événement", nommez le déclencheur et enregistrez-le.

Créer les variables dataLayer

1. Dans votre espace de travail Google Tag Manager, accédez à "Variables".
2. Créez une variable définie par l'utilisateur de type "Variable de couche de données".
3. Définissez "webVitalsData.name" dans le champ "Nom de la variable de couche de données", nommez la variable (par exemple, "DLV – webVitalsData.name") et enregistrez-la.

4. Répétez ces étapes pour les quatre autres variables de couche de données requises. Créez "webVitalsData.value".

5. Créez une autre variable avec le champ de nom "webVitalsData.id".

6. Créez "webVitalsData.rating".

7. Créez "webVitalsData.delta".

8. Vous devriez obtenir les variables dataLayer définies par l'utilisateur suivantes :

Créer le tag d'événement GA4

Avant de créer un tag d'événement GA4, assurez-vous que votre balise Google est déjà configurée.

1. Dans votre espace de travail Google Tag Manager, accédez à "Balises".
2. Ajoutez un tag d'événement GA4 en cliquant sur "Nouveau", puis sur "Configuration de la balise" et sélectionnez la balise "Google Analytics : Événement GA4" dans la section "Google Analytics".
3. Saisissez votre ID de mesure dans le champ correspondant.

4. Pour le champ de saisie "Nom de l'événement", sélectionnez la variable dataLayer "DLV – webVitalsData.name" à l'étape précédente.

5. Ajoutez les autres variables dataLayer en tant que paramètres d'événement, comme indiqué dans la capture d'écran. Veillez également à ajouter le paramètre "event_category" avec une valeur telle que "Web Vitals" pour regrouper les événements Core Web Vitals.

6. Enregistrez ces paramètres d'événement en tant que dimensions personnalisées dans l'interface utilisateur GA4.
7. Appliquez des paramètres supplémentaires en fonction des exigences de configuration de GA4.
8. Définissez l'événement personnalisé "web_vitals" comme déclencheur pour la balise GA4.
9. Ajoutez également des exceptions de déclencheur si nécessaire.

6. Vérifier les données dans GA4

Pour valider le flux de données vers GA4, repassez en mode Aperçu de Google Tag Manager. Indiquez l'URL de Tag Assistant, puis cliquez sur "Connecter".

1. Interagissez avec la page en faisant défiler et en cliquant sur des éléments ou des espaces vides.
2. Revenez ensuite à l'onglet contenant Tag Assistant et au mode Aperçu de Google Tag Manager.
3. Sur la gauche, cliquez sur chacune des entrées "web_vitals" et vérifiez que le tag GA4 Core Web Vitals se déclenche.

4. Ouvrez le tag GA4 en cliquant sur la fiche pour vérifier que les données sont correctement extraites de la dataLayer. Veillez à afficher les variables en tant que valeurs.

5. Accédez maintenant à votre propriété GA4 et ouvrez le rapport "Temps réel".
6. Dans la fiche "Nombre d'événements par nom d'événement", vous pouvez vérifier si vos événements Core Web Vitals sont collectés correctement.

7. Si une grande quantité de données est traitée dans le rapport "Temps réel", il est possible que les événements ne soient pas facilement identifiables. Dans ce cas, utilisez le rapport debugview, qui vous permet de consulter les données d'un appareil spécifique.

7. Publier votre configuration

Une fois que vous avez testé votre configuration, il est temps de publier votre espace de travail.

1. Ouvrez votre espace de travail Google Tag Manager.
2. En haut à droite de l'interface utilisateur, cliquez sur "Envoyer".
3. Indiquez un nom et une description pour la version, puis mettez votre configuration en ligne en cliquant sur "Publier".

8. Associer GA4 à Google Ad Manager ou Google AdSense

Après avoir collecté les données Core Web Vitals dans GA4, les métriques liées aux annonces doivent également être disponibles dans GA4 pour que le tableau de bord fonctionne. Associez Google Ad Manager et Google AdSense à GA4, ou seulement l'une de ces solutions publicitaires. Veuillez noter que vous devez disposer des droits d'éditeur (ou supérieurs) dans GA4 et des droits d'administrateur dans Google Ad Manager et Google AdSense pour effectuer l'association.

Associer GA4 à Google Ad Manager

1. Accédez à votre réseau Google Ad Manager.
2. Cliquez sur "Admin" > "Paramètres généraux" > "Paramètres réseau".
3. Dans la section "Paramètres des rapports", activez "Rapports sur les propriétés Google Analytics 4 dans les rapports Ad Manager".

4. Consultez les conditions d'utilisation, puis cliquez sur "Confirmer".
5. Enregistrez la modification.
6. Accédez à "Admin" > "Comptes associés" > "Google Analytics 4".
7. Cliquez sur "Nouvelle association de propriété Google Analytics 4".
8. Recherchez et sélectionnez la propriété GA4 que vous souhaitez associer.
9. Cliquez sur "Enregistrer" pour terminer la procédure.

Associer GA4 à Google AdSense

1. Accédez à votre compte Google AdSense.
2. Cliquez sur "Compte" > "Accès et autorisations" > "Intégration de Google Analytics".
3. Cliquez sur "+ Nouvelle association".

4. Recherchez et sélectionnez la propriété GA4 que vous souhaitez associer.
5. Cliquez sur "Créer une association".

9. Visualiser des données avec Looker Studio

Pour une présentation visuelle des données Core Web Vitals ainsi que des métriques publicitaires, cette étape consiste à configurer un tableau de bord Looker Studio. Pour corréler les Core Web Vitals et les revenus publicitaires, procédez comme suit :

1. Ouvrez ce modèle de tableau de bord Looker Studio.
2. Copiez le tableau de bord.
3. Mettez à jour la source de données en sélectionnant votre propriété GA4 dans la liste déroulante.
4. OK

Veuillez noter que pour que le tableau de bord fonctionne et affiche correctement les données, celles-ci doivent respecter la syntaxe et la convention d'attribution de noms de cet atelier de programmation.

La première page du tableau de bord vous donnera une vue historique des performances de vos Core Web Vitals :

Sur la deuxième page, vous pouvez corréler les Core Web Vitals avec les revenus publicitaires de Google Ad Manager et/ou Google AdSense :

La troisième page vous permet d'analyser les performances des Core Web Vitals au niveau du chemin d'accès à la page, ainsi que les métriques liées aux annonces :

10. Conclusion

Félicitations ! Vous avez appris à mesurer et à générer des rapports sur les Core Web Vitals avec GA4 et les métriques de performances des annonces de Google Ad Manager et Google AdSense.

En savoir plus

• Corréler les Core Web Vitals et les revenus publicitaires avec les outils Google
• Charger efficacement les annonces sans affecter la vitesse des pages
• Optimiser le Largest Contentful Paint
• Optimiser le Cumulative Layout Shift
• Optimiser l'Interaction to Next Paint