Ajouter Analytics aux pages AMP

La plate-forme Accelerated Mobile Pages (AMP) permet de créer des pages Web pour du contenu statique qui s'affiche rapidement. Les pages AMP comprennent un élément <amp-analytics> qui permet de mesurer les interactions des utilisateurs et sont compatibles avec Google Analytics.

Configuration de base pour mesurer les pages vues

Pour créer une installation de base de Google Analytics sur une page AMP, copiez cet extrait de code et remplacez <GA_MEASUREMENT_ID> par l'ID de votre balise Google. Trouvez l'ID de votre balise Google.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Envoyer des données vers plusieurs destinations

Vous pouvez envoyer des données vers plusieurs destinations avec la même balise <amp-analytics>. Il vous suffit d'ajouter le nouvel ID de mesure <GA_MEASUREMENT_ID_NEW> à la commande config.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Fonctionnement

L'élément <amp-analytics> est un composant AMP étendu et est explicitement activé en tant que custom-element dans un tag de script.

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

Le bloc d'éléments <amp-analytics> est configuré pour permettre la compatibilité avec les produits de mesure Google. Définissez l'attribut type pour <amp-analytics> sur gtag (pour activer la compatibilité avec gtag.js) et l'attribut data-credentials sur include (pour activer les cookies).

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

Comme AMP n'autorise pas de code JavaScript au-delà de ses propres bibliothèques approuvées, la configuration est effectuée avec JSON. Une propriété gtag_id avec un <GA_MEASUREMENT_ID> valide est ajoutée au bloc vars et, en dessous, une propriété de configuration avec <GA_MEASUREMENT_ID>: {} est ajoutée comme valeur.

Mesurer des événements

Utilisez triggers avec des valeurs définies pour mesurer les événements sur les pages AMP. Les propriétés suivantes sont utilisées dans la configuration d'un déclencheur:

  • selector: sélecteur CSS permettant de spécifier un élément cible.
  • on: spécifie le type d'événement.
  • vars: spécifiez le type d'événement dans event_name et ajoutez des paramètres supplémentaires si nécessaire.

Cet exemple montre comment configurer un événement Google Analytics de base. Créez un déclencheur appelé "button" (bouton) qui s'active lorsqu'un utilisateur clique sur un élément dont la valeur d'ID est the-button. Ce déclencheur envoie à Google Analytics la valeur login pour event_name et la valeur Google pour method:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Les événements Google Analytics correspondent à une catégorie d'événements propres à Google Analytics. Ils sont communément utilisés pour créer des rapports sur les campagnes. Ces valeurs peuvent être spécifiées dans le bloc "vars" avec les paramètres event_category, event_label et value:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Pour en savoir plus sur la configuration des déclencheurs, consultez la documentation amp-analytics.

Modifier les paramètres

Pour remplacer les paramètres Google Analytics par défaut ou en ajouter d'autres, ajoutez les valeurs souhaitées à la section parameter de votre bloc config. Cet exemple remplace les valeurs par défaut des pages vues et des événements pour page_title et page_location:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

Le linker de domaines permet de mesurer au moins deux sites associés sur des domaines distincts comme un seul. Spécifiez les domaines qui doivent être associés à la propriété "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

Dans les pages AMP sur lesquelles Google Analytics est configuré, la possibilité de créer un lien vers votre domaine canonique depuis AMP Cache est activée par défaut. Pour empêcher Google Analytics d'associer le trafic des domaines, ajoutez "linker": "false" aux paramètres de configuration:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Vitesse du site pour Universal Analytics

Google Analytics est configuré de façon à collecter automatiquement les données sur la vitesse du site pour une petite partie de votre trafic. Vous pouvez modifier le taux d'échantillonnage pour collecter plus ou moins de données. Pour définir le taux d'échantillonnage sur 100%, ajoutez le code en surbrillance à votre configuration:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</amp-analytics>

Pour arrêter de collecter des données sur la vitesse du site, utilisez le code en surbrillance:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

Trafic AMP et non AMP

Par défaut, le trafic AMP utilise des ID client différents de ceux du trafic Web. Les pages AMP se chargent plus vite et présentent des tendances de trafic différentes de celles des pages Web standards. Cela signifie souvent que vous obtiendrez des métriques différentes entre le trafic AMP et le trafic non AMP.

L'utilisation d'une propriété distincte pour mesurer le trafic AMP permet une meilleure analyse des métriques et un aperçu plus précis de votre trafic. Pour faire la distinction entre le trafic AMP et non-AMP si vous avez besoin d'utiliser une seule propriété, procédez comme suit:

  • Utilisez la dimension "Source de données" ou une dimension personnalisée (Universal Analytics).
  • Utiliser un paramètre d'événement personnalisé (Google Analytics 4)

Déboguer votre configuration

L'outil de validation AMP permet de déterminer si une page Web ne respecte pas la spécification AMP HTML. Ajoutez #development=1 à l'URL d'une page pour activer le programme de validation.

L'extension amp-analytics fournit des messages d'avertissement et d'erreur pour aider à déboguer et à résoudre une configuration. Ajoutez #log=1 à l'URL d'une page pour afficher les messages d'erreur enregistrés dans la console de votre navigateur Web.

Exemple complet

Cet exemple présente une page AMP complète avec un seul bouton sur une page. Cette configuration envoie à Google Analytics les données standards concernant les pages vues et les événements "button-click" :

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>