Portrait Olivier Duffez

Olivier Duffez

Créateur de WebRankInfo,
consultant en référencement

Comment inclure Google Analytics dans une page AMP

Les pages AMP ont pour ambition d'accélérer considérablement le temps de chargement sur mobile. Pour continuer à suivre les performances webmarketing de vos pages, voyez comment inclure du code Google Analytics.

Google Analytics AMP
Les pages AMP permettent la mesure d'audience notamment avec Google Analytics

Optimisation du temps de mesure

D'après AMP Project, il est fréquent qu'une page web contienne plusieurs codes de suivi issus de plusieurs solutions de web analytics (source). Bien entendu, ceci ralentit le chargement de la page et n'est pas efficace.

L'idée du projet AMP pour le support du web analytics est d'avoir une seule mesure, dont les valeurs sont ensuite envoyées à un ou plusieurs outils de mesure d'audience (Google Analytics et les autres).

Le composant AMP-PIXEL

Vous disposez d'un composant intégré au standard AMP permettant le suivi d'une page vue grâce à l'émulation d'un pixel de tracking. Voici un exemple de code utilisant AMP-PIXEL :

<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>

Le pixel envoie une requête GET à l'URL spécifiée (ici https://foo.com/pixel?RANDOM). Comme vous l'avez compris, c'est à vous de fournir dans cette URL les valeurs que vous souhaitez collecter. Par ailleurs, dans l'exemple ci-dessus, "RANDOM" doit être remplacé par une valeur, ce qui donnerait quelque chose comme https://foo.com/pixel?0.1590278471201.

Le composant AMP-ANALYTICS

Le composant <amp-analytics> est plus complexe que <amp-pixel> car il supporte de nombreux types de déclencheurs d'événements pour aider les éditeurs à mieux comprendre leur audience. Voici un exemple de balisage amp-analytics :

<amp-analytics>
<script type="application/json">
{
  "requests : {
    "pageview : "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
    "event : "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
  },
  "vars : {
    "account : "ABC123"
  },
  "triggers : {
    "trackPageview : {
      "on : "visible",
      "request : "pageview"
    },
    "trackAnchorClicks : {
      "on : "click",
      "selector : "a",
      "request : "event",
      "vars : {
        "eventId : "42",
        "eventLabel : "clicked on a link"
      }
    }
  }
}
</script>
</amp-analytics>

Avec ce composant, vous pouvez déclencher des mesures quand certains événements se produisent sur la page, comme par exemple l'affichage de la page ou un clic. Les événements de type "clic" peuvent être personnalisés pour s'appliquer à certains éléments de la page (par leur ID ou leur classe). Je vous invite à consulter la documentation pour obtenir plus d'informations.

Envoi des données

Une fois que vous avez déterminé quelles données doivent être collectées, vous devez spécifier où elles doivent être envoyées. Il peut s'agit d'un serveur distant ou de votre propre serveur. Les solutions telles que Google Analytics fournissent des modèles de configuration pour vous éviter d'avoir tout à coder.

Google Analytics recommande de créer une nouvelle propriété Analytics pour collecter les données liées à vos pages AMP. L'idée est d'éviter de tout casser dans votre propriété actuelle, car le projet AMP n'en est encore qu'à ses débuts. Egalement, il faut comprendre qu'en raison du système de cache inclus dans AMP, un même visiteur peut voir la page AMP et sa version HTML depuis 2 supports différents et être ainsi compté comme 2 visiteurs par Google Analytics. En outre, certaines fonctionnalités ne seront pas encore disponibles avec les pages AMP...

Pour les détails, voyez ici et .

Impact SEO

Si jamais vous souhaitez ajouter AMP sur votre site : lisez le dossier sur l'impact référencement

Pensez-vous intégrer le support de AMP sur votre site ?

Cet article vous a-t-il plu ?

Note : 4.0 (1 vote)
Cliquez pour voter !

Laisser un commentaire

Remarques :

  • Si vous souhaitez poser une question ou détailler un problème technique, il ne faut pas utiliser le formulaire ci-dessous qui est réservé aux avis. Posez votre question directement dans le forum Gmail de WebRankInfo. L'inscription est gratuite et immédiate.

  • En postant un avis, vous acceptez les CGU du site WebRankInfo. Si votre avis ne respecte pas ces règles, il pourra être refusé. Si vous indiquez votre adresse email, vous serez informé dès que votre avis aura été validé (ou refusé...) ; votre adresse ne sera pas utilisée pour vous envoyer des mailings et ne sera pas revendue ou cédée à des tiers.

3 commentaires

fannydoll

Bonjour

oui j'avais vu en effet, j'ai mis également le code "normal" en bas de ma page. Je teste aussi.

Merci pour la réponse.

Répondre
fannydoll

Bonjour

je suis en train d'essayer d'intégrer le code de suivi analytics sur une page AMP, mais du coup, ça veut dire qu'on ne peut pas faire un copié collé normal du code de suivi proposé par Google Analytics ? Analytics n'a pas prévu ou j'ai peut-être raté quelque chose ?

Dans ce cas est-ce que ça voudrait dire qu'il faut utiliser le et intégrer manuellement les données analytics ? Ca serait étonnant que google analytics n'ait pas prévu de code spécifique à intégrer pour les pages AMP, enfin bref, je suis un peu perdue sur ce point...

Merci si tu pouvais m'éclairer un peu sur ce point avant que je n'intègre les infos à la main...

ok, en analysant ta page AMP j'ai vu que tu utilisais tag manager, c'est ce que j'ai fait et là en effet, on peut récupérer le code tout prêt à coller... désolée pour le dérangement pour rien du coup.

Répondre
Olivier Duffez

@fannydoll : non je n'utilise pas que Tag Manager, en ce moment je teste 2 modes. Regarde la balise amp-analytics tout en bas de page.

Répondre