Configurer la balise pour AMP

Le projet Accelerated Mobile Pages (AMP) est un projet Web Open Source plate-forme qui permet d'améliorer les performances de votre contenu Web. Le format AMP inclut la balise Google et Google Tag Manager sont compatibles. Ce guide décrit 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 vous permet de créer des configurations avancées et de déployer des dans l'interface Tag Manager.

Sélectionnez la plate-forme de votre choix à l'aide des boutons suivants:

Balise Google

L'implémentation AMP de gtag.js utilise le framework amp-analytics pour : vous permettent d'instrumenter les analyses sur votre site Web AMP. Les données peuvent être envoyés depuis des pages AMP vers Google Ads, Google Analytics et d'autres produits Google à partir de la même implémentation gtag.js.

Installation

Pour configurer gtag.js sur une page AMP, commencez par vérifier que vous avez 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 le Balise <body> sur la page. Remplacez <TARGET_ID> par le ID de balise des produits (par exemple, Google Ads ou Google Analytics) que vous souhaitez cibler pour 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é du tag de ce produit. Il vous suffit d'ajouter l'ID de destination à une 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, reportez-vous à la documentation 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 comme les clics. Les déclencheurs pour gtag.js sur AMP suivent les mêmes formats JSON que d'autres configurations de déclencheurs amp-analytics.

Cet exemple montre comment envoyer un événement click à Google Analytics. La La valeur selector est un sélecteur CSS qui vous permet de spécifier l'élément ciblées. La valeur on spécifie le type d'événement. Ici, il s'agit d'une click. Dans la section vars, spécifiez le type d'événement event_name et ajoutez des paramètres 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 à deux sites connexes ou plus situés sur des domaines distincts d'être mesuré en tant que 1. 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 à partir du cache AMP est activée par défaut. Pour désactiver la possibilité d'associer le trafic des domaines, 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 complète et fonctionnelle d'une page AMP 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 une valeur valide ID de la balise:

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

Validez la configuration de vos balises via l'adresse amptagtest.appspot.com. Vous pouvez également vérifiez que la valeur cid est cohérente d'un domaine à l'autre en exécutant la commande suivantes:

  • Veillez à effacer les cookies ou à utiliser le mode navigation privée.
  • Si cid n'est pas trouvé dans un cookie Google Analytics, il peut aussi être observée dans l'onglet "Réseau" de votre navigateur. Rechercher collect request, et la charge utile doit contenir une valeur cid.

  • Une fois que vous êtes passé du CDN Google au site Web client, le cid et la valeur gclid doivent être transmis 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 dans l'attribut page de destination initiale.

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