Google Tag Manager a récemment publié la prise en charge des pages mobiles accélérées (AMP). Cette prise en charge se présente sous la forme d’un nouveau type de conteneur dans Google Tag Manager.
Lorsque vous créez un conteneur AMP dans GTM, vous configurez en fait une configuration externe pour AMP, qui exploite le propre module d’analyse d’AMP. Comme il sied à Google Tag Manager, la création de la configuration se fait dans l’interface utilisateur familière de Google Tag Manager, et vous avez (presque) tous les outils de Google Tag Manager à votre disposition.
Dans cet article, je souhaite expliquer comment AMP et GTM s’associent pour fournir à vos pages mobiles des capacités de suivi améliorées.
1. Présentation du CHA
Accelerated Mobile Pages est un projet open source, et vous pouvez tout lire à ce sujet sur https://www.ampproject.org/. En un mot, il s’agit d’un ensemble d’instructions structurelles pour la création de pages Web, où l’accent est mis sur la vitesse et les performances, sans trop sacrifier l’interface utilisateur/UX en cours de route.
AMP est basé sur un certain nombre de principes de conception qui pourraient vous sembler vrais si vous avez déjà réfléchi aux performances d’un site Web. Des choses comme chargement de ressources asynchrones, style CSS en ligne, optimisation des polices Web et pré-rendu optimisé des pages sont quelques-unes des fonctionnalités sur lesquelles AMP s’appuie pour fournir aux utilisateurs un contenu ultra rapide.
Créer un site AMP
La création d’une version AMP de votre site n’est pas seulement une affaire de plug-and-play. Vous devez réécrire les styles HTML, JavaScript et CSS pour qu’ils correspondent aux principes de conception AMP. Si vous utilisez une plate-forme comme WordPress, il existe des plugins disponibles qui effectuent la majeure partie de la configuration pour vous. Et voici un excellent conseil pour le travail de développement AMP : chaque fois que vous parcourez une page AMP, vous pouvez ajouter le hachage d’URL. #development=1 à l’URL pour valider votre page AMP, en affichant le résultat de la validation dans la console JavaScript de votre navigateur.
Recherche AMP et Google
Enfin, si vous avez configuré votre site avec des pages AMP, il est judicieux de suivre les directives de recherche Google pour informer le moteur de recherche de la nouvelle structure mobile de votre site. Google tentera de diriger les recherches mobiles de votre site vers les pages AMP correspondantes, offrant ainsi aux visiteurs mobiles un accès rapide et optimisé à votre précieux contenu.
Si vous voulez voir à quoi ressemblent les pages AMP, vous pouvez consulter n’importe quel article de ce site et ajouter /amp/ à l’URL (par exemple https://www.simoahava.com/amp/analytics/accelerated-mobile-pages-via-google-tag-manager/.
2. Analyses AMP
Le conteneur AMP de Google Tag Manager exploite le composant amp-analytics. Ce composant, développé dans le cadre du projet AMP, fournit un cadre léger pour les demandes d’analyse envoyées via un certain nombre de modèles de fournisseurs intégrés ou à un point de terminaison personnalisé de votre choix.
Le framework amp-analytics est géré par un Objet de configuration JSONoù vous spécifiez les détails du point de terminaison auquel vous souhaitez envoyer les données, ainsi que variables et déclencheurs (cela vous semble familier ?) qui régissent les demandes d’analyse envoyées et à quel moment.
Même si la documentation amp-analytics n’est pas particulièrement longue ou complexe, il y a encore beaucoup de choses à prendre en compte lors de la configuration d’un schéma de suivi personnalisé. C’est pourquoi il est très utile d’avoir des modèles prédéfinis pour un certain nombre de fournisseurs d’analyses (par exemple, Google Analytics, Adobe Analytics, Snowplow Analytics).
Ajoutez amp-analytics à votre site Web
Pour ajouter la prise en charge du composant d’analyse sur votre site, vous devez ajouter la ligne de code suivante dans le <head> de votre document :
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>Cela charge la bibliothèque d’analyse AMP et demande à la page de rechercher un élément nommé <amp-analytics>. Cet élément personnalisé est l’endroit où vous introduisez le Objet de configuration JSON qui finira par régir la façon dont le site est suivi.
Google Analytics propose un excellent guide du développeur pour configurer le Objet de configuration JSON manuellement. Par exemple, pour envoyer un appel de page vue à Google Analytics lorsque la page est chargée, vous devez ajouter l’élément suivant au <body> du chantier :
<amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>Comme vous pouvez le voir, vous utilisez l’élément personnalisé <amp-analytics> que vous avez spécifié lors de l’ajout du chargeur de script initial au <head> de votre page. Les type Le paramètre de l’élément spécifie que vous utilisez la fonction intégrée googleanalytics modèle de fournisseur.
Assurez-vous de consulter l’excellent guide de Bounteous pour l’intégration de Google Analytics et AMP !
Charger l’objet de configuration JSON en tant que ressource externe
Vous pouvez également charger le Objet de configuration JSON d’une source externe (tant que la demande respecte les consignes de sécurité AMP CORS). Par exemple, le « conteneur » de Google Tag Manager est en fait une requête adressée à un fichier de configuration externe que vous spécifiez comme suit :
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX&gtm.url=SOURCE_URL" data-credentials="include"> <script type="application/json"> { "vars": { "someCustomAmpVar": "someValue" } } </script> </amp-analytics>Cela télécharge un fichier nommé amp.jsonspécifié à l’aide de votre ID de conteneur, et le data-credentials L’attribut permet à la demande de ressource de lire et d’écrire des cookies selon les besoins. Les <script> bloquer dans le amp-analytics L’élément peut être utilisé pour utiliser vos propres variables AMP personnalisées sur la page.
Notez que le téléchargement du fichier de configuration externe ne commencera que si la page est visible dans la fenêtre ! Par exemple, si vous ouvrez une page AMP avec un lien de configuration à distance dans une nouvelle fenêtre de navigateur sans activer cette fenêtre, le téléchargement du fichier de configuration attendra jusqu’à ce que la page devienne visible. Cela signifie que votre suivi analytique ne commencera pas tant que la page ne sera pas visible dans le navigateur.
Quoi qu’il en soit, revenons à la Objet de configuration JSON. Il détaille les interactions et les événements qui sont suivis jusqu’au point de terminaison d’analyse de votre choix, quand ils sont suivis et comment. Je vous recommande de lire la documentation AMP Analytics, car elle éclaire également un peu le fonctionnement du conteneur GTM AMP.
AMP Analytics avec son Objet de configuration JSON est assez éloigné du contexte d’exécution dynamique de JavaScript et du Document Object Model. Cependant, vous devez respecter le fait que tous les compromis sont faits en faveur d’une amélioration des performances. J’espère qu’une partie de la méthodologie AMP Analytics déteindra sur le gâchis gonflé, destructeur de performances et dynamique que l’analyse Web “moderne” basée sur JavaScript est si souvent.
2.1. identité du client
Avant de passer au fonctionnement du conteneur GTM AMP, nous devons parler de l’ID client. Vous pouvez ignorer ce chapitre si vous souhaitez simplement que Google Tag Manager soit opérationnel sur votre site AMP.
Google Analytics utilise le paramètre Client ID pour aligner les hits avec les utilisateurs qui ont envoyé les hits. Cet identifiant est stocké dans un cookie propriétaire nommé _ga. Ainsi, chaque fois que vous visitez un site Web exécutant Google Analytics, ce cookie est utilisé pour s’assurer que tous les hits que vous envoyez sont liés à vos visites précédentes.
Les cookies propriétaires ne peuvent être écrits que sur le domaine sur lequel vous vous trouvez actuellement. Par conséquent, si vous souhaitez voyager d’un domaine à un autre tout en conservant tous vos accès sous le même identifiant client, vous devrez d’une manière ou d’une autre transmettre votre valeur de cookie d’un domaine à un autre sans violer la restriction décrite dans la première phrase de ce paragraphe. .
ID client et AMP
Avec AMP, les choses sont légèrement plus difficiles. AMP Analytics n’utilise pas le _ga cookie par défaut, même si vous pouvez le configurer pour qu’AMP revienne à _ga si on en trouve un. Mais même si vous le configurez pour utiliser _ga, que se passe-t-il si l’utilisateur navigue sur la page AMP via la recherche Google ou le CDN AMP ? Les deux mettent en cache votre contenu dans un domaine externe (www.google.com et cdn.ampproject.org, respectivement), ce qui signifie qu’ils ne pourront pas accéder aux cookies écrits sur votre domaine. De plus, la syntaxe de l’ID client par défaut d’AMP est très différente de celle utilisée par Google Analytics.
Tout cela signifie que même si vous avez réussi à utiliser votre _ga cookie comme identifiant client dans les pages AMP de votre site, cela ne suffit pas. Vous voyez, si l’utilisateur atterrit sur votre page AMP via la recherche Google, ce qui est probablement le cas d’utilisation le plus typique, il visitera en fait une version en cache de votre page sur www.google.com. Cela signifie que non _ga cookie est trouvé et AMP revient par défaut à un identifiant unique et aléatoire.
Hacking pour créer un identifiant client unique et unifié
Il existe des solutions de contournement, et grâce à un brainstorming avec l’inimitable Dan Wilkerson de Bounteous (qui a déjà écrit un excellent guide pour Google Analytics et AMP), voici une suggestion que je développerai probablement dans un article ultérieur.
Voici comment cette solution particulière fonctionne :
-
Au lieu de récupérer directement le conteneur GTM, la requête est envoyée à un point de terminaison HTTP personnalisé que vous devez configurer sur le domaine de votre site Web.
-
Cette API sert une version mise en cache du conteneur GTM ou récupère la version la plus récente si le cache a expiré.
-
Au lieu d’utiliser l’ID client aléatoire par défaut utilisé par AMP Analytics, l’ID client est récupéré à partir du
_gacookie écrit sur le domaine de l’API REST, c’est-à-dire votre site Web. -
Si aucun cookie n’est trouvé, un nouveau est créé.
-
Les
_gala valeur est renvoyée dans leSet-CookieEn-tête de réponse HTTP, afin que le cookie soit écrit sur le domaine à l’origine de la requête (par exemple, www.google.com ou cdn.ampproject.org). -
La réponse HTTP contient également le Objet de configuration JSON (avec le nouvel identifiant client) utilisé par le site pour configurer AMP Analytics.
En d’autres termes, vous créez un proxy sur votre serveur Web, qui relaie les requêtes pour le conteneur Google Tag Manager, tout en modifiant le conteneur afin qu’il inclue (ou crée) l’ID client utilisé par Google Analytics.
C’est alambiqué, oui, et il pourrait y avoir des moyens plus simples de gérer cela, mais pour l’instant, cela vous permet d’assembler le trafic AMP avec d’autres trafics sur site, tels que les visites de bureau sur des pages non AMP. Pour certains éditeurs, et notamment pour les sites de e-commerce, c’est vital.
3. Créer et implémenter un conteneur GTM/AMP
Comme mentionné précédemment, le conteneur AMP de Google Tag Manager est essentiellement un conteneur distant Objet de configuration JSON qu’AMP Analytics utilise pour suivre les interactions sur votre page.
Aussi, il n’y a pas dataLayer. Toutes les variables personnalisées que vous souhaitez transmettre de la page à la Objet de configuration JSON doivent être inclus dans le <script> bloquer dans le amp-analytics élément:
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-5BH2HM&gtm.url=SOURCE_URL" data-credentials="include"> <script type="application/json"> { "vars": { "gaTrackingId": "UA-12345-1" } } </script> </amp-analytics>
L’avantage d’utiliser Google Tag Manager est que vous pouvez utiliser l’interface utilisateur de confiance pour configurer votre conteneur AMP comme vous le feriez pour votre conteneur Web. Tous les modèles de fournisseurs pris en charge sont disponibles sous forme de balises, il est donc assez simple de créer une demande pour votre point de terminaison.
Une fois que vous avez terminé la configuration, vous devez appuyer sur le bouton PUBLIER, et l’AMP Analytics Objet de configuration JSON sera mis à jour automatiquement pour tous les visiteurs du site.
Les conteneurs AMP sont une nouvelle option de sélection dans la boîte de dialogue de création de conteneur :
Une fois que vous avez créé le conteneur, vous pouvez cliquer sur le bouton PUBLIER et publier une version de base du conteneur. C’est normal que vous ne diffusiez pas encore de balises ; il vous suffit de publier le conteneur une fois pour vous assurer qu’il ne répond pas avec un 404 lorsqu’il est accédé par votre site.
Maintenant que vous avez créé votre conteneur AMP, vous devez le déployer.
Déployer le conteneur AMP
AMP Analytics se compose de deux parties : la bibliothèque JavaScript amp-analytics et la Objet de configuration JSON. Pour déployer AMP Analytics via Google Tag Manager, vous devrez implémenter les deux dans vos modèles de page.
Tout d’abord, la bibliothèque. Dans AMP, il s’agit en fait d’un composant étendu du schéma AMP HTML. Pour qu’AMP Analytics fonctionne, vous devoir déployer les éléments suivants dans <head> de votre site Web :
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>Cela charge la bibliothèque AMP Analytics de manière asynchrone. Comme vous pouvez le voir, vous préfigurez également l’existence d’un élément HTML AMP personnalisé nommé amp-analytics.
La prochaine chose que vous devez faire est de dire à la page où charger la télécommande Objet de configuration JSON à partir de. Si vous vous souvenez bien, il s’agit de votre conteneur AMP Google Tag Manager. Vous devoir ajouter le code suivant dans le de votre site Web :
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-5BH2HM&gtm.url=SOURCE_URL" data-credentials="include"> <script type="application/json"> { "vars": { "someAmpVariable": "someValue" } } </script> </amp-analytics>C’est la coutume amp-analytics élément dont nous venons de parler. La valeur de la config l’attribut est une référence à votre conteneur GTM, et l’attribut data-credentials="include" partie est importante, car elle autorise la configuration téléchargée à lire et écrire des cookies sur votre domaine. Vous pouvez transmettre des variables AMP personnalisées au Objet de configuration JSON en utilisant l’intégré <script> bloquer comme indiqué.
Notez que si vous alliez de l’avant et implémentiez le piratage de l’ID client que j’ai présenté plus tôt (si possible d’après ma description compliquée et folle), vous devrez remplacer la référence aux serveurs de Google Tag Manager par votre propre point de terminaison personnalisé, par exemple :
<amp-analytics config="https://www.simoahava.com/wp-json/amp-gtm/amp.json?id=GTM-5BH2HM&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>Ne pas oublier gtm.url
Les >m.url paramètre est important. En ajoutant SOURCE_URL comme valeur, vous demandez à AMP de résoudre une variable de plate-forme comme valeur de gtm.url paramètre. Cette variable de plate-forme particulière est automatiquement remplacée par l’URL du site Web à partir duquel la demande a été effectuée. Si la page est servie à partir d’un proxy connu, tel que le cache AMP, elle se résoudra toujours à l’URL réelle du site Web dont le contenu est servi.
Ce paramètre est important, car il fournit une URL source pour le conteneur GTM, que vous pouvez ensuite utiliser les déclencheurs d’activation uniquement sur certaines pages de votre site.
Une fois que vous avez effectué ces étapes, vous êtes prêt à commencer à configurer votre suivi ! En surface et dans l’interface utilisateur, les choses peuvent sembler trop familières. Vous allez créer vos tags comme avant, en remplissant les champs comme avant, c’est comme si rien n’avait changé.
Au fait, si tout cela est nouveau pour vous, n’oubliez pas de consulter ces excellentes ressources d’apprentissage GTM.
Cependant, il existe de nombreuses différences par rapport à GTM pour le Web. D’une part, il n’y a vraiment pas dataLayer plus, car AMP ne vous permet pas d’exécuter du JavaScript arbitraire. Cela délimite sévèrement ce que vous pouvez faire avec les déclencheurs et les variables.
Sur cette note, la plupart des déclencheurs et des variables qui vous sont disponibles sont soit complètement nouveaux, soit se comportent différemment d’avant. De plus, la façon dont le conteneur est construit et validé côté serveur a radicalement changé.
Les sections suivantes de ce guide examineront de plus près tous ces changements.
4. Déclencheurs
Pour comprendre le fonctionnement des déclencheurs AMP, vous devez désapprendre la plupart de ce que vous savez sur les déclencheurs de Google Tag Manager.
Dans l’ancien Google Tag Manager, les déclencheurs sont des conditions dynamiques qui réagissent à dataLayer.push() commandes. Si la dataLayer.push() avait une structure clé-valeur spécifique, le déclencheur se “lancerait”, exécutant n’importe quelle balise à laquelle il était attaché.
Cela signifiait que le conteneur GTM contenait toutes les balises auxquelles était attaché un déclencheur.
Dans le conteneur AMP GTM, le Objet de configuration JSON n’inclut que les requêtes de balises dont les déclencheurs transmettent un validation côté serveur Chèque! En d’autres termes, vous pouvez oublier tous les déclencheurs dont les conditions d’activation dépendent d’une valeur dynamique. Plus de “La variable de couche de données est égale à ceci” ou “La variable JavaScript personnalisée renvoie cela”. Les seules variables intégrées que vous pouvez vérifier dans une condition d’activation de déclencheur sont :
-
Identifiant du conteneur
-
Version du conteneur
-
Nom de l’environnement
-
Nom d’hôte de la page
-
Chemin de la page
-
L’URL de la page
-
Nombre aléatoire
Les types définis par l’utilisateur (en plus, par exemple, du nombre aléatoire et de la version du conteneur, qui sont également des types variables) que vous pouvez utiliser sont URL (tant qu’il utilise l’URL de la page comme source), Constante et Tableau de recherche.
Pourquoi juste ceux-ci ? Parce que tout cela (et seulement ceux-ci) peut être résolu du côté serveur par Google lorsque la requête HTTP pour le Objet de configuration JSON En d’autres termes, vous ne pouvez utiliser que des variables dont la valeur est connue de Google lors de la demande de Objet de configuration JSON est reçu. Cela exclut toutes les variables AMP, par exemple, car elles sont résolues dans le navigateur.
Parce que la validation est faite du côté serveur, GTM n’a pas accès à l’URL de la page qui a fait la demande automatiquement. Vous devez ajouter explicitement ces informations dans l’extrait de conteneur !
Permettez-moi de vous montrer un exemple. Supposons que vous créiez un déclencheur comme celui-ci dans votre conteneur AMP :
Toute balise à laquelle ce déclencheur est attaché sera ajoutée à la Objet de configuration JSON si la requête HTTP pour la configuration AMP a le domaine actuel dans le gtm.url paramètre. Si vous vous en souvenez, vous devez ajouter ce paramètre à la demande de conteneur et définir sa valeur sur SOURCE_URL.
Les SOURCE_URL La variable AMP est résolue en l’URL réelle de la page lorsque la demande du conteneur JSON est effectuée. Sans ce paramètre, la validation côté serveur par rapport aux variables Nom d’hôte de la page, Chemin de la page et URL de la page ne fonctionnera probablement pas comme prévu.
Si au moins un déclencheur que vous avez ajouté à la balise réussit la validation côté serveur, le résultat final ressemble à ceci dans le Objet de configuration JSON:
"5": { "request": "2", "vars": { "gtm.event": "gtm.pageview" }, "on": "visible" }Cela signifie simplement que lors du chargement initial de la page, ce déclencheur doit déclencher la demande numéro “2”, qui est la balise Page View transformée en demande à GA. Comme vous pouvez le voir, il n’y a rien sur les conditions de déclenchement dans ce bloc JSON.
En fait, les cinq types de déclencheurs disponibles (au moment de la rédaction) ont le même paramètre binaire :
Si le déclencheur ne réussit pas la validation côté serveur, la balise est supprimée du Objet de configuration JSONet il n’y a aucun moyen de modifier dynamiquement les conditions de la page pour la déclencher dans le navigateur.
J’ai passé pas mal de temps avec ce changement dans la fonctionnalité de base des déclencheurs GTM, mais à juste titre. La validation côté serveur est une énorme différence par rapport au fonctionnement de GTM. Encore une fois, cela garantit que les pages AMP sont ultra-rapides, car le Objet de configuration JSON est fondamentalement juste quelques lignes de code. C’est léger par rapport à la complexité d’un conteneur GTM “normal”.
Examinons maintenant les déclencheurs disponibles eux-mêmes.
4.1. Cliquez sur
Le déclencheur Click dans le conteneur AMP est à peu près la même chose que le Tous les éléments déclencheur dans Google Tag Manager standard. En d’autres termes, la cible du clic (si valide) est l’élément qui est…
