Comment configurer l'analyse Web sur les pages AMP

Salut, Habr. Je suis analyste de données chez Wrike Marketing: je collecte et analyse toutes les données publicitaires, la modélisation LTV et d'autres tâches techniques qui aident l'équipe à faire la publicité la plus efficace dans toutes les sources. Récemment, j'ai rencontré le problème de la configuration de la collecte de données sur les pages AMP et j'ai trouvé très peu d'informations sur le sujet, j'ai donc décidé de vous dire comment faire face à cette tâche.



Chez Wrike, nous avons construit un système d'analyse Web qui sert un grand nombre de parties prenantes différentes: équipes de sites Web, génération de leads, opérations marketing, gestionnaires de contenu, gestion marketing et niveau C. Il est très important pour l'équipe d'analyse de maintenir l'exhaustivité, la cohérence et l'actualité des données collectées sur le site, car un grand nombre de rapports sont construits sur leur base et les revenus attendus sont calculés pour évaluer l'efficacité de la campagne publicitaire en temps réel.

Côté client, nos analyses fonctionnent sur Google Tag Manager (GTM) - une telle solution permet à l'équipe d'ajouter et de modifier facilement des scripts analytiques sans la participation de spécialistes du site Web. Les scripts installés peuvent être divisés en trois groupes par point de terminaison pour les données:

1. Google Analytics
2. Nos journaux internes, à partir desquels les données sont ensuite téléchargées vers PostgreSQL;
3. Les trackers pour les sites publicitaires et autres systèmes d'analyse (LinkedIn, Twitter et autres sites comptent les pages vues et les conversions pour afficher des rapports publicitaires dans leur interface).

La base de données interne communique avec Google Analytics et les sites tiers. Lors de l'échange, nous identifions généralement l'utilisateur par l'ID client attribué par l'analyse: il est stocké à la fois dans notre base de données et dans Google Analytics en tant que paramètre utilisateur. Pour nous, nous prenons la valeur des cookies _ga .



Récemment, l'équipe de notre site Web a adapté les pages du blog d'entreprise au standard AMP . En bref, AMP (Accelerated Mobile Pages) est une norme spéciale pour créer des pages pour les appareils mobiles, ce qui peut accélérer considérablement leur travail. Si la page est conforme à la norme, AMP Project met en cache la page sur son CDN et la page sera intégrée dans la recherche Google sur les appareils mobiles.



_{La page de notre blog dans les résultats de recherche. L'icône AMP à gauche du lien signifie que la page s'ouvrira dans un cadre (iframe) directement sur la page de recherche.}

En particulier, la vitesse de chargement élevée des pages AMP est obtenue par l'absence d'utilisateur exécutable JS dans le code de la page (la balise de script est interdite si elle n'est pas de type application/ld+json ou text/plain ), et la page elle-même est construite à partir d'un ensemble limité de balises pré-optimisées. Pour l'analyse Web, il s'agit d'un test que nous avons réussi.

Il y a deux problèmes lors de l'ajout de pages AMP à notre écosystème:

1. Les méthodes classiques de collecte de données basées sur JS cessent de fonctionner;
2. AMP utilise le stockage local au lieu des cookies, et l'ID client est généré par un masque complètement différent:

Nous considérons les problèmes séparément.

Collecte d'informations

Dans GTM, vous pouvez créer un conteneur séparé adapté aux pages AMP, mais ce dernier a considérablement réduit la variété des types de balises qui peuvent être ajoutées. Le plus gros problème est, bien sûr, le manque de type HTML personnalisé dans lequel nous plaçons habituellement nos scripts. Voyons comment résoudre ce problème et d'autres problèmes pour chaque point de terminaison de données.

Google analytics

C'est la catégorie la plus simple. Les conteneurs AMP fournissent le type de balise Universal Analytics, à travers lequel vous pouvez installer Google Analytics. Parallèlement à l'envoi de pages vues et d'événements, seuls les paramètres et indicateurs définis par l'utilisateur entrent dans l'analyse. Les groupes de contenu, les données de commerce électronique et les autres champs disponibles dans GTM pour les pages normales ne peuvent pas être configurés ici.

Si vous utilisez Yandex.Metrica avec Google Analytics, il peut également être livré, mais cela ne fonctionnera pas via GTM: vous devrez connecter les développeurs. Vous trouverez ici des instructions détaillées.


_{Exemple de soumission d'une page vue à Google Analytics via GTM pour AMP}

Propres journaux

Toutes les demandes peuvent être envoyées à l'aide de la balise Image personnalisée. Sur le backend, il est important de fournir un pixel qui enregistre les données des paramètres de requête GET. Pour configurer l'envoi des données, ajoutez les variables nécessaires à l'adresse de la page demandée et n'oubliez pas d'utiliser l'option Enable Cache Busting afin que le pixel ne soit pas mis en cache.
Par exemple, vous pouvez envoyer des données sur l'affichage d'une page avec un ID client et un référent à l'aide d'un pixel:

//www.your-site.com/log?event=pageview&page={{Page Path}}&ga={{Page Client ID}}&referrer={{Document Referrer}}

Entre accolades, les liens vers les variables GTM sont indiqués; ils peuvent être configurés dans la section correspondante de l'interface GTM. L'ensemble des variables intégrées est, bien sûr, limité. Il est également impossible de calculer des valeurs propres en raison de l'absence de JS. Si nécessaire, vous pouvez calculer les valeurs souhaitées côté client à l'aide de variables AMP - elles sont accessibles depuis GTM.

L'AMP recevant principalement du trafic organique, il n'est pas nécessaire d'installer des trackers complexes pour les sites publicitaires. Par conséquent, nous avions suffisamment de variables intégrées pour configurer notre suivi.

Autres trackers

L'adaptation d'autres trackers non intégrés à AMP est assez difficile. Pour comprendre ce qui peut être adapté et ce qui ne peut pas, vous devez regarder les demandes envoyées par ces trackers. Si les paramètres envoyés par le tracker sont disponibles dans GTM, vous pouvez envoyer les données nécessaires en utilisant la même image personnalisée. Si le compteur a une partie noscript, elle peut généralement être transférée vers GTM.

Nous avons dû abandonner de nombreux trackers, dont l'adaptation pour AMP semblait trop laborieuse par rapport aux bénéfices qu'elle peut apporter.

Unification de l'ID client

Avec AMP, nous n'obtenons pas une, mais jusqu'à trois options possibles pour charger la page. Avec la version régulière, quatre sont obtenus:

1. Version normale (par exemple, www.your-site.com/blog/article-name/ )
2. Téléchargez directement sur le site (ici l'article est publié pour la mise en cache, par exemple, www.your-site.com/blog/article-name/amp/ )
3. Version en cache dans AMP CDN (l'adresse sera quelque chose comme ceci: www-your-site-com.cdn.ampproject.org/v/s/www.your-site.com/blog/article-name/amp/ )
4. Téléchargement via iframe dans les résultats de recherche: iframe recherchera la même adresse qu'au paragraphe 3, mais formellement l'utilisateur navigue sur www.google.com .

Si l'équipe d'analyse ne prend aucune mesure pour intégrer AMP dans son système d'analyse, l'ID client ne sera transféré qu'entre les versions standard et AMP situées sur votre domaine.


_{Par défaut, seules les pages situées sur votre domaine échangeront des données et des sessions client.}

Dans tous les autres cas, l'ID client n'est pas transmis. Ainsi, l'utilisateur qui a lu l'article dans les résultats de recherche puis s'est rendu sur le site, du point de vue de l'automatisation, est deux personnes différentes. Par conséquent, dans les analyses, vous verrez une forte augmentation du nombre de «nouveaux» utilisateurs, les données sur les sources ne refléteront pas la réalité, et dans le système d'analyse interne, vous perdrez la possibilité de composer un véritable chemin utilisateur de la première visite à la conversion.

Solution 1. API ID client

Google suggère d'utiliser l' API Client ID .

La mise en œuvre de cette solution est assez simple: vous devez ajouter la balise meta opt-in aux pages AMP et ajouter la configuration au code Google Analytics sur les pages de site normales. Cependant, cette solution présente de nombreux inconvénients:

1. Il ne fonctionnera que dans une paire de recherche Google - votre site;
2. Cela ne fonctionnera que dans un sens: si l'utilisateur s'est d'abord connecté à AMP, alors sur un site normal, il utilisera l'identifiant AMP. Si l'utilisateur est déjà sur votre site et connecté à AMP, un nouvel identifiant sera généré pour lui;
3. Il utilise des identifiants AMP. Si votre base de données interne est construite sur un identifiant client normal, cela peut entraîner des problèmes inattendus.

_{L'API Client ID vous permet de transférer des données utilisateur des résultats de recherche vers votre domaine, mais cela ne fonctionne que dans un sens.}

Solution 2. Configuration personnalisée d'analyse d'ampères

Contrairement à la version pleine taille, dans AMP GTM est connecté non pas via JS, mais via un fichier JSON. Le fichier de configuration contient des informations sur tous les tags, déclencheurs et autres paramètres GTM. Au niveau supérieur, le fichier ressemble à ceci:

 { "requests":{...}, "triggers":{...}, "vars":{...}, "transport":{...}, "linkers":{...}, } 

Le niveau vars contient des informations sur l'ID client:

  "vars":{ "clientId":"CLIENT_ID(AMP_ECID_GOOGLE,,_ga)", } 

GTM utilisera tout ID client transmis dans ce champ. Ainsi, nous pouvons télécharger ce fichier, le placer sur notre domaine principal et remplacer l'ID client par celui stocké dans les cookies (et disponible sur le domaine principal). Pour ce faire, créez un générateur de fichiers JSON sur le domaine principal, qui:

1. Récupère la configuration JSON de GTM à https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX>m.url=SOURCE_URL (remplacez GTM-XXXXXXX par l'identifiant de votre conteneur et SOURCE_URL par l'adresse de la page ouverte par l'utilisateur;
2. Lit les cookies _ga . Si ce n'est pas le cas, vous devez créer un identifiant client au format Google sous la forme: d'un nombre aléatoire à neuf chiffres, d'une période, d'un horodatage (horodatage). Si vous deviez créer une valeur, souvenez-vous-en dans les cookies _ga . Nous renvoyons le fichier obtenu auprès de GTM avec l'usurpation d'identité client:

  "vars":{ "clientId":"111111111.111111111", //      } 

_{Nous remplaçons l'installation JSON GTM par votre propre ID client personnalisé et transférons le même ID client pour un utilisateur à tous les clients AMP possibles.}

Dans cette configuration, toutes les demandes d'analyse JSON, quel que soit le domaine de visualisation, passeront par votre domaine et un ID client lui sera attribué. Ainsi, les quatre façons possibles de charger une page AMP recevront le même ID client.


_{En utilisant l'usurpation d'identité client, tous les domaines avec des pages AMP utilisent les mêmes données sur le visiteur et ne créent pas de sessions inutiles.}

Merci, Simo Ahava , pour l'idée d'usurper l'ID client dans la configuration JSON.