AMP : comment transmettre des données e-commerce avancées ? — Partie 2

Data Architecture 4 octobre 2018

Nous avons vu dans une première partie que la technologie AMP permet de proposer une meilleure expérience utilisateur sur un site mobile, tout en améliorant son référencement naturel et sa visibilité. Cependant, elle limite l’utilisation du JavaScript, ce qui impose certaines contraintes pour la collecte de données en webanalyse. Il faut bien avoir à l’esprit qu’à partir du moment où une solution est compatible avec la technologie AMP, tout est possible en terme de tracking. On pourra procéder avec ou sans TMS (Tag Management System).

Découvrez ici un tour d’horizon des possibilités techniques offertes aux marques pour collecter des données sur les pages AMP avec les solutions de webanalyse, et notamment avec la fonctionnalité Enhanced Ecommerce de Google Analytics.

Nous verrons notamment :

Comment transmettre des données e-commerce à Google Analytics sur des pages AMP sans TMS
Comment transmettre ces données avec Google Tag Manager (GTM)
Enfin, comment envoyer ces données vers n’importe quel type d’outil de webanalyse, avec ou sans TMS

Comment transmettre des données Enhanced Ecommerce à Google Analytics sur des pages AMP sans TMS ?

Les données Enhanced Ecommerce permettent de mesurer précisément les interactions des utilisateurs avec les produits sur les sites web et applications e-commerce. Il peut s’agir des données d’impressions relatives à un produit, des clics sur ce produit, de l’affichage de ses détails, ou encore des ajouts au panier d’achat. Toutes les interactions sont également comptabilisés tout au long du parcours d’achat, comme les transactions ou les remboursements.

Pour collecter ce type de données dans Google Analytics en “dur” sur des pages AMP, il faut tout d’abord passer par l’appel de l’extension AMP analytics dans la balise HTML <head> de la page.

src=« https://cdn.ampproject.org/v0/amp-analytics-0.1.js »></script>

Une fois l’appel au fichier JavaScript effectué, la configuration de Google Analytics se fait dans une balise dédiée.

<amp-analytics type=« googleanalytics »>
. . .
</amp-analytics>

Dans cette balise, il suffira d’insérer un objet JSON. Ci-dessous la configuration d’un hit de pageview classique pour Google Analytics.

Les fonctionnalitées natives à la librairie Google Analytics sont pour l’instant limitées. Par exemple, les variables Enhanced Ecommerce ne sont pas incluses par défaut. En revanche, cette librairie offre la possibilité d’enrichir son hit en ajoutant des paramètres par measurement protocol. C’est grâce à cette méthode qu’il devient possible d’envoyer dynamiquement et facilement des données Enhanced Ecommerce à Google Analytics sur les pages AMP.Ci-dessous, la configuration pour un hit Google Analytics remontant les informations ecommerce d’une page produit :

<amp-analytics type=« googleanalytics »>
<script type=« application/json »>
{
« vars »: {
« account »: « UA-XXXXX-Y »
},
« triggers »: {
  « trackPageview »: {
« on »: « visible »,
   « request »: « pageview »,
  « extraUrlParams »: {
« pa »: « detail »,
« pr1id »: « P12345 »,
   « pr1nm »: « Android Warhol T-Shirt »,
  « pr1ca »: « Apparel »,
« pr1br »: « Google »,
  « pr1va »: « black »,
   « pr1pr »: « 29.20 »
}
}
}
}
</script>
</amp-analytics>

Comment transmettre des données Enhanced Ecommerce dans Google Analytics sur des pages AMP avec Google Tag Manager ?

L’alternative à la librairie Google Analytics appelée directement sur un site AMP consiste à passer par un TMS (Tag Management System). Dans notre exemple, nous utiliserons Google Tag Manager (GTM) en créant un conteneur de type AMP pour collecter les données. L’utilisation d’un TMS est en effet très répandue sur les pages web classiques, car elle permet aux équipes dédiées à l’analytics et au média de modifier leur tracking avec beaucoup d’autonomie vis-à-vis des équipes de développeurs front-end.

Les conteneurs GTM AMP sont simples à configurer. Les templates de balises proposés facilitent le suivi des pages vues et actions réalisées par les utilisateurs sur le site AMP. En revanche, à l’heure où nous écrivons ces lignes, il n’est possible de remonter à l’aide du template de tag Google Universal Analytics que de simples dimensions et métriques personnalisées. Et les possibilités offertes par ce template s’arrêtent là. De très nombreuses fonctionnalités disponibles dans le template Google Universal Analytics d’un conteneur GTM de type Web n’existent pas dans les conteneurs de type AMP, dont celle de récupérer des données Enhanced Ecommerce pour les transmettre à Google Analytics.

Pour remonter des données Enhanced Ecommerce vers Google Analytics, la solution consiste à ajouter des paramètres par measurement protocol dans l’objet JSON de configuration (dataLayer) du conteneur GTM de type AMP. Les variables e-commerce sont donc ajoutées en amont à l’ URL du hit configuré dans GTM grâce au measurement protocol et à la variable “extraUrlParams”.

Ci-dessous un exemple de hit Universal Analytics permettant de collecter la donnée pour un ajout au panier, via un conteneur GTM de type AMP . Les variables e-commerce envoyées sont l’id produit, le nom du produit, la catégorie, la marque et le prix :

AMP et les autres solutions d’analytics : Adobe Analytics, Facebook Analytics…

Avec les pages AMP, il est en fait possible d’envoyer tous types de données vers n’importe quelle solutions analytics, que ce soit avec ou sans TMS.

Si la solution analytics a développé sa propre balise <amp-analytics>, il suffira de changer la valeur de l’attribut “type” de la balise lorsque la solution est disponible dans la librairie. Par exemple :

<amp-analytics type=« facebookpixel »>
. . .
</amp-analytics>

<amp-analytics type=« adobeanalytics »>
. . .
</amp-analytics>

Chaque solution possède ses propres variables attendues dans un hit. Et il est toujours possible de compléter ces hits avec l’objet “extraUrlParams”.

Si la solution que vous souhaitez implémenter ne fait pas partie de la liste proposée par la librairie AMP, il est toujours possible de la mettre en place. Pour ce faire, il suffit d’enlever l’attribut “type” de la balise “amp-analytics”

<amp-analytics>
<script type=« application/json »>
{
« requests »: {
   « pageview »: « https://www.exemple.com/pixel?pixelid=12345 »
},
« triggers »: {
  « trackPageview »: {
  « on »: « visible »,
« request »: « pageview »
}
}
}
</script>
</amp-analytics>

Ainsi, que la solution existe ou non dans la librairie AMP, il est possible d’envoyer via la variable “extraUrlParams” des données e-commerce avancées vers n’importe quelle solution, en adaptant les paramètres. Ci dessous, un exemple de configuration d’une page vue pour le pixel Facebook.

<amp-analytics type=« facebookpixel »>
<script type=« application/json »>
{
« vars »: {
« pixelId »: « 01234567890 »,
  « currency »: « EUR »,
  « content_name »: « Android Warhol T-Shirt »,
« content_ids »: « P12345 »,
  « content_type »: « Apparel »,
« value »: « 29.20 »
},
« triggers »: {
  « trackPageview »: {
« on »: « visible »,
« request »: « pageview »
}
}
}
</script>
</amp-analytics>

Si vous souhaitez utiliser un TMS compatible AMP comme Google Tag Manager, vous avez la possibilité de choisir un template de tag analytics ou média parmi la marketplace proposée. On peut ainsi remplir si besoin les variables de base à disposition dans le tag et compléter les informations en utilisant la variable “extraUrlParams” pour envoyer de la donnée ecommerce, comme expliqué plus haut avec le tag Google Analytics. Voici un exemple de template de tag Adobe Analytics :

Pour toutes les solutions média ou de webanalyse ne disposant pas de template dans GTM, il est toujours possible d’utiliser le template de tag “Custom Image”. Vous pouvez ainsi écrire l’URL du hit qui doit être envoyé, compléter les variables en récupérant leur valeurs depuis des variables de type AMP et enfin compléter le hit si nécessaire avec la variable “extraUrlParams”. Ci-dessous, un exemple de template de tag “Custom Image” :

Cependant, nous préconisons d’utiliser le plus possible les templates de tag proposés par GTM. Ces derniers ne permettent pas encore de remplir l’ensemble des variables attendues par le hit mais de prochaines fonctionnalitées devraient inévitablement voir le jour, simplifiant la configuration. Enfin, doit-on nécessairement passer par un TMS pour tracker les pages AMP en Enhanced Ecommerce ? On l’utilisera au cas par cas, en fonction des besoins et des contraintes réglementaires auxquelles la marque est soumise.

Les possibilités de tracking Google Analytics sur les pages AMP sont nombreuses que ce soit « en dur » ou en passant par un TMS comme GTM. Actuellement, quelle que soit la solution choisie, il faudra bien maîtriser le measurement protocol. Vous voulez en savoir plus ? Contactez-nous ! Chez 55, nous accompagnons nos clients sur ce mode de tracking, en allant bien au delà des sites web (bornes physiques, points de vente etc.).