Webdust

Traquer les pages AMP avec Google Analytics

Maintenant que vous avez mis en place les pages AMP sur votre site, vous avez certainement envie de mesurer leur efficacité : est-ce que ces pages génèrent des visites ou pas ?

On sait que le projet AMP vise à nettoyer les pages web de tout le superflu, et notamment des éléments Javascript… Fort heureusement, il existe un composant, baptisé AMP-Analytics, et disponible gratuitement au sein du site du projet AMP. Pour l’implémenter sur vos pages AMP, il suffit de suivre le tutoriel fourni sur Google Developers.

En quoi consiste AMP Analytics ?

Le principe en est assez simple :

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
....
</script>
</amp-analytics>

Comme on peut le voir, il faut utiliser une balise spéciale, appelée <amp-analytics>, et lui donner le type googleanalytics (pour le moment c’est le seul outil de tracking qui est supporté, mais d’autres outils de mesure d’audience devraient être pris en compte)

Que peut-on mettre à l’intérieur du script ? Et bien, il faut tout d’abord indiquer l’ID de votre compte Analytics (de la forme UA-XXXX-Y), puis indiquer les actions de suivi, qui peuvent être le suivi de page (nombre de vues par page), le suivi des interactions (clics sur la page) et le suivi des interactions sociales (utilisation des boutons de partage).

Personnellement je me suis limité aux consultations des pages, et au script suivant :

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
 "vars": {
 "account": "UA-XXXXX-Y" 
 },
 "triggers": {
 "trackPageview": { 
 "on": "visible",
 "request": "pageview"
 }
 }
}
</script>
</amp-analytics>

Comment implémenter AMP Analytics dans le plugin AMP WordPress ?

La solution que j’ai mise en œuvre est donnée à titre temporaire, car le plugin AMP est encore en cours d’évolution.

J’ai tout simplement édité le template single.php qui se trouve dans le répertoire amp > templates et ajouté les informations nécessaires.

Le code PHP contient donc désormais :

<!doctype html>
<html amp>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
 <link href="https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Open+Sans:400,700,400italic,700italic" rel="stylesheet" type="text/css">
 <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<?php do_action( 'amp_post_template_head', $this ); ?>
 <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
 <?php $this->load_parts( array( 'style' ) ); ?>
</head>
<body>
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
 "vars": {
 "account": "UA-XXXX-X" 
 },
 "triggers": {
 "trackPageview": { 
 "on": "visible",
 "request": "pageview"
 }
 }
}
</script>
</amp-analytics>
....
....

Comme on le voit, les manipulations sont assez simples, et cela permet de traquer les pages AMP comme s’il s’agissait de pages ordinaires. La question est maintenant de savoir si ces pages obtiennent réellement des visites (pour cela il faudrait que Google les affiche dans ses résultats de recherche mobile !)

 

Commentez cet article avec Google+