Mis à jour le 26 mai 2021: Ajout de détails sur le nouveau Objets d’espace de noms option dans le modèle.

Vitals Web de base est décrit sur la ressource web.dev dédiée comme (c’est moi qui souligne):

“Les Core Web Vitals sont le sous-ensemble des Web Vitals qui s’appliquent à toutes les pages, devrait être mesuré par tous les propriétaires de siteset apparaîtra dans tous les outils Google.”

Les Cœur Les mesures Web Vitals suggérées par Google sont :

• Largest Contentful Paint (LCP), qui mesure le temps nécessaire pour charger la plus grande image ou le plus grand bloc de texte dans la fenêtre d’affichage. Celui-ci devrait idéalement être inférieur à 2500 millisecondes.
• First Input Delay (FID), qui mesure le temps qu’il a fallu au navigateur pour réagir à l’interaction de l’utilisateur (par exemple, cliquer ou appuyer). Celui-ci devrait idéalement être inférieur à 100 millisecondes.
• Cumulative Layout Shift (CLS), qui mesure l’ampleur de inattendu changements de mise en page pendant la durée de vie de la page. Cela devrait idéalement avoir un score de moins de 0,1.

Le suivi de Core Web Vitals a déjà été exploré de manière assez approfondie dans des articles tels que cet article de TagManagerItalia, mais je voulais contribuer à la discussion avec quelque chose d’unique.

Dans cet article, je vais vous montrer comment utiliser un nouveau modèle personnalisé pour configurer le suivi Core Web Vitals sans avoir à utiliser des balises HTML personnalisées. Je montrerai également comment utiliser la sortie de ce modèle pour envoyer les données à Google Analytics 4.

Un grand merci à Philip Walton de Google pour avoir clarifié de nombreuses choses dans cet article. Philip est l’auteur du contenu Web Vitals sur web.dev entre autres, alors faites-vous une faveur et abonnez-vous à son contenu sur TwitterGitHub et sur son blog.

Obtenir le modèle

Pour charger le modèle, accédez à l’interface utilisateur de Google Tag Manager, puis cliquez sur le Modèles la navigation.

Ensuite, cliquez sur le Rechercher dans la galerie bouton dans le Modèles de balises région.

Dans la superposition, recherchez le modèle intitulé Core Web Vitalssélectionnez-le et cliquez sur le Ajouter à l’espace de travail bouton, en suivant toutes les invites pour faire le travail.

Une fois le modèle ajouté à votre espace de travail, vous pouvez ouvrir le Mots clés vue depuis la navigation et cliquez pour créer une nouvelle balise.

Choisissez le nouveau Vitals Web de base modèle personnalisé pour la balise.

La seule configuration dans la balise est la Objets d’espace de noms réglage, qui est désactivé par défaut. Si vous cochez la case, l’objet poussé dans dataLayer stockera chaque mesure taper (LCP, CLS, FID) dans son propre espace de noms sous le webVitalsMeasurement clé de la couche de données de niveau supérieur. Voir ci-dessous pour un exemple.

Ajouter le Toutes les pages déclencheur. Si vous souhaitez que cela ne fonctionne que sur certaines pages, utilisez plutôt un déclencheur de vue de page avec une condition de déclencheur appropriée.

Enregistrez la balise lorsque vous êtes prêt.

Essaye-le

Ensuite, passez en mode aperçu en cliquant sur le bouton Aperçu dans l’interface utilisateur.

Une fois la navigation sur votre site en mode aperçu, rechargez la page et attendez qu’il soit complètement chargé (certains Core Web Vitals ne fonctionnent pas si la page se charge en arrière-plan). Cliquez un peu pour faire bonne mesure.

En fait, si vous souhaitez y collecter des FID devoir être une interaction utilisateur enregistrée sur la page. L’interaction avec la page aura également pour effet de finaliser le rapport LCP, car la résolution du plus grand élément de la fenêtre s’arrête dès qu’une interaction de l’utilisateur est reçue.

Lorsque vous passez à l’onglet du mode de prévisualisation, vous devriez idéalement voir Trois coreWebVitals événements dans la liste. Parfois, vous n’en verrez que deux, par exemple si DIF ne s’est pas inscrit. Parfois, vous en verrez plus de trois, par exemple si les mesures sont réévaluées avant qu’une interaction de l’utilisateur ne soit reçue ou si l’onglet/le navigateur est en arrière-plan.

La meilleure façon de s’assurer que les trois éléments vitaux Web de base sont signalés est de permettre à la page de se charger complètement au premier plan, de cliquer un peu, puis de passer l’onglet en mode Aperçu.

Sélectionnez l’un des événements et développez le Appel d’API voir. Vous devriez voir quelque chose comme ceci :

L’objet dataLayer

C’est ce que le dataLayer l’objet contient :

Clé	Valeur de l’échantillon	La description
event	'coreWebVitals'	Le nom de l’événement – ​​toujours coreWebVitals.
webVitalsMeasurement.name	'FID'	Un des LCP, FID, CLS.
webVitalsMeasurement.id	'v1-123123123-234234234'	Un identifiant unique par mesure par page. Peut être utilisé pour associer plusieurs mesures CLS à un seul chargement de page.
webVitalsMeasurement.value	123.55	Valeur en millisecondes (pour LCP et FID), ou la score pour CLS.
webVitalsMeasurement.delta	17.77	Delta par rapport à la mesure précédente sur la même page (pertinent pour CLS).
webVitalsMeasurement.valueRounded	124	Valeur arrondie à l’entier le plus proche. Le score CLS est d’abord multiplié par 1000 pour obtenir un nombre significatif.
webVitalsMeasurement.deltaRounded	18	Delta arrondi à l’entier le plus proche. Le score CLS est d’abord multiplié par 1000 pour obtenir un nombre significatif.

Si tu as Objets d’espace de noms sélectionné, les touches de mesure elles-mêmes (name, id, value, etc.) seront imbriqués sous le nom de la mesure. Alors au lieu de webVitalsMeasurement.idle chemin clé serait webVitalsMeasurement.FID.idsi la mesure concernait le premier délai d’entrée.

Un cas d’utilisation pour vérifier Objets d’espace de noms est si vous voulez envoyer toutes les mesures CWV avec un seul événement. Si vous n’avez pas coché d’objets d’espace de noms, chaque mesure CWV écrasera la mesure précédente dans la couche de données, ce qui signifie que vous ne pourrez accéder qu’à la mesure la plus récente, quel que soit son type.

Créer le déclencheur et les variables de Google Tag Manager

Pour utiliser ces valeurs dans Google Tag Manager, vous devez d’abord créer un Déclencheur d’événement personnalisé et une Variable de couche de données pour chacun des webVitalsMeasurement touches que vous souhaitez mesurer.

Le déclencheur d’événement personnalisé

Le déclencheur d’événement personnalisé devrait ressembler à ceci :

Assurez-vous de définir coreWebVitals comme la valeur de la Nom de l’événement domaine.

Les variables de la couche de données

Ensuite, créez ces six Variables de la couche de données, en utilisant l’image ci-dessous comme modèle.

Nom de variable	Nom de la variable de la couche de données
DLV – webVitalsMeasurement.name	webVitalsMeasurement.name
DLV – webVitalsMeasurement.id	webVitalsMeasurement.id
DLV – webVitalsMeasurement.value	webVitalsMeasurement.value
DLV – webVitalsMeasurement.delta	webVitalsMeasurement.delta
DLV – webVitalsMeasurement.valueArrondi	webVitalsMeasurement.valueRounded
DLV – webVitalsMeasurement.deltaArrondi	webVitalsMeasurement.deltaRounded

Rappelez-vous, si vous avez Objets d’espace de noms sélectionné, les noms de variables sont différents. Voici ce que vous devez créer pour FID, par exemple :

Nom de variable	Nom de la variable de la couche de données
DLV – webVitalsMeasurement.FID.name	webVitalsMeasurement.FID.name
DLV – webVitalsMeasurement.FID.id	webVitalsMeasurement.FID.id
DLV – webVitalsMeasurement.FID.value	webVitalsMeasurement.FID.value
DLV – webVitalsMeasurement.FID.delta	webVitalsMeasurement.FID.delta
DLV – webVitalsMeasurement.FID.valueRounded	webVitalsMeasurement.FID.valueRounded
DLV – webVitalsMeasurement.FID.deltaArrondi	webVitalsMeasurement.FID.deltaRounded

Envoyer les données à Universal Analytics

Pour envoyer les données à Universal Analytics, je vous recommande de suivre cet excellent guide sur Tag Manager Italia : How To Track Core Web Vitals With Google Tag Manager.

REMARQUE! Une chose que vous devrez faire est de définir le transport dans votre balise Universal Analytics pour beacon:

Les beacon garantit que la balise utilise l’API Beacon. L’API Beacon est conçue pour “protéger” les requêtes asynchrones afin qu’elles se terminent même si la page s’est déchargée au cours du processus. Ceci est important pour certaines des mesures Core Web Vitals, qui peuvent ne pas signaler de valeur tant que l’utilisateur n’est pas sur le point de quitter la page.

Notez que GA4 ne ne pas vous obliger à définir explicitement quoi que ce soit pour que les hits soient envoyés avec l’API Beacon. Il utilise par défaut navigator.sendBeacon() dans toute demande.

Une autre chose à garder à l’esprit est qu’Universal Analytics n’accepte que les entiers dans Valeur de l’événement et Métrique personnalisée des champs. Pour cette raison, vous devrez utiliser le DLV – webVitalsMeasurement.valueArrondi et DLV – webVitalsMeasurement.deltaArrondi variables au lieu des valeurs brutes.

Envoyer les données à Google Analytics 4

Pour envoyer les données à Google Analytics 4, vous devrez utiliser un Balise d’événementalors allez-y et créez-en un.

La façon dont vous définissez le nom et les propriétés de l’événement dépend entièrement de vous, mais voici comment j’ai construit ma balise d’événement :

j’ai mis le Nom de l’événement au nom de la métrique collectée (LCP, FIDou alors CLS). N’oubliez pas que GA4 passe à une version plus sémantique approche dans la dénomination des événements, où le nom de l’événement doit refléter Qu’est-il arrivé plutôt qu’une étiquette générique telle que la catégorie d’événement utilisée dans Universal Analytics.

J’ai choisi d’envoyer uniquement les quatre paramètres “bruts”, car GA4 peut traiter des valeurs à virgule flottante là où Universal Analytics ne le pouvait pas. Les quatre noms de paramètres que j’ai choisis sont :

• web_vitals_measurement_name pour le nom de la métrique.
• web_vitals_measurement_id pour l’ID de métrique.
• web_vitals_measurement_value pour le cru valeur métrique.
• value pour le cru delta métrique.

je mets value à la métrique delta car value est un paramètre recommandé pour la valeur principale de l’événement. j’ai choisi d’utiliser delta simplement parce que cela a du sens pour la mesure CLS. Si la métrique évaluer a été envoyé comme événement value au lieu de cela, un agrégat de CLS rapporterait des valeurs gonflées car il additionnerait les totaux plutôt que les deltas.

Assurez-vous que la balise se déclenche sur le Déclencheur d’événement personnalisé vous avez créé auparavant.

Une fois que vous avez enregistré la balise, vous pouvez tester à nouveau la configuration. Réinitialisez le mode aperçu en cliquant sur le bouton Aperçu et chargez une page sur le site. Vous devriez voir votre balise GA4 se déclencher, et si vous ouvrez son contenu, vous devriez voir des valeurs valides être envoyées à GA4.

N’oubliez pas que GA4 peut être débogué dans sa propre interface de mode aperçu en cliquant sur l’ID de mesure respectif dans la barre supérieure de l’interface du mode aperçu. Ici, vous pouvez sélectionner l’un des événements, tels que CLSpour voir exactement ce qui a été envoyé à GA4 dans la requête HTTP !

N’oubliez pas de vérifier DebugView également dans l’interface Google Analytics 4 !

Enfin, il n’y a rien de plus satisfaisant que de regarder les données circuler dans Google BigQuery.

Résumé

J’espère que cet article vous aura été utile !

J’espère particulièrement que le modèle personnalisé présenté ici vous aidera à déployer le suivi Core Web Vitals, car vous pouvez éviter de travailler avec des balises HTML personnalisées embêtantes.

Le modèle récupère toujours le dernier version de la web-vitals bibliothèque, ce qui signifie que si une modification avec rupture est introduite, le modèle sera également rompu. Je ne pense pas que ce soit très réaliste, mais même si cela se produit, je veillerai à corriger le modèle dès que ce problème apparaîtra.

Le suivi de Core Web Vitals a beaucoup de sens, en particulier dans Google Analytics 4 avec ses quotas plus libéraux et ses restrictions de type de valeur. Être au top des performances du site est tellement important de nos jours, et tout commence par de bonnes données.

S’il vous plaît laissez-moi savoir dans les commentaires si vous avez des questions sur cette solution!