Vous l’avez peut être déjà remarqué mais Google insiste pas mal sur les pages optimisées pour les mobiles, et ce depuis déjà un petit moment. Normal car le trafic mobile est en forte hausse un peu partout sur la planète. Il faut dire que un milliard d’iphones de vendus, ça booste forcément les statistiques, sans compter tous les Androids présents également sur le marché.
Pour cela Google propose un « kit » appelé AMP (accelerated mobile pages) pour , comme son nom ne l’indique pas forcément, accélérer le temps de chargement des pages sur mobile (si vous aviez trouvé Bravo !) .
Bref, sans rentrer dans les détails techniques de AMP, ce n’est pas l’objet ici, on va plus parler de Google Analytics sur ce blog, il est important de mesurer le trafic de ces pages !
En effet par défaut, vos belles pages ne vont pas charger le code Google Analytics, qu’il soit chargé via Google Tag Manager ou via Universal n’y change rien. Du coup, pas de données, c’est dommage… C’est par exemple vrai avec WordPress, si vous utilisez le plugin « officiel » AMP sur votre blog, pas de tracking Analytics sur les pages AMP par défaut.Evidemment, une solution élégante est disponible et elle n’est même pas très compliquée pour tracker « juste » les pages vues. Pour les events sur les pages AMP il vous faudra maîtriser les déclencheurs (rien à voir avec les triggers de GTM)
Installer le tracker Google Analytics AMP
Tout d’abord il va falloir charger le script de tracking de Google Analytics , il est disponible dans l’aide à cette adresse : https://developers.google.com/analytics/devguides/collection/amp-analytics/ :
<script async custom-element="amp-analytics"src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Ce code est à placer entre les balises <head> et </head> de votre page html. Sur wordpress c’est la page /wp-content/plugins/amp/templates/single.php qu’il faut modifier. Attention, si vous avez plusieurs templates ou gabarits pour les pages AMP il faut bien sûr ajouter le code de tracking sur tous les templates ! Sinon, aucune chance de tracker toutes vos pages AMP dans Google Analytics. Voila, avec ça le script est accessible, il ne reste plus qu’a l’appeler à chaque fois que c’est nécessaire, c’est ce que nous allons voir dans le paragraphe suivant.
Configurer l’appel Google Analytics AMP des pages vues
Il va, dans un premier temps, falloir configurer l’appel à la page vue, classiquement à chaque fois que la page se charge. Petite précision utile, à chaque fois que vous voulez faire un appel à Google Analytics sur AMP il faut utiliser cet encapsulage :
<amp-analytics type="googleanalytics">\r\n ...</amp-analytics>
Pour une page vue cela donne donc :
<amp-analytics type="googleanalytics">\r\n<script type="application/json">"vars": {"account": "UA-XXXXX-Y"},"triggers": {"trackPageview": {"on": "visible","request": "pageview"}}</script></amp-analytics>
Il faut remplacer évidement le « UA-XXXXX-Y » par votre propre ID Google Analytics. Si vous ne savez pas quel est votre ID Analytics, on fera un tuto sur le sujet d’ici quelques temps mais ce n’est pas le sujet de cet article.
Le nombre de paramètres que l’on peut modifier dans cet appel limité. Par défaut c’est le titre et l’url « actifs » qui vont être utilisé mais vous pouvez insérer d’autres valeurs si besoin en utilisant le code suivant :
<amp-analytics type="googleanalytics">script type="application/json">"vars": {"account": "UA-XXXXX-Y" },"triggers":{"trackPageviewWithAmpdocUrl": {"on": "visible","request": "pageview","vars": {"title": "My page","ampdocUrl": "https://www.cosultant-analytics.com/amp-analytics.html"}}}}</script></amp-analytics>
On voit bien l’ajout de vars: {} avec le title et le ampdocurl . Title sert pour le titre de la page et ampdocurl pour … l’url de la page, bravo. Pensez à changer l’UA par le votre aussi dans cet exemple.
Configurer l’appel AMP Google Analytics des pages events
Pour les events, la configuration n’est pas plus compliquée mais évidement il va falloir les envoyer au bon moment. Pas de « onclick » ou de trigger GTM ici, il va falloir choisir l’élément déclencheur directement dans le code ci dessous.
<amp-analytics type="googleanalytics"><script type="application/json">{"vars": {"account": "UA-XXXXX-Y"},"triggers": {"trackClickOnHeader" : {"on": "click","selector": "#header","request": "event","vars": {"eventCategory": "ui-components","eventAction": "header-click"}}}</script></amp-analytics>Quelques explications. Dans cet exemple, un événement contenant les valeurs :
-
- « Catégorie : ui-components »
-
- « Action : header-click »
Va se déclencher lors d’un clic dans le header (« on »: « click », « selector »: « #header », ) il suffit de jouer avec ces paramètres pour déclencher votre event comme bon vous semble. Comme d’habitude avec Google Analytics, vos événements peuvent comporter 4 champs (dans « vars » ) :
-
- eventCategory (obligatoire)
-
- eventAction (obligatoire)
-
- eventLabel (facultatif)
-
- eventValue (facultatif)
Configurer l’appel AMP Analytics « social »
Pour les appels sociaux ( partager un article via tweeter ou facebook) , cela ressemble beaucoup aux events :
<amp-analytics type="googleanalytics"><script type="application/json">{"vars": {"account": "UA-XXXXX-Y"},"triggers": {"trackClickOnTwitterLink" : {"on": "click","selector": "#tweet-link","request": "social","vars": {"socialNetwork": "twitter","socialAction": "tweet","socialTarget": "https://www.examplepetstore.com"}}}}</script></amp-analytics>
Il faut évidement configurer le déclencheur en fonction de vos besoins (le déclencheur ici est « on »: « click », « selector »: « #tweet-link », « request »: « social », ) et les informations envoyées par AMP à Google Analytics :
-
- socialNetwork (obligatoire)
-
- socialAction (obligatoire)
-
- socialTarget (obligatoire)
Sauf que ici les trois attributs sont obligatoires.
Comment recetter son marquage AMP Google Analytics ?
Pour recetter vos tags Google Analytics AMP point de plugin à ma connaissance, il va falloir tester « en dur » à l’ancienne. Heureusement, il y a Google Analytics temps réel.
-
- Ouvrez votre page AMP (sur wordpress c’est souvent mapage.com/titre/amp ) dans votre navigateur
-
- Ouvrez Google Analytics temps réel dans un autre onglet
-
- Accéder au rapport du contenu
-
- Vous devriez voir votre page avec l’url /amp/
Si ce n’est pas le cas, rechargez votre page et attendez quelques secondes. De plus, si rien n’apparaît alors il faut débugger vos lignes de codes. Vous pouvez faire de même pour les event et le social. Pensez à créer une vue filtrée juste sur les /amp pour pouvoir analyser plus finement votre trafic dans le futur et pensez à créer une alerte Google Analytics qui vous préviendra si aucun trafic n’est enregistré sur une url finissant par /amp/ . Ça aide toujours 😉
This content has been helpful to you?
Thanks for contributing!