La technologie AMP (Accelerated Mobile Pages) permet de créer des pages Web dont le contenu statique s'affiche rapidement. AMP inclut un élément <amp-analytics>
qui permet de mesurer les interactions des utilisateurs, et il est intégré dans Google Analytics.
Configuration de base pour mesurer les pages vues
Pour créer une installation de base de Google Analytics sur une page AMP, copiez cet extrait de code et remplacez <GA_MEASUREMENT_ID>
par votre ID de balise Google. Trouver votre ID de balise Google
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
Envoyer des données vers plusieurs destinations
Vous pouvez envoyer des données vers plusieurs destinations avec la même balise <amp-analytics>
. Il vous suffit d'ajouter le nouvel ID de mesure <GA_MEASUREMENT_ID_NEW>
à votre commande config
.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" },
"<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
Fonctionnement
L'élément <amp-analytics>
est un composant AMP étendu. Il est explicitement activé en tant que custom-element
dans un tag de script.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Le bloc d'éléments <amp-analytics>
est configuré pour activer la prise en charge des produits de mesure Google. Définissez l'attribut type
pour <amp-analytics>
sur gtag (pour activer la compatibilité avec gtag.js) et l'attribut data-credentials
sur include (pour inclure les cookies).
<amp-analytics type="gtag" data-credentials="include">
...
</amp-analytics>
AMP n'autorise pas JavaScript au-delà de ses propres bibliothèques approuvées. Par conséquent, la configuration est effectuée avec JSON. Une propriété gtag_id
avec un <GA_MEASUREMENT_ID>
valide est ajoutée au bloc vars
. Au-dessous, une propriété de configuration avec <GA_MEASUREMENT_ID>: {}
est ajoutée en tant que valeur.
Mesurer des événements
Utilisez triggers
avec des valeurs définies pour mesurer les événements sur les pages AMP. Ces propriétés sont utilisées dans une configuration de déclencheur:
selector
: sélecteur CSS permettant de spécifier un élément cible.on
: spécifie le type d'événement.vars
: spécifiez le type d'événement dansevent_name
et ajoutez des paramètres supplémentaires si nécessaire.
Cet exemple montre comment configurer un événement Google Analytics de base. Créez un déclencheur appelé "button" qui se déclenche lorsqu'un utilisateur clique sur un élément dont la valeur d'ID est "the-button". Ce déclencheur enverra la valeur event_name
login et une valeur method
Google à Google Analytics.
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#the-button", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
Les événements Google Analytics sont une catégorie d'événements propres à Google Analytics. Ils sont couramment utilisés pour créer des rapports sur les campagnes. Ces valeurs peuvent être spécifiées dans le bloc vars avec les paramètres event_category
, event_label
et value
:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#login", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
Pour en savoir plus sur la configuration du déclencheur, consultez la documentation amp-analytics
.
Modifier les paramètres
Pour remplacer les paramètres Google Analytics par défaut ou en ajouter d'autres, ajoutez les valeurs souhaitées dans la section parameter
de votre bloc config
. Cet exemple remplace les valeurs de page vue et d'événement par défaut pour page_title
et page_location
:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "page_title": "Beethoven symphonies", "page_location": "https://www.example.com/beethoven.html" } } } } </script> </amp-analytics>
Associer des domaines
L'outil d'association de domaines permet de mesurer deux sites associés ou plus sur des domaines distincts. Spécifiez les domaines à associer à la propriété "linker": { "domains": [...] }
:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": { "domains": ["example.com", "example2.com"] } } } } } </script> </amp-analytics>
Sur les pages AMP pour lesquelles Google Analytics est configuré, la fonctionnalité permettant d'associer votre domaine canonique à partir du cache AMP est activée par défaut. Pour désactiver l'association du trafic du domaine par Google Analytics, ajoutez "linker": "false"
aux paramètres de configuration:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": "false" } } } } </script> </amp-analytics>
Vitesse du site pour Universal Analytics
Google Analytics est configuré pour collecter automatiquement les données sur la vitesse du site pour une petite partie du trafic. Vous pouvez modifier le taux d'échantillonnage pour collecter plus ou moins de données. Pour définir le taux d'échantillonnage sur 100%, ajoutez le code en surbrillance à votre configuration:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 100 } } } } </script> </amp-analytics>
Pour arrêter de collecter les données sur la vitesse du site, utilisez le code en surbrillance:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 0 } } } } </script> </amp-analytics>
Trafic AMP et non-AMP
Par défaut, le trafic AMP utilise des ID client différents de ceux du trafic Web. Les pages AMP se chargent plus rapidement et présentent des tendances de trafic différentes de celles des pages Web standards. Par conséquent, le trafic généré par les pages AMP peut être différent de celui des pages standards.
L'utilisation d'une propriété distincte pour mesurer le trafic AMP permet de mieux analyser les métriques et d'obtenir une image plus précise de votre trafic. Pour distinguer le trafic AMP et le format standard si vous devez utiliser une seule propriété:
- Utilisez la dimension "Source de données" ou une dimension personnalisée (Universal Analytics).
- Utilisez un paramètre d'événement personnalisé (Google Analytics 4).
Déboguer votre configuration
L'outil de validation AMP permet de déterminer si une page Web ne respecte pas les spécifications AMP HTML. Ajoutez #development=1
à l'URL d'une page pour activer l'outil de validation.
L'extension amp-analytics
fournit des messages d'avertissement et d'erreur pour faciliter le débogage et le dépannage d'une configuration. Ajoutez #log=1
à l'URL d'une page pour afficher les messages d'erreur consignés dans la console de votre navigateur Web.
Exemple complet
Cet exemple présente une page AMP complète avec un seul bouton sur une page. Cette configuration envoie les données standards de page vue et les événements button-click à Google Analytics:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="self.html" />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Load AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Load amp-analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<!-- Configure analytics to use gtag -->
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Make it so.</h1>
<div>
<button type="button" id="the-button">Engage!</button>
</div>
</body>
</html>
Ressources associées
- AMP: projet AMP
- AMP: Qu'est-ce que le format AMP ?
- AMP: amp-analytics
- gtag.js: Utiliser gtag.js avec AMP
- Centre d'aide Universal Analytics: AMP (Accelerated Mobile Pages)
- Centre d'aide Google Analytics 4: AMP (Accelerated Mobile Pages)