Je vous partage cette problématique que j’ai résolu ce weekend sur l’un de mes blogs personnels hébergé chez OVH avec le CMS WordPress : comment mesurer le trafic sur les pages AMP et continuer à y afficher des publicités Google Adsense (il faut bien se rémunérer un peu pour couvrir les frais de fonctionnement : nom de domaine et hébergement).
Tout d’abord, pourquoi publier son blog avec des pages optimisées en AMP ? Tout simplement pour améliorer l’expérience de lecture sur mobile et également son ranking dans les SERP de Google. Les pages sont comme « mises en cache » par google afin d’être affichées sur mobile en moins d’une seconde. Sur le papier, c’est top. La réalité c’est que pour y parvenir, la technologie AMP « nettoie » tout le code et contenu superflu.
Page web responsive affichée dans le navigateur :
La même page optimisée avec la techno AMP : plus grand chose à voir… C’est moche mais hyper rapide à afficher
J’ai donc mis en place cette technologie AMP sur un de mes blogs en Septembre 2017 via le plugin officiel AMP pour WordPress, histoire de tester et de tenter de récupérer du trafic en chute libre sur mobile. Petit à petit, j’ai vu que les pages étaient indexées par Google dans la search console et tout allait bien dans le meilleur des mondes :
Mais j’ai commencé à m’inquiéter sérieusement ce week end en regardant mes revenus adsence ainsi que mon trafic sur Google Analytics, tous les 2 en chute libre. On m’aurait menti ?
Un élément m’a mis la puce à l’oreille : c’est le rapport Pages de destination dans le rapport search console (Acquisition > Search console > landing pages). Etrangement, je vois apparaître en top landing page toutes mes pages AMP. Normal étant donné que Google les plébiscite :
Ma première réaction à chaud a été de supprimer le plugin AMP wordpress afin de retrouver mon trafic et mes revenus comme avant car finalement, je suis plus perdant que gagnant. Mais après quelques secondes de réflexion, je me suis dit que mes pages AMP n’étaient tout simplement plus trackées par le code JS Google Analytics standard. Bingo !
Je me mets à la recherche de tutoriels sur la toile et je trouve très facilement l’astuce pour continuer à mesurer le trafic sur mes pages AMP. Fastoche ! Google est ton ami avec la recherche « Google Analytics pages AMP » et on tombe sur cette URL : https://developers.google.com/analytics/devguides/collection/amp-analytics/
Donc un peu de code à ajouter mais encore faut-il trouver où le placer : « avant la librairy JS AMP ». Oup… Il faut avant tout placer l’appel au script asynchrone de GA spécial AMP :
<script async custom-element= »amp-analytics » src= »https://cdn.ampproject.org/v0/amp-analytics-0.1.js »></script>
Pour Adsense, c’est à peu près la même chose :
<script async custom-element= »amp-ad » src= »https://cdn.ampproject.org/v0/amp-ad-0.1.js »></script>
Puis le code GA à proprement dit en prenant soin de changer l’ID UA-XXXXX du compte par le sien :
<amp-analytics type= »googleanalytics »>
<script type= »application/json »>
{
« vars »: {
« account »: « UA-XXXXX-Y »
},
« triggers »: {
« trackPageview »: {
« on »: « visible »,
« request »: « pageview »
}
}
}
</script>
</amp-analytics>
Pour adsence, le code AMP est du genre :
<amp-ad width= »350″ height= »100″ type= »adsense » data-ad-client= »ca-pub-xxxxx » data-ad-slot= »xxxxx »></amp-ad>
Mais où placer tout cela ? Me voilà bien avancé. Finalement, après d’autres recherches, j’oriente mes investigations vers l’éditeur du plugin AMP dans WordPress :
Il suffit ensuite de sélectionner le plugin AMP dans la liste déroulante :
Puis de sélectionner la page « single.php » dans la liste des templates :
Et d’ajouter les lignes suivantes pour charger le script AMP Google Analytics et on en profite aussi pour ajouter celui d’Adsense avant la balise </head>:
Puis le code de tracking des pages à proprement dit (code qui envoie juste le page view) dans le <body> après le </head> : on peut aller plus loin et envoyer des events par exemple
Pour le petit code Adsense, vous pouvez décider de le placer où bon vous semble.
Attention simplement de créer une annonce responsive dans Adsense à taille automatique :
Voilà, c’est terminé ! Reste à valider la page sur le site AMP validator et le tour est joué. La méthode n’est pas parfaite car si le plugin est mis à jour, tous ces réglages seront à refaire. Mais en attendant, je vois le trafic revenir sur mes pages AMP et quelques petits euros tomber dans la tirelire pour financer ce blog également 🙂
A vous de jouer ! J’espère que ce petit tuto pourra vous aider à aller plus vite que moi ce WE.
0 commentaire Laisser un commentaire