Guide de configuration AMP et Tag Manager

Le projet Accelerated Mobile Pages (AMP) est une plate-forme Web Open Source qui contribue à améliorer les performances de votre contenu Web. Le format AMP est compatible avec Google Tag Manager. Ce document décrit la méthode recommandée pour configurer Google Tag Manager sur vos pages AMP.

Pour installer Tag Manager pour AMP :

  1. Créez un conteneur AMP dans Tag Manager.
  2. Insérez l'extrait Tag Manager sur vos pages AMP.
  3. Configurez des balises dans votre conteneur Tag Manager et publiez ce dernier.

Créer un conteneur AMP

Tag Manager propose un type de conteneur AMP. Créez-en un pour votre projet :

  1. Sur l'écran Comptes, cliquez sur Autres actions (Plus) au niveau du compte que vous souhaitez utiliser. Sélectionnez Créer un conteneur.
  2. Nommez le conteneur. Utilisez un nom descriptif (par exemple, example.com - actualités - AMP).
  3. Sous Où utiliser le conteneur, sélectionnez AMP.
  4. Cliquez sur Créer.

Votre conteneur est maintenant prêt. L'étape suivante consiste à insérer le code Tag Manager sur vos pages AMP.

Pour savoir comment installer l'extrait de code, consultez les instructions fournies dans Tag Manager. Si vous souhaitez plus d'informations, reportez-vous à la section suivante.

Ajouter l'extrait Tag Manager

Une fois que vous avez créé votre conteneur AMP, l'écran Installer Google Tag Manager apparaît. Tag Manager fournit deux extraits de code. Copiez-les afin de les insérer sur vos pages AMP.

Remarque : Si vous souhaitez accéder ultérieurement aux extraits de code, cliquez sur le numéro d'identification du conteneur situé en haut de la page de présentation de l'espace de travail. Vous pouvez également cliquer sur Admin, puis sur Installer Google Tag Manager.

Le premier extrait ajoute le composant amp-analytics à votre page AMP. Placez ce code à la fin de la section <head>. Il ne doit apparaître qu'une fois sur la page.

<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Important : N'ajoutez ce code à votre page que s'il n'est pas déjà présent, car il ne doit apparaître qu'une fois sur chaque page.

Le deuxième extrait active Tag Manager à partir du composant amp-analytics. Placez ce code juste après la balise d'ouverture <body>. Remplacez GTM-CONTAINER_ID par l'ID de votre conteneur Tag Manager ou copiez et collez l'intégralité de l'extrait de code depuis l'interface utilisateur de Tag Manager.

<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

Configurer le conteneur et le publier

Une fois que l'extrait conteneur est correctement installé sur vos pages, ces dernières pourront déclencher des balises déployées à partir de Tag Manager. L'étape suivante consiste à créer des configurations de balises et à publier le conteneur.

Pour créer une balise :

  1. Cliquez sur Balises puis Nouveau.
  2. Cliquez sur Configuration de la balise et sélectionnez le type de balise dans la liste des balises AMP compatibles.
  3. Configurez la balise à l'aide des informations communiquées par le fournisseur.
  4. Cliquez sur Déclenchement, puis ajoutez une ou plusieurs conditions d'événement qui déclencheront la balise.
  5. Nommez le déclencheur, puis cliquez sur Enregistrer.

Répétez ces étapes pour toutes les configurations de balises supplémentaires. Lorsque vous avez terminé la configuration de votre conteneur, publiez-le afin d'appliquer les modifications.

Variables de page

Tag Manager peut enregistrer des variables AMP, puis les utiliser dans des configurations de balises et de déclencheurs. Par exemple, une page qui vend des chaussures peut contenir des variables décrivant les propriétés d'une paire particulière. Ces valeurs peuvent servir à créer des variables Tag Manager :

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "type": "chaussures",
              "color": "rouge"
          }
      }
  </script>
</amp-analytics>

Pour créer une variable définie par l'utilisateur dans Tag Manager qui capture la variable de couleur à partir du code ci-dessus, procédez comme suit :

  1. Cliquez sur Variables.
  2. Sous Variables définies par l'utilisateur, cliquez sur Nouvelle.
  3. Cliquez sur Configuration de la variable et sélectionnez Variable AMP.
  4. Dans le champ Nom de la variable AMP, saisissez le nom du champ (par exemple, color).
  5. Donnez un nom descriptif à la variable (par exemple, Variable AMP - couleur).
  6. Cliquez sur Enregistrer.

Balises AMP compatibles avec Tag Manager

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?