WordPress : Comment ajouter Google Analytics dans vos pages AMP

AMP est une technologie qui permet de créer des pages web qui s'affichent instantanément sur mobile.

WordPress : Comment ajouter Google Analytics dans vos pages AMP

Si vous avez implémenté le plugin officiel de AMP pour WordPress, vous avez probablement découvert que le plugin supprime le code Google Analytics de toutes les pages AMP. Mais, même si le plugin l’exclut, les pages AMP restent toujours valables pour intégrer le code de Google Analytics.

Et si c'était le cas, vous pouvez l'ajouter manuellement.

Pour ce faire, dans un premier temps, assurez-vous que votre plugin AMP WordPress est à jour, car les modifications peuvent être supprimées quand il est mis à jour.

Ensuite, choisissez l'option de navigation “Extensions” dans le tableau de bord WordPress admin, puis sélectionnez “Editeur”.

Dans le menu déroulant en haut de la Sidebar de droite, où c’est marqué “Sélectionner l’extension à modifier”, vous sélectionnez “AMP”, puis vous cliquez sur “Sélectionner”.

Toujours dans la Sidebar de droite disponible pour modifier les pages, vous verrez toutes les pages AMP existantes. Vous faîtes défiler la colonne vers le bas pour trouver le fichier “amp/templates/single.php” et vous cliquez là-dessus.

Votre fichier “amp/templates/single.php” s’affiche alors dans la partie centrale. Vous allez alors tout à la fin de ce fichier et vous ajoutez votre code JavaScript juste après le tag </BODY>.

Et vous cliquez sur le bouton “Mettre à jour le fichier” pour que ce code Google Analytics s’applique à toutes vos pages AMP WordPress.

Mais avant de tester, vérifier que tout est correct via l’outil de test des données structurées de Google.

Maintenant, vous visitez vos pages AMP sur mobile et alors, vous verrez ces pages testées dans votre rapport Google Analytics.

Mais, quels codes Google Analytics AMP ajouter ?


Ces codes Analytics sont ceux que vous devez utiliser pour votre site WordPress ou tout autre type de site.

Pour ajouter les fonctionnalités Analytics pour AMP dans vos pages, vous devez impérativement inclure auparavant le script suivant dans la partie <HEAD> de votre code source, au dessus du premier code d’introduction de l’AMP :
<script async custom-element=”amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Ensuite, vous ajoutez juste après le tag <BODY> l’émément “amp-analytics “.

Surtout, dans les exemples ci-dessous, n’oubliez pas d’insérer l’ID de votre compte Google Analytics.

Voici le bout de code à utiliser pour le suivi des pages AMP (page tracking) :
<amp-analytics type="googleanalytics" id="analytics1">

<script type="application/json">

{
"vars": {
"account": "UA-XXXXX-Y" // Remplacer ID compte Analytics
},
"triggers": {
"trackPageview": { // A remplacer trackPageview avec un code de suivi. Facultatif.
"on": "visible",
"request": "pageview"
}
}
}
</script>>
</amp-analytics>
Ou cet autre code plus complexe mais complet :
<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageviewWithAmpdocUrl": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My page", // Remplacer My Page avec la variable des Titres.

"ampdocUrl": "https://www.examplepetstore.com/pets.html" // Remplacer avec la variable des URLs.
}
}
}
}
</script>
</amp-analytics>

Désormais, vous saurez si vos pages Accelerated Mobile Pages ou AMP sont régulièrement visitées ou pas.