Comment configurer des analyses basiques pour vos pages AMP
Les plateformes d'analyse sont généralement intégrées aux sites Web via des extraits de code JavaScript en ligne et des appels de fonction, qui déclenchent des événements qui sont renvoyés au système d'analyse. AMP fournit une syntaxe de configuration JSON flexible pour répliquer ce processus pour plusieurs partenaires d'analyse.
amp-analytics. Pour le contexte: Analytics sur les pages non AMP
Voici un exemple de suivi Google Analytics traditionnel basé sur JavaScript. Nous allons réécrire cela dans le format JSON amp-analytics, mais d'abord, regardons l'approche traditionnelle:
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
(i[r] =
i[r] ||
function () {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(
window,
document,
'script',
'//www.google-analytics.com/analytics.js',
'ga'
);
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
Ce JavaScript est assez simple. Il envoie une notification pour suivre l'événement pageview.
Step 1: ajoutez le script amp-analytics
Pour répliquer cette fonctionnalité dans AMP, nous devons d'abord inclure la bibliothèque de composants amp-analytics dans la section <head> de notre document:
<script
async
custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
></script>
Étape 2: ajoutez le code de configuration
Ensuite, ajoutons le composant amp-analytics à la fin de la section body du document :
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-YYYY-Y"
},
"triggers": {
"default pageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "Name of the Article"
}
}
}
}
</script>
</amp-analytics>
Tout comme pour l'exemple JavaScript en haut de cette page, cet extrait de code amp-analytics enverra une notification à Google Analytics indiquant qu'une page a été consultée.
Pour spécifier cela, nous avons défini le type sur googleanalytics, puis dans le JSON, nous avons créé un déclencheur que nous avons appelé « default pageview ». Ce déclencheur s'activera lorsque la page sera visible (en raison de "on": "visible") et lorsqu'il se déclenchera, nous enverrons une demande d'analyse pageview à Google Analytics avec les valeurs vars que nous avons spécifiées.
Le JSON utilisé pour configurer amp-analytics est un format très flexible pour décrire quelles données d'analyse envoyer et quand les envoyer. amp-analytics contient des détails complets sur le format.
Étape 3: ajoutez plus de déclencheurs
En nous basant sur l'exemple ci-dessus, nous pouvons ajouter un autre déclencheur nommé "click on #header trigger":
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-YYYY-Y"
},
"triggers": {
"default pageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "Name of the Article"
}
},
"click on #header trigger": {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "examples",
"eventAction": "clicked-header"
}
}
}
}
</script>
</amp-analytics>
Comme vous pouvez le deviner d'après le nom de ce nouveau déclencheur, il s'activera lorsque vous cliquez sur l'élément ayant l'ID "header" (spécifié par "on": "click" et "selector": "#header"). Lorsque ce déclencheur est activé, nous envoyons la demande event à notre fournisseur d'analyse, en spécifiant quelques variables à inclure dans la demande.
Si vous disposez d'une plateforme de suivi personnalisée que vous souhaitez intégrer, vous pouvez toujours utiliser amp-analytics et définir vos propres points de terminaison d'URL personnalisés auxquels envoyer des données de suivi. Pour en savoir plus, consultez la documentation de référence du composant amp-analytics.
“UA-YYYY-Y” est un exemple de compte Google Analytics. Il doit être remplacé par le code de suivi Google Analytics de votre propre site Internet si vous utilisez cet exemple sur votre site.
amp-pixel. Si vous avez seulement besoin de suivre les pages vues, amp-pixel est une solution plus légère que amp-analytics car elle vise uniquement à répondre aux exigences du suivi de pixels traditionnel. Pour en savoir plus, consultez Analyses: guide de base.