Le projet Accelerated Mobile Pages (AMP) est un projet Web Open Source plate-forme qui permet d'améliorer les performances de votre contenu Web. Le format AMP inclut la balise Google et Google Tag Manager sont compatibles. Ce guide décrit comment configurer Google Analytics pour les pages AMP.
Installation
La balise Google vous permet d'installer Google Analytics, Google Ads et d'autres Produits Google sur les pages AMP. Google Tag Manager configure un conteneur AMP vous permet de créer des configurations avancées et de déployer des dans l'interface Tag Manager.
Sélectionnez la plate-forme de votre choix à l'aide des boutons suivants:
Balise Google
L'implémentation AMP de gtag.js utilise le framework amp-analytics
pour :
vous permettent d'instrumenter les analyses sur votre site Web AMP. Les données peuvent être
envoyés depuis des pages AMP vers Google Ads, Google Analytics et d'autres produits Google
à partir de la même implémentation gtag.js.
Installation
Pour configurer gtag.js sur une page AMP, commencez par vérifier que vous avez
inclus le composant amp-analytics
dans la balise <head>
de la page:
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
Ensuite, ajoutez la balise Google à votre page AMP en tant que composant JSON dans le
Balise <body>
sur la page. Remplacez <TARGET_ID>
par le
ID de balise des produits (par exemple, Google Ads ou Google Analytics) que vous souhaitez cibler
pour envoyer des données:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
Pour configurer plusieurs produits dans la balise Google, vous n'avez pas besoin d'installer
l'intégralité du tag de ce produit. Il vous suffit d'ajouter l'ID de destination à une
une commande config
distincte.
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TAG_ID>",
"config" : {
"<TAG_ID>": { "groups": "default" },
<!-- Additional IDs -->
}
}
}
</script>
</amp-analytics>
Pour en savoir plus, reportez-vous à la documentation amp-analytics
.
Déclencheurs d'événements
Pour envoyer des données spécifiques à vos produits, configurez des déclencheurs en fonction d'événements
comme les clics. Les déclencheurs pour gtag.js sur AMP suivent les mêmes formats JSON que
d'autres configurations de déclencheurs amp-analytics
.
Cet exemple montre comment envoyer un événement click
à Google Analytics. La
La valeur selector
est un sélecteur CSS qui vous permet de spécifier l'élément
ciblées. La valeur on
spécifie le type d'événement. Ici, il s'agit d'une
click
. Dans la section vars
, spécifiez le type d'événement
event_name
et ajoutez des paramètres si nécessaire.
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
En plus des événements recommandés, vous pouvez spécifier vos propres événements personnalisés.
Domaines du lien
Le linker de domaines permet à deux sites connexes ou plus situés sur des domaines distincts d'être
mesuré en tant que 1. Pour spécifier les domaines à associer, utilisez
"linker": { "domains": [...] }
:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": {
"groups": "default",
"linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
}
}
}
}
</script>
</amp-analytics>
La possibilité de créer un lien vers votre domaine canonique à partir du cache AMP est activée
par défaut. Pour désactiver la possibilité d'associer le trafic des domaines, ajoutez "linker":
"false"
aux paramètres config
:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": {
"groups": "default",
"linker": "false"
}
}
}
}
</script>
</amp-analytics>
Exemple complet
Cet exemple de code illustre une démonstration complète et fonctionnelle d'une page AMP
crée une seule page AMP et envoie un événement button-click
à Google
Analytics lorsque l'utilisateur clique sur le bouton. Remplacez <TAG_ID>
par une valeur valide
ID de la balise:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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": "<TAG_ID>",
"config": {
"<TAG_ID>": {}
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Welcome to the mobile web</h1>
<div>
<button type="button" id="the-button">Example: Log in with Google</button>
</div>
</body>
</html>
Dépannage
Validez la configuration de vos balises via l'adresse amptagtest.appspot.com. Vous pouvez également
vérifiez que la valeur cid
est cohérente d'un domaine à l'autre en exécutant la commande
suivantes:
- Veillez à effacer les cookies ou à utiliser le mode navigation privée.
- Si
cid
n'est pas trouvé dans un cookie Google Analytics, il peut aussi être observée dans l'onglet "Réseau" de votre navigateur. Recherchercollect request
, et la charge utile doit contenir une valeurcid
. Une fois que vous êtes passé du CDN Google au site Web client, le
cid
et la valeurgclid
doivent être transmis via la décoration d'URL:**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
La page de destination finale doit toujours avoir la même valeur
cid
que dans l'attribut page de destination initiale.Soyez prudent avec les redirections et les changements de domaine entre la page canonique et standards.