Ajouter Analytics aux pages AMP

La technologie AMP (Accelerated Mobile Pages) permet de créer des pages Web dont le contenu statique s'affiche rapidement. AMP inclut un élément <amp-analytics> qui permet de mesurer les interactions des utilisateurs, et il est intégré dans 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 votre ID de balise Google. Trouver votre ID de 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> à votre 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. Il 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 activer la prise en charge des 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 inclure les cookies).

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

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

Mesurer des événements

Utilisez triggers avec des valeurs définies pour mesurer les événements sur les pages AMP. Ces propriétés sont utilisées dans une configuration de 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" qui se déclenche lorsqu'un utilisateur clique sur un élément dont la valeur d'ID est "the-button". Ce déclencheur enverra la valeur event_name login et une valeur method Google à Google Analytics.

<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 sont une catégorie d'événements propres à Google Analytics. Ils sont couramment 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 du déclencheur, 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 dans la section parameter de votre bloc config. Cet exemple remplace les valeurs de page vue et d'événement par défaut 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>

L'outil d'association de domaines permet de mesurer deux sites associés ou plus sur des domaines distincts. Spécifiez les domaines à associer à 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>

Sur les pages AMP pour lesquelles Google Analytics est configuré, la fonctionnalité permettant d'associer votre domaine canonique à partir du cache AMP est activée par défaut. Pour désactiver l'association du trafic du domaine par Google Analytics, 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é pour collecter automatiquement les données sur la vitesse du site pour une petite partie du 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 les 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 rapidement et présentent des tendances de trafic différentes de celles des pages Web standards. Par conséquent, le trafic généré par les pages AMP peut être différent de celui des pages standards.

L'utilisation d'une propriété distincte pour mesurer le trafic AMP permet de mieux analyser les métriques et d'obtenir une image plus précise de votre trafic. Pour distinguer le trafic AMP et le format standard si vous devez utiliser une seule propriété:

  • Utilisez la dimension "Source de données" ou une dimension personnalisée (Universal Analytics).
  • Utilisez 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 les spécifications AMP HTML. Ajoutez #development=1 à l'URL d'une page pour activer l'outil de validation.

L'extension amp-analytics fournit des messages d'avertissement et d'erreur pour faciliter le débogage et le dépannage d'une configuration. Ajoutez #log=1 à l'URL d'une page pour afficher les messages d'erreur consigné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 les données standards de page vue et les événements button-click à Google Analytics:

<!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>