Cette page a été traduite par l'API Cloud Translation.

Ajouter Analytics aux pages AMP

Les pages AMP (Accelerated Mobile Pages) permettent 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 compatible avec Google Analytics.

Configuration de base pour mesurer les pages vues

Pour créer une installation standard de Google Analytics sur une page AMP, copiez cet extrait de code et remplacez <GA_MEASUREMENT_ID> par l'ID de propriété que vous souhaitez utiliser. (Trouver votre ID Google Analytics.)

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

Comment ça marche ?

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 être compatible avec les produits de mesure Google. Définissez l'attribut type pour <amp-analytics> sur gtag (pour activer la compatibilité gtag.js) et l'attribut data-credentials pour include (pour activer les cookies).

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

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

Mesurer des événements

Pour mesurer les événements dans les pages AMP, utilisez triggers avec des valeurs définies. 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éclenchera lorsqu'un utilisateur clique sur un élément dont la valeur d'ID est the-button. Ce déclencheur enverra une 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 généralement 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 sur amp-analytics.

Modifier les paramètres

Pour remplacer les paramètres Google Analytics par défaut ou ajouter de nouveaux paramètres, ajoutez les valeurs souhaitées à 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>

Associer des domaines

La fonctionnalité d'association de domaines permet de mesurer au moins deux sites connexes 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 sur lesquelles Google Analytics est configuré, la fonctionnalité permettant d'associer votre domaine canonique à partir du cache AMP est activée par défaut. Pour empêcher Google Analytics d'associer le trafic du domaine, 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

Google Analytics est configuré pour collecter automatiquement les données de vitesse d'une petite partie du trafic sur votre site. 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 à la 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 affichent des modèles de trafic différents de ceux de leurs équivalents standards, ce qui peut entraîner des écarts entre le trafic AMP et le trafic standard.

L'utilisation d'une propriété distincte pour mesurer le trafic AMP permet de mieux analyser les métriques et d'obtenir une vue plus précise de votre trafic. Si vous avez besoin de mesurer le trafic AMP et non AMP à l'aide d'une seule propriété, utilisez la dimension "Source de données" ou une dimension personnalisée pour les distinguer.

Par défaut, Google Analytics enverra la valeur AMP via la dimension "Source de données". Cette valeur permet de segmenter, de filtrer ou d'analyser le contenu AMP et non AMP dans une même vue.

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'erreur et d'avertissement 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 des données standards sur les pages vues 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>

Ressources associées

AMP: projet AMP
AMP: En quoi consiste le format AMP ?
AMP: amp-analytics
gtag.js : Utiliser gtag.js avec AMP
Centre d'aide Google Analytics: Pages AMP (Accelerated Mobile Pages)