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 allez apprendre à mesurer les Core Web Vitals avec 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 apprendrez également à extraire des données de Google Ad Manager et Google AdSense vers GA4, afin de corréler les données des champs 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

• Importez et configurez une balise dans votre conteneur Google Tag Manager.
• Mesurer les Core Web Vitals de la page Web dans GA4.
• Configurez un tag d'événement GA4 dans Google Tag Manager.
• Explorez les données Web Vitals dans dataLayer et dans les rapports GA4.
• Associez votre propriété GA4 à Google Ad Manager et Google AdSense.
• Corréler les métriques Core Web Vitals et les revenus publicitaires via un tableau de bord Looker Studio

Prérequis

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

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

La mesure des Core Web Vitals à l'aide d'un modèle de balise GTM s'appuie sur la bibliothèque web-vitals. Commençons par télécharger le modèle de balise GTM.

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

Maintenant, accédez à votre compte Google Tag Manager.

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

5. Cliquez sur le menu Autres actions et sélectionnez Importer.

6. Sélectionnez le fichier TPL précédemment téléchargé 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 choisissez "Signaux Web" de la colonne "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 sont suffisants.

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

4. Explorer les données Web Vitals dans dataLayer

Pour voir la balise en action, passez au mode Aperçu dans 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 "Associer". Un onglet distinct contenant l'URL fournie s'ouvre.

1. Interagissez avec la page en faisant défiler et en cliquant sur des éléments ou des espaces blancs.
2. Revenez ensuite à l'onglet où Tag Assistant et le mode Aperçu de Google Tag Manager sont activés.
3. Sur la gauche, vous verrez les différents événements transmis à 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 métriques où chacun d'eux représente un élément Core Web Vitals: LCP, INP et CLS.

6. Cliquez sur la première option, puis ouvrez "API Call" à droite. dans lequel vous pouvez voir les données transmises à partir du modèle de tag dans dataLayer.

7. Vérifiez aussi les autres entrées de la colonne "web_vitals" événements. Reportez-vous à la documentation web-vitals.js 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 du dataLayer et les envoyer à GA4, procédez comme suit:

• Créer un déclencheur pour la balise GA4
• Créer des variables pour extraire des données de 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". puis sélectionnez "Événement personnalisé" dans le menu "Autre" .
3. Définir "web_vitals" Dans le champ "Nom de l'événement", attribuez un nom au déclencheur et enregistrez.

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 à partir du type "Variable de couche de données".
3. Définir "webVitalsData.name" Dans le champ "Nom de la variable de couche de données", attribuez un nom à la variable (par exemple, "DLV - webVitalsData.name"), puis enregistrez.

4. Répétez ces étapes pour les quatre autres variables de couche de données obligatoires. 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 choisissez "Google Analytics: événement GA4". à partir de la balise "Google Analytics" .
3. Saisissez votre ID de mesure dans le champ correspondant.

4. Dans le champ "Nom de l'événement" champ de saisie, choisissez la variable dataLayer "DLV - webVitalsData.name" de l'étape créée précédemment.

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 comme "Signaux Web" pour regrouper les événements Core Web Vitals.

6. Enregistrez ces paramètres d'événement en tant que dimensions personnalisées dans l'UI GA4.
7. Appliquez des paramètres supplémentaires en fonction de vos exigences de configuration GA4.
8. Définir les paramètres "web_vitals" l'événement personnalisé 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, passez à nouveau au mode Aperçu de Google Tag Manager. Fournissez une URL à Tag Assistant et cliquez sur "Associer".

1. Interagissez avec la page en faisant défiler et en cliquant sur des éléments ou des espaces blancs.
2. Revenez ensuite à l'onglet où Tag Assistant et le mode Aperçu de Google Tag Manager sont activés.
3. Sur la gauche, cliquez sur chacun des éléments "web_vitals" et confirmer que la balise GA4 Core Web Vitals se déclenche.

4. Ouvrez la balise GA4 en cliquant sur la fiche pour confirmer que les données sont correctement extraites de dataLayer. Veillez à afficher les variables sous forme de valeurs.

5. Passez maintenant à votre propriété GA4 et ouvrez le rapport "Temps réel".
6. Dans "Nombre d'événements par nom d'événement" vous pouvez vérifier si vos événements Core Web Vitals ont bien été collectés.

7. Si une grande quantité de données est traitée dans le rapport en 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, vous pouvez 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 le nom et la description de la version, puis mettez votre configuration en ligne en cliquant sur "Publier".

8. Associez 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 à l'une de ces solutions publicitaires. Notez que vous devez disposer des autorisations d'éditeur (ou supérieure) dans GA4 et 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 des réseaux".
3. Dans "Paramètres du rapport" , activez "Rapports sur les propriétés Google Analytics 4 dans les rapports Ad Manager".

4. Lisez les conditions d'utilisation, puis cliquez sur "Confirmer".
5. Enregistrez la mise à jour.
6. Accéder à "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.

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 "+ Nouveau lien".

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

9. Visualiser des données avec Looker Studio

Pour obtenir une présentation visuelle des données Core Web Vitals ainsi que des métriques sur les annonces, cette étape consiste à configurer un tableau de bord Looker Studio. Veuillez suivre les étapes ci-dessous pour corréler les métriques Core Web Vitals et les revenus publicitaires.

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 reposent sur la syntaxe et la convention d'attribution de noms de cet atelier de programmation.

La première page du tableau de bord vous offre un historique des performances de vos métriques Core Web Vitals:

Sur la deuxième page, vous pouvez corréler les métriques Core Web Vitals avec les revenus publicitaires générés par 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 de la page avec les métriques liées aux annonces:

10. Conclusion

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

En savoir plus

• Chargement efficace des annonces sans incidence sur la vitesse de la page
• Optimize Largest Contentful Paint
• Optimize Cumulative Layout Shift
• Optimiser l'interaction avec Next Paint