Configurer la balise pour AMP

Le projet Accelerated Mobile Pages (AMP) est une plate-forme Web Open Source qui vous aide à améliorer les performances de votre contenu Web. Ce format est compatible avec la balise Google et Google Tag Manager. Ce guide explique comment configurer Google Analytics pour les pages AMP.

Installation

La balise Google vous permet d'installer Google Analytics, Google Ads et d'autres produits Google sur les pages AMP. Google Tag Manager configure un conteneur AMP et vous permet de créer des configurations avancées et de déployer des balises tierces à partir de l'interface Tag Manager.

Sélectionnez votre plate-forme préférée à l'aide des boutons suivants:

Balise Google

L'implémentation AMP de gtag.js utilise le framework amp-analytics pour vous permettre d'instrumenter les analyses sur votre site Web AMP. À partir de pages AMP, les données peuvent être envoyées à Google Ads, à Google Analytics et à d'autres produits Google via la même intégration gtag.js.

Installation

Pour configurer la balise Google (gtag.js) sur une page AMP, assurez-vous d'abord d'avoir inclus le composant amp-analytics dans la balise <head> de la page:

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

Ensuite, ajoutez la balise Google à votre page AMP en tant que composant JSON dans la balise <body> de la page. Remplacez <TARGET_ID> par l'ID de tag des produits (par exemple, Google Ads ou Google Analytics) auxquels vous souhaitez envoyer des données:

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

Pour configurer plusieurs produits dans la balise Google, vous n'avez pas besoin d'installer l'intégralité de la balise à partir de ce produit. Il vous suffit d'ajouter l'ID de destination à une commande config distincte.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

Pour en savoir plus, consultez la documentation sur amp-analytics.

Déclencheurs d'événements

Pour envoyer des données spécifiques à vos produits, configurez des déclencheurs en fonction d'événements tels que les clics. Les déclencheurs pour gtag.js dans AMP suivent les mêmes modèles JSON que les autres configurations de déclencheurs amp-analytics.

Cet exemple montre comment envoyer un événement click à Google Analytics. La valeur selector est un sélecteur CSS qui vous permet de spécifier l'élément ciblé. La valeur on spécifie le type d'événement, qui dans ce cas est un événement click. Dans la section vars, spécifiez le type d'événement dans event_name et ajoutez des paramètres supplémentaires si nécessaire.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

En plus des événements recommandés, vous pouvez spécifier vos propres événements personnalisés.

Le linker de domaines permet de mesurer au moins deux sites associés situés sur des domaines distincts comme un seul. Pour spécifier les domaines à associer, utilisez "linker": { "domains": [...] }:

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

La possibilité de créer un lien vers votre domaine canonique depuis AMP Cache est activée par défaut. Pour désactiver l'association du trafic du domaine, ajoutez "linker": "false" aux paramètres config:

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

Exemple complet

Cet exemple de code illustre une démonstration fonctionnelle complète d'une page AMP qui crée une seule page AMP et envoie un événement button-click à Google Analytics lorsque l'utilisateur clique sur le bouton. Remplacez <TAG_ID> par un ID de balise valide:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

Dépannage

Utilisez amptagtest.appspot.com pour valider votre configuration de taggage ou assurez-vous manuellement que la valeur cid est cohérente d'un domaine à l'autre en procédant comme suit:

  • Veillez à supprimer les cookies ou à utiliser le mode navigation privée.
  • Si cid est introuvable dans un cookie Google Analytics, vous pouvez également l'observer dans l'onglet "Réseau" de votre navigateur Web. Recherchez collect request. La charge utile doit contenir une valeur cid.

  • Une fois que vous avez transmis le CDN de Google au site Web client, les valeurs cid et gclid doivent être transmises via la décoration d'URL:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

  • La page de destination finale doit toujours avoir la même valeur cid que la page de destination initiale.

  • Soyez prudent avec les redirections et les changements de domaine entre la page canonique et les pages de destination standards.