Gérez facilement les balises de votre PWA avec Google Tag Manager

Google Tag Manager est un "Tag Management System". Il s'agit d'un service qui permet d'utiliser un petit morceau de code javascript sur une page web pour appeler d'autres morceaux de codes javascript. Pour schématiser, il s'agit d'une boite vide (appelée conteneur) dans laquelle vous pouvez faire apparaître ce que vous voulez (une balise), quand vous le voulez.

Le principal intérêt des TMS, c'est que vous effectuez une intervention technique sur votre site une seule fois. Une fois que le javascript du TMS est ajouté, plus besoin de s'en soucier. Le reste de la configuration s'effectue dans l'interface de gestion du TMS.

Google Tag Manager est un service offert par Google. A partir de l'interface de gestion de GTM, vous ajoutez des balises et vous définissez des déclencheurs.
Les balises, ce sont les différents codes javascript que vous souhaitez exécuter dans le conteneur présent sur votre site.
Les déclencheurs, ce sont des règles que vous définissez pour déclencher l'affichage des balises.

GTM propose un grand nombre de balises et de déclencheurs par défaut, ce qui rend sa configuration assez simple, malgré une interface qui peut paraître complexe au premier abord.

Par exemple, si vous utilisez AdRoll pour effectuer des campagnes de re-targeting, il suffit d'ajouter la balise AdRoll dans GTM et de lui associer le trigger qui déclenche un affichage sur toutes les pages de votre PWA, et le tour est joué !

Tout d'abord, vous devez vous rendre dans l'interface de Google Tag Manager. Si ce n'est pas déjà fait, vous devez dans un premier temps créer un conteneur. Il est possible de créer plusieurs conteneurs dans GTM, mais en pratique, un seul est suffisant.
Une fois le conteneur créé, récupérez son identifiant. Il est de la forme GTM-XXXXXXX.

Rendez-vous ensuite dans le backoffice de votre PWA. Ouvrez le menu Statistiques > Outils Externes > Onglet PWA
Dans le bloc Google Tag Manager, cliquez sur ON, saisissez l'ID de votre conteneur et cliquer sur le bouton Sauvegarder.
Ensuite, rendez-vous dans Publication > PWA > Mettre à jour et mettez à jour votre app. 

Note: Rappelez-vous, concernant la mise à jour de l'app, vérifier dans un premier temps si la dernière version qui vous avez compilée supporte la fonctionnalité Google Tag Manager. Si ce n'est pas le cas, recompilez votre PWA. 
Si c'est déjà le cas, une simple mise à jour des paramètres de la PWA suffit pour appliquer votre configuration de Google Tag Manager.

Une fois que vous avez renseigné l'ID de votre conteneur GTM dans votre PWA (et mis à jour cette dernière), il ne vous reste plus qu'à vous rendre dans l'interface de gestion de GTM pour effectuer votre paramétrage des balise et des déclencheurs dans votre conteneur.
L'aide en ligne de Google est très détaillée et vous explique pas à pas comment faire.

Depuis la fin décembre 2019, il est possible d'activer AMP (Accelerated Mobile Pages) pour la fiche produit des GoodBarber Shopping Apps. Si vous avez activé AMP dans votre app de e-commerce et que vous souhaitez ajouter un conteneur GTM sur la version AMP de vos fiches produits, vous pouvez !

Pour cela, il suffit de créer un conteneur réservé à AMP dans votre compte Google Tag Manager. Récupérez l'ID de ce conteneur et renseignez le dans le backoffice de votre Shopping App.
Pour cela, rendez-vous dans le menu Statistiques > Outils Externes > Onglet PWA. Un champ de saisie GTM dédié à AMP est prévu.