L’intégration de GA4 AMP analytics repose sur la balise <amp-analytics> configurée avec le type googleanalytics. Vous définissez les mesures de pages vues et les déclencheurs d’événements personnalisés directement à l’intérieur d’un bloc de configuration JSON intégré dans votre modèle AMP HTML. Cette architecture permet aux pages AMP d’envoyer des données directement aux points de terminaison de Google Analytics 4 tout en respectant strictement les règles de validation AMP et en préservant des performances de chargement mobile rapides.
Pourquoi le suivi des événements personnalisés sur les pages AMP est-il différent des sites Web standard ?
Les pages Web standard exécutent généralement Google Tag Manager ou la bibliothèque standard gtag.js pour gérer le suivi. Ces scripts exécutent du JavaScript personnalisé pour écouter les événements DOM, construire des charges utiles et envoyer des requêtes. Cependant, le framework AMP interdit le JavaScript personnalisé arbitraire pour préserver des budgets de rendu stricts et minimiser le travail du processeur sur les processeurs mobiles.
Au lieu d’exécuter des scripts personnalisés, AMP utilise un framework déclaratif. Vous spécifiez les règles de suivi dans un objet JSON structuré à l’intérieur de l’élément <amp-analytics>. Le runtime AMP sous-jacent interprète ce balisage JSON, attache des écouteurs d’événements aux éléments DOM cibles et formate les requêtes réseau vers les points de terminaison GA4. Capturer un événement personnalisé comme un clic d’appel à l’action ou un seuil de défilement nécessite d’écrire une configuration JSON valide plutôt que d’ajouter des gestionnaires JavaScript en ligne.
- Scripts d’exécution AMP : La balise <script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script> doit résider dans l’en-tête HTML de la page.
- ID de mesure : Un ID de mesure GA4 valide commençant par G- est requis dans l’objet de configuration vars.
- Schéma JSON : La charge utile de configuration doit suivre une syntaxe JSON stricte sans guillemets non échappés ni virgules traînantes.
- Sélecteurs de déclenchement : Les ID d’éléments ou les classes CSS référencés dans les déclencheurs de clic doivent exister dans le balisage du corps.
- Options de transport : L’utilisation du transport par balise ou par image garantit que les requêtes analytiques se terminent même pendant une navigation rapide.
Comment configurer la mesure GA4 de base dans la balise amp-analytics ?
Pour commencer le suivi, placez le composant amp-analytics dans le corps de votre document AMP. Spécifiez type=”googleanalytics” comme attribut sur la balise du composant. À l’intérieur d’une balise enfant <script type=”application/json”>, déclarez votre configuration. Vous devez définir un dictionnaire vars qui contient votre ga_measurement_id cible. Le suivi automatique des pages vues se déclenche immédiatement lorsque le runtime AMP initialise le composant lors du chargement par l’utilisateur.
La configuration de base gère les métriques de trafic générales, telles que l’emplacement de la page, les détails du référent et la résolution de l’écran. Étant donné que les pages AMP s’exécutent dans des bacs à sable restreints ou à l’intérieur de caches AMP, les identifiants de client sont automatiquement gérés par le runtime. Cela garantit que la continuité de la session reste intacte lorsque les utilisateurs passent des URL de cache aux domaines d’origine.
Google traite les pages Web responsives et les pages AMP de la même manière dans l’indexation et l’évaluation de la recherche.
Google Search Central
Comment déclencher des événements personnalisés sur les clics de bouton AMP et les soumissions de formulaire ?
Le suivi des événements personnalisés dans AMP nécessite l’ajout d’objets au bloc triggers de votre configuration JSON. Chaque entrée de déclencheur contient un nom de déclencheur, une propriété on spécifiant le type d’interaction, un sélecteur ciblant l’élément spécifique et un type de requête. Par exemple, pour suivre un clic sur un bouton de formulaire de prospect, définissez on sur click et selector sur #submit-btn.
Ensuite, mappez le déclencheur à une requête d’événement. À l’intérieur de l’objet vars de ce déclencheur spécifique, spécifiez event_name ainsi que tous les noms de paramètres personnalisés que vous souhaitez transmettre à GA4. Lorsqu’un utilisateur appuie sur l’élément ciblé, le runtime AMP construit une requête HTTP correspondant à la structure du protocole de mesure GA4 et l’envoie en arrière-plan sans interrompre la navigation de l’utilisateur.
- Identifier les éléments cibles : Localisez les noms de classe CSS spécifiques ou les ID d’éléments pour les boutons, formulaires ou liens suivis.
- Définir les noms d’événements : Choisissez des noms d’événements standard ou personnalisés comme generate_lead ou select_content qui s’alignent sur votre structure de rapport.
- Construire des déclencheurs JSON : Ajoutez une entrée dédiée dans le bloc triggers en utilisant le sélecteur d’élément choisi.
- Transmettre les paramètres d’événement : Incluez des attributs personnalisés comme button_location ou form_id sous le bloc de variables du déclencheur.
- Tester le déclenchement d’événement : Inspectez les requêtes réseau dans les outils de développement du navigateur pour vérifier que les événements envoient correctement les données de charge utile.
Quels sont les paramètres d’événement personnalisés courants utilisés dans le suivi AMP ?
Lors de l’envoi d’événements à GA4, le passage de métadonnées contextuelles aide à décomposer les interactions des utilisateurs lors de la génération de rapports. Les paramètres standard incluent le titre de la page, le chemin de la page et les catégories de section. Dans les configurations JSON AMP, vous pouvez extraire des valeurs dynamiques en utilisant l’expansion de variable AMP intégrée, telle que ${title}, ${canonicalPath} ou ${documentReferrer}.
Pour les événements personnalisés, vous pouvez transmettre des paramètres personnalisés sous l’objet vars à l’intérieur de chaque définition de déclencheur. Par exemple, le suivi d’un bouton de lecture vidéo peut transmettre video_title et video_provider en tant que clés personnalisées. GA4 enregistre ces clés lorsqu’elles sont mappées en tant que dimensions personnalisées dans l’interface Google Analytics, donnant à votre équipe des informations riches sur l’engagement mobile sans exécution de JavaScript personnalisé.
Comment Alien Road applique GA4 Analytics dans AMP
Chez Alien Road, notre équipe intègre le suivi analytique personnalisé dans les modèles AMP via un flux de travail de déploiement systématique pour les projets clients. Dans un engagement typique, nous commençons par auditer les configurations de balises de bureau existantes pour mapper les dimensions d’événement requises directement aux schémas JSON AMP. Cela garantit que les métriques clés correspondent entre les pages responsives standard et les variantes AMP mobiles sans créer de divergences dans les rapports.
Pendant la phase de mise en œuvre, nous construisons des modèles JSON personnalisés qui capturent les étapes de conversion critiques, y compris les soumissions de formulaires de contact, les appuis sur les liens téléphoniques et les clics sortants. Nous implémentons des paramètres de balise de transport pour éviter la perte de données sur les parcours utilisateur à haute vitesse. Une fois publié, notre équipe technique effectue une vérification sur les navigateurs mobiles en direct et les URL de cache AMP pour garantir que les événements se déclenchent de manière prévisible dans des conditions réseau variables.
Enfin, nous mettons en place des tableaux de bord de surveillance en temps réel dans GA4 pour confirmer que les événements personnalisés entrants remplissent correctement les rapports d’exploration standard. En maintenant des routines de validation de schéma strictes, nous évitons les régressions de suivi lorsque les équipes d’ingénierie des clients mettent à jour les modèles de site ou introduisent de nouvelles campagnes marketing au fil du temps.
Google Search indexe les pages AMP tout comme les autres pages Web, et applique la même norme à toutes les pages, quelle que soit la technologie utilisée pour construire la page.
Google Search Central
Comment vérifier et déboguer les événements GA4 personnalisés dans les outils de validation AMP ?
La validation de votre configuration analytique est une étape critique avant de déployer des pages AMP en production. Une syntaxe JSON invalide à l’intérieur du bloc <amp-analytics> casse le composant et empêche les requêtes de suivi de se déclencher complètement. De plus, les erreurs de syntaxe font échouer la validation AMP de la page, ce qui peut supprimer la page de la distribution Google AMP Cache.
Pour déboguer les problèmes, ajoutez #development=1 à l’URL de votre page AMP locale et ouvrez les outils de développement du navigateur. La console du navigateur affiche des entrées de journal détaillées du runtime AMP, montrant si l’extension amp-analytics s’est chargée et listant chaque déclencheur évalué. Vous pouvez également inspecter l’onglet Réseau pour surveiller les appels réseau sortants dirigés vers google-analytics.com/g/collect et examiner les paramètres comme en pour le nom de l’événement et ep.* pour les paramètres d’événement.
Par où commencer cette semaine avec votre mesure mobile
Commencez votre travail d’optimisation en auditant vos pages AMP mobiles les plus performantes à l’aide des outils de développement du navigateur. Vérifiez que la dépendance <script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script> est correctement incluse dans l’en-tête du document et que votre valeur ga_measurement_id actuelle correspond à votre propriété GA4 active.
Ensuite, choisissez une action utilisateur clé sur votre site, comme un bouton de conversion principal, et ajoutez un déclencheur de clic simple à votre configuration JSON. Déployez le changement dans un environnement de test, déclenchez l’action manuellement et vérifiez GA4 DebugView pour confirmer la livraison de l’événement. Une fois vérifié, développez le balisage JSON pour couvrir les objectifs commerciaux restants dans votre bibliothèque de modèles.