AMP - Accelerated Mobile Pages - Google AnalyticsVous avez décidé de franchir le pas et adapter votre site pour le format AMP (Accelerated Mobile Pages)? C’est une démarche contraignante mais payante car vos contenus adaptés au mobile seront plus facilement accessibles pour l’internaute, tant en terme de référencement que d’expérience utilisateur.

Pour autant, vous devrez adapter pas mal de choses en plus du design pour vous mettre en conformité avec ce format qui ne gère pas JavaScript en standard et donc ne gère pas de nombreux outils de tracking et marketing digital – dont Google Analytics.

Dans ce billet nous allons examiner comment mettre ce tracking en place avec Google Analytics et avec Google Tag manager.

Mettre en place le suivi de AMP pour Google Analytics

Si vous n’avez pas foncièrement besoin d’une propriété ou d’une vue Google Analytics dédiée à la mesure de vos pages AMP, vous allez devoir changer votre code de suivi d’une manière qui n’utilise pas JavaScript directement.

Dans votre balise HEAD, vous allez devoir insérer l’élément suivant:

<!-- AMP Analytics -->
    <script 
      async
      custom-element="amp-analytics"
      src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Puis dans en tête de la balise BODY, vous devrez insérer l’appel qui correspond à votre type de requête Google Analytics (page vue, événement, etc.), de la manière qui suit:

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

Dans l’exemple ci-dessus, qui devrait couvrir 90% de vos besoins, on ne parle que de traquer une page vue sur la propriété UA-XXXXX-Y (vous devrez remplacer avec votre identifiant) dès que la page est visible.

On modifiera l’élément triggers en lui ajoutant des variables pour lui permettre par exemple de définir des dimensions/métriques personnalisées ou d’autres valeurs telles que les URLs virtuelles de pages.

Je vous laisse vous référer à la documentation Google Analytics pour AMP qui vous permettra de balayer tous les cas de figure. Attention quand même à plusieurs points bloquants (pour l’instant):

Mettre en place le suivi de AMP avec Google Tag Manager

Utiliser Google Tag Manager (GTM) vous permettra de gérer plusieurs tags de façon plus souple, même si certaines limitations subsistent.

Pour GTM vous allez devoir créer un nouveau container d’un nouveau type. Lors de la création d’un container, GTM vous proposait jusqu’alors 3 types de containers: Web, Android et iOS. Un 4ème type est apparu: AMP.

Google Tag Manager container AMP Accelerated Mobile Pages

Evidemment pour notre projet, il nous faut choisir ce 4ème type de container et l’insérer de la façon suivante.

Dans la balise HEAD, pas de surprise : on reprend le même code que pour Google Analytics:

<!-- AMP Analytics -->
    <script 
      async
      custom-element="amp-analytics"
      src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Puis en tête de balise BODY, insérer:

<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

Evidemment vous aurez pris soin de remplacer dans le bloc ci-dessus le GTM-XXXXX par votre identifiant de container GTM.

Ensuite vous pouvez configurer et publier votre container comme (presque) bon vous semble.

Que vous ayez choisi l’approche Google Analytics « en dur » ou via GTM, vos données arrivent maintenant dans votre compte. Comment y voir plus clair?

Voir ses rapports AMP

Vous avez plusieurs façons de classifier vos pages AMP dans Google Analytics.

Soit vous avez structuré vos URLs AMP pour que vos URLs commencent par /amp auquel cas vous verrez rapidement dans votre rapport Comportement > Contenu du site > Détail par URL l’impact du dossier /amp.

Soit vous avez adopté une dimension personnalisée dédié au type de page (AMP ou « normale ») et vous devrez créer un rapport personnalisé avec comme dimension le type de page et comme métrique les pages vues par exemple. Ceci implique que vous ayez mis en place la dimension personnalisée dans votre code Analytics pour AMP ou via GTM.

Je vous propose une 3ème solution qui passe par l’utilisation d’un groupe de contenu basé sur l’URL de nos pages AMP.

Dans l’administration de la vue Google Analytics, on va dans la gestion de groupes de contenu:

 

Groupe de contenu Google Analytics pour pages AMP

On crée un nouveau groupe AMP qui contiendra 2 réglages: Non AMP et AMP.

On commence par le 1er réglage pour les pages Non AMP:

Création de groupe de contenu Google Analytics pour AMP

Pour le 2ème réglage (pages AMP) on crée le même réglage que le précédent en changeant « ne contient pas » par « contient » et le tour est joué! Comme cette méthode ne requiert pas de marquage, les groupes de contenu sont automatiquement renseignés par Google Analytics à chaque page vue enregistrée.

On obtient donc par cette méthode des rapports segmentables par valeur de groupe de contenu. Il nous suffit maintenant de retourner dans Comportement > Contenu du site > Toutes les pages et d’activer au-dessus du tableau de données l’option Regroupement de contenu. Choisissez votre groupe AMP et vous verrez s’afficher 2 entrées: AMP et Non AMP avec une vue claire de la performance de chaque type de page.

google analytics comparatif amp ou pas amp

Avec ces deux entrées dans le groupe de contenu, on peut cliquer les cases à gauche en tête de ligne et cliquer Tracer les lignes pour voir la performance des pages AMP par rapport au pages non-AMP.

BONUS: vous pouvez appliquer cette méthode au rapport Pages de destination pour voir si vous faites rentrer davantage de visiteurs sur votre site via des pages AMP en appliquant un segment portant sur le trafic de recherche naturelle.

Voilà, cette méthode simple vous permet d’y voir plus clair sur votre traffic lié au format AMP et son impact sur votre performance et votre conversion. Comme d’habitude, n’hésitez pas à me laisser des commentaires.

Bonne analyse!