Configurer la balise pour AMP

Le projet Accelerated Mobile Pages (AMP) est une plate-forme Web Open Source qui permet d'améliorer les performances de votre contenu Web. AMP inclut une compatibilité intégrée 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 parmi les boutons suivants :

Balise Google

L'implémentation AMP de gtag.js utilise le amp-analytics framework pour vous permettre d'instrumenter Analytics sur votre site Web AMP. Les données peuvent être envoyées depuis les 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, assurez-vous d'abord d'avoir inclus le amp-analytics composant 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 <body> balise de la page. Remplacez <TARGET_ID> par l' ID de balise des produits (par exemple, Google Ads, Google Analytics) vers lesquels 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 amp-analytics documentation.

Déclencheurs d'événements

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

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.

Envoyer des dimensions et des paramètres personnalisés avec Google Analytics

Pour envoyer des dimensions et des métriques personnalisées à Google Analytics à partir de pages AMP à l'aide de gtag.js, vous pouvez exploiter la extraUrlParams propriété dans les configurations de déclencheur du JSON <amp-analytics>. Les paramètres personnalisés de Google Analytics sont envoyés en tant que paramètres d'événement.

  • Utilisez le préfixe ep. pour les paramètres d'événement de type chaîne.
  • Utilisez le préfixe epn. pour les paramètres d'événement de type numérique.

Avant d'envoyer, assurez-vous que ces dimensions et métriques personnalisées sont enregistrées dans votre propriété Google Analytics.

Exemple : Paramètres personnalisés avec une page vue

Cette configuration envoie une dimension personnalisée my_custom_dimension et une métrique personnalisée my_page_score avec la page vue initiale :

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

Exemple : Paramètres personnalisés avec un événement de clic

Cette configuration envoie des paramètres personnalisés lorsqu'un élément avec l'ID myButton est cliqué :

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

La fonctionnalité d'association de domaines permet de mesurer deux sites associés ou plus 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 à partir du cache AMP est activée par défaut. Pour désactiver la possibilité d'associer le trafic de 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 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 validator.amp.dev pour valider votre configuration de balisage ou vous assurer manuellement que la valeur cid est cohérente sur tous les domaines en procédant comme suit :

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

  • Une fois que vous êtes passé du CDN Google au site Web du 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 dans la page de destination initiale.

  • Faites attention aux redirections et aux modifications de domaine entre la page canonique et les pages de destination non AMP.