Analytics: principes de base

Commencez ici pour tout savoir sur les bases des analyses AMP.

Utiliser amp-pixel ou amp-analytics ?

AMP fournit deux composants pour répondre à vos besoins d'analyse et de mesure : amp-pixel et amp-analytics. Ces deux options envoient les données d'analyse à un point de terminaison prédéfini.

Si vous recherchez des comportements comme un simple pixel de suivi le composant amp-pixel fournit un suivi de base des vues de page ; les données sur les vues de page sont envoyées à une URL donnée. Certaines intégrations avec un fournisseur peuvent appeler ce composant, auquel cas elles indiqueront le point de terminaison exact de l'URL.

Pour la plupart des solutions d'analyse, utilisez amp-analytics. Le suivi des vues de page fonctionne également avec amp-analytics. Ce composant vous permet aussi de suivre l'engagement des utilisateurs avec n'importe quel type de contenu sur les pages, y compris les clics sur des liens et des boutons. Vous pouvez également mesurer jusqu'où l'utilisateur a fait défiler la page, savoir s'il a interagi ou non avec des réseaux sociaux et bien plus encore.

Voir Analyses AMP: approfondissement.

Dans le cadre de l'intégration avec la plateforme AMP, des fournisseurs ont proposé des configurations amp-analytics prédéfinies, de sorte à faciliter l'enregistrement des données et leur transmission à leurs outils de suivi. Accédez à la documentation des fournisseurs depuis la liste Fournisseurs d'analyses.

Dans vos pages, vous pouvez utiliser à la fois amp-pixel et amp-analytics: amp-pixel pour un simple suivi des vues de page et amp-analytics pour tout le reste. Vous pouvez également ajouter chaque balise plusieurs fois. Si vous travaillez avec plusieurs fournisseurs de solutions d'analyse, vous aurez besoin d'une balise par solution. Rappelez-vous que plus les pages AMP sont simples, mieux c'est pour les utilisateurs. Donc si vous n'avez pas besoin de balises supplémentaires, ne les utilisez pas.

Créer une configuration d'analyse simple

Apprenez à créer une configuration simple amp-pixel et amp-analytics.

Configuration simple de `amp-pixel`

Pour créer une configuration simple de la balise amp-pixel, insérez un code du type suivant dans le corps de votre page AMP:

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

Dans cet exemple, les données sur les vues de page sont envoyées à l'URL définie, accompagnées d'un numéro aléatoire. La variable RANDOM est l'une des nombreuses variables de substitution de la plateforme AMP. En savoir plus sur la substitution des variables ici.

Le composant amp-pixel étant intégré, vous n'avez pas besoin d'une déclaration d'inclusion comme avec les composants étendus d'AMP, notamment amp-analytics. Vous devez néanmoins placer la balise amp-pixel aussi près que possible du début du corps de la page, c'est-à-dire de la balise . En effet, le pixel de suivi ne se déclenche que lorsque la balise est affichée. Si la balise amp-pixel est positionnée près du bas de la page, il pourrait ne pas se déclencher.

Configuration simple de `amp-analytics`

Pour créer une configuration simple de la balise amp-analytics, vous devez d'abord inclure la déclaration custom-element après la balise du document AMP (voir également Déclaration d'inclusion de composant) :

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

L'exemple suivant est similaire à l'exemple de amp-pixel. À chaque fois qu'une page est visible, l'événement est déclenché et envoie les données sur les vues de page à une URL définie, accompagnées d'un identifiant aléatoire:

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://foo.com/pixel?RANDOM"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

Dans l'exemple ci-dessus, nous avons défini une requête appelée pageview sur https://foo.com/pixel?RANDOM. Comme nous l'avons indiqué plus tôt, RANDOM est remplacé par un numéro aléatoire. La requête ressemblera donc à https://foo.com/pixel?0.23479283687235653498734.

Lorsque la page devient visible (tel que spécifié par l'utilisation du mot clé de déclenchement visible), un événement est déclenché et la requête pageview est envoyée. L'attribut triggers détermine à quel moment la requête pageview est déclenchée. En savoir plus sur les requêtes et déclencheurs.

Substitution des variables

Les composants amp-pixel et amp-analytics autorisent toutes les substitutions de variables d'URL standard (voir Substitutions de variables HTML AMP). Dans l'exemple suivant, la demande de vue de page est envoyée à l'URL, avec l'URL canonique du document AMP actuel, son titre et un ID client:

<amp-pixel
  src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"
></amp-pixel>

En raison de sa simplicité, la balise amp-pixel ne peut inclure que des variables définies par la plateforme ou que le runtime AMP peut analyser à partir de la page AMP. Dans l'exemple ci-dessus, la plateforme renseigne les valeurs pour canonicalURL et clientId(site-user-id). La balise amp-analytics peut inclure les mêmes variables que amp-pixel, ainsi que des variables définies de manière unique dans la configuration de la balise.

Utilisez le format ${varName} dans une chaîne de requête pour une page ou une variable définie par la plateforme. La balise amp-analytics remplacera le modèle par sa valeur réelle au moment de la construction de la demande d'analyse (voir également Variables prises en charge dans amp-analytics.

Dans l'exemple suivant sur amp-analytics, la demande de vue de page est envoyée à l'URL, avec des données supplémentaires extraites des substitutions de variables, certaines étant fournies par la plateforme et d'autres définies en de façon intégrée, dans la configuration de amp-analytics:

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}"
      },
      "vars": {
        "account": "ABC123"
      },
      "triggers": {
        "someEvent": {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "title": "My homepage"
          }
        }
      }
    }
  </script>
</amp-analytics>

Dans l'exemple ci-dessus, les variables account et title sont définis dans la configuration amp-analytics. Les variables canonicalUrl et clientId ne sont pas définies dans la configuration, leurs valeurs sont donc remplacées par la plateforme.

IMPORTANT - La substitution des variables est flexible; vous pouvez définir les mêmes variables à différents emplacements, et le runtime AMP analysera les valeurs dans cet ordre de priorité (voir Ordre de substitution des variables ).

Identification des utilisateurs

Les sites Web utilisent des cookies pour stocker des informations spécifiques sur un utilisateur dans le navigateur. Les cookies peuvent être utilisés pour indiquer qu'un utilisateur a déjà visité un site. Dans AMP, les pages peuvent être diffusées à partir du site Web d'un éditeur ou d'un cache (comme Google AMP Cache). Le site Web de l'éditeur et le cache sont susceptibles d'avoir des domaines différents. Pour des raisons de sécurité, les navigateurs peuvent (et vont souvent) limiter l'accès aux cookies d'un autre domaine (voir aussi Suivi des utilisateurs selon les origines).

Par défaut, AMP gère la fourniture d'un ID client, que la page soit accessible depuis le site Web d'origine de l'éditeur ou via un cache. L'ID client généré par AMP a une valeur de "amp-" suivi d'une chaîne aléatoire encodée en base64 et reste le même pour l'utilisateur si ce même utilisateur visite à nouveau.

AMP gère la lecture et l'écriture de l'ID client dans tous les cas. Cela est particulièrement notable dans le cas où une page est diffusée via un cache ou affichée en dehors du contexte de visualisation du site d'origine de l'éditeur. Dans ce cas, l'accès aux cookies du site de l'éditeur n'est pas disponible.

Lorsqu'une page AMP est diffusée à partir du site d'un éditeur, le cadre d'ID client utilisé par AMP peut être informé d'un cookie de secours à rechercher et à utiliser. Dans ce cas, l'argument cid-scope-cookie-fallback-name de la variable clientId est interprété comme un nom de cookie. Le formatage peut apparaître sous la forme CLIENT_ID(cid-scope-cookie-fallback-name) ou ${clientId(cid-scope-cookie-fallback-name)}.

Par exemple:

<amp-pixel
  src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"
></amp-pixel>

Si AMP constate que ce cookie est défini, la substitution d'ID client renverra la valeur du cookie. Si l'AMP trouve que ce cookie n'est pas défini, alors AMP générera une valeur de la forme amp- suivie d'une chaîne aléatoire encodée en base64.

En savoir plus sur la substitution d'ID client, y compris comment ajouter un ID de notification utilisateur facultatif, dans Variables prises en charge dans l'analyse AMP.

En savoir plus: plus de détails sur l'analyse dans AMP Analytics: approfondissement et les cas d'utilisation.