Google Tag Manager Environnements pour une gestion multi-sites

Dans cet article, nous allons voir comment configurer votre site web de production, la pré-production et les environnements de test à partir d’un seul Google Tag Manager.

Dans le monde professionnel, les configurations multi-sites accompagnées des workflows de validation et de qualité sont critiques.

En effet, la plupart des grandes entreprises ont mis en place un processus de publication des modifications de leur site web qui implique plusieurs environnements de déploiement.

Une configuration typique est faite de :

• L’environnement de test où l’équipe de développement teste les nouvelles fonctionnalités du site web.
• La pré-production est l’environnement reproduisant votre site de production où les utilisateurs finaux peuvent effectuer des tests d’acceptance.
• La production est l’environnement qui héberge votre site web public – celui que tout le monde voit.

En fonction de la complexité de l’architecture de votre site web et des processus de votre entreprise, vous pouvez avoir plus ou moins d’environnements.

Chaque nouvelle version de votre site web sera testé d’un environnement à l’autre jusqu’à sa validation complète et sa mise en ligne.

Google Tag Manager et la fonctionnalité « environnement » vous permettra de tester vos balises marketing sur différents sites avant de les deployer en production.

A la fin de ce tutoriel, vous aurez une configuration de Google Tag Manager avancée et vous serez capable de publier et tester vos tags sur différents sites. Le workflow de qualité n’aura plus de secret pour vous.

C’est quoi la fonctionnalité Environnements de Google Tag Manager

Google Tag Manager propose une fonctionnalité appelée Environnements. Elle vous permet de tester l’intégration d’une nouvelle technologie de marketing dans votre environnement de test ou de pré-prod avant de la mettre en ligne.

Il est essentiel de pouvoir vérifier que les différents scripts, événements ou objectifs configurés au sein de votre tag manager fonctionnent correctement avant de les publier sur votre site web productif.

Pour accéder à l’environnement dans Google Tag Manager, allez dans la vue Admin et cliquez sur Environnements.

Comme vous pouvez le constater, vous avez déjà deux environnements, Live et Latest :

• Live est le nom utilisé par défaut pour votre site de production
• Latest représente la dernière version de votre conteneur. Par exemple, lorsque vous enregistrez une nouvelle version, celle-ci est disponible depuis l’environnement Latest.

Créer un environnement de test avec Google Tag Manager

C’est à vous de choisir la bonne dénomination ou celle qui est conforme à la politique de votre entreprise. Dans l’exemple suivant, je vais nommer mon environnement de pré-prod : Staging.

Pour créer un nouvel environnement, suivez ces étapes :

• Cliquez sur Nouveau dans le panneau de l’environnement
• Définissez un nom, une description et un URL
• Cliquez sur Créer un environnement
• Ensuite, une fenêtre popup vous invitera à publier
• Ainsi, le nouvel environnement créé sera exactement au même niveau de configuration que celui du Live (celui qui représente votre site de production)

Félicitation, vous avez maintenant trois environnements : Live, Latest, et Staging.

La dernière étape consiste maintenant à installer le code de l’environnement Staging (le bout de code de Google Tag Manager) sur votre site de pré-prod.

Le processus est similaire à ce que nous avons fait précédemment :

• Dans le panneau « Environnement« , cliquez sur le lien « Actions« 
• Copiez l’extrait de Staging et collez-le sur votre site web de staging

Note importante : Dès que vous créez un nouvel environnement, vous devez modifier aussi le bout de code installé sur votre site web de production. Obtenez l’extrait de l’environnement Live et remplacez-le sur votre site de production.

Super, maintenant vous avez deux environnements différents dans Google Tag Manager.

Jusqu’à présent, ils ont exactement la même configuration. Essayons d’ajouter un changement dans le Staging avant de le deployer en production.

Comprendre le workflow d’assurance qualité avec Google Tag Manager

Le processus d’assurance qualité de Google Tag Manager est assez simple et exploite les fonctionnalités de création de versions et d’environnements.

En gros, le processus est le suivant :

• Créez un nouvelle version de votre espace de travail qui contient les balises à tester
• Publiez la version sur l’environnement de pré-production et testez
• Si tout fonctionne, publiez la version sur l’environnement de production

Pour mieux comprendre les étapes, nous allons installer une balise Javascript factice sur l’environnement Staging, et nous allons la tester. Ensuite, nous déploierons cette balise sur le site web de la production.

Créer d’abord une balise Javascript de test

La balise est un simple Javascript imprimant un « Hello » dans la console Javascript de votre navigateur. (ne vous inquiétez pas, vous n’avez pas besoin d’un master en informatique pour faire cela)

Créez une nouvelle balise de type Custom HTML et copiez le code suivant à l’intérieur du bloc HTML :

<script>
console.log("Hello");
</script>

Puis une nouvelle version de l’espace de travail

Une fois la balise créée, dans le panneau « Espace de travail« , cliquez sur « Envoyer« , et cette fois, cliquez sur « Créer une version« .

Pour info, si vous cliquez sur « Publier et créer une version« , vos changements seront disponibles sur la production, et ce n’est pas ce que l’on souhaite pour le moment.

Nous voulons seulement créer une nouvelle version de l’espace de travail.

Le résultat : nous avons deux versions du conteneur ou deux configurations différentes disponibles dans le Tag Manager :

• La première version contenant la balise initiale de Google Analytics
• Et une deuxième version avec le tag Google Analytics et le tag javascript « Hello« 

Comme vous pouvez le voir, seule la version 1 est live et est actuellement appliquée à la fois à l’environnement Live et Staging.

Note : Comme mentionné précédemment, « Latest » représente la dernière version du conteneur, qui pointe maintenant vers la version 2.

Maintenant, notre objectif est de tester le tag « Hello » sur la pré-prod ou Staging.

Publier vos changements sur la pré-prod

Allez dans le panneau « Version » et suivez les étapes suivantes :

• Cliquez sur la version que vous souhaitez publier en pré-prod (dans notre cas la version 2)
• Sélectionnez Publier dans…

Une nouvelle fenêtre s’ouvre:

• Sélectionnez l’environnement Staging
• Cliquez sur Publier

Si vous rafraîchissez le panneau Version, vous pouvez maintenant voir que la version 2 est appliquée à la « Dernière version » et à Staging.

Vérifions que le script fonctionne et dit « Hello » au site de pré-prod.

Allez sur le site de pré-prod, rechargez votre page et ouvrez la console de développement. Vous verrez un message amical « Hello ».

Essayez le même test sur votre site de production. Vous ne verrez pas de message dans la console. En effet la production est toujours sur la version 1 du conteneur GTM.

La nouvelle balise a été correctement testée et fonctionne bien. Nous allons maintenant publier sur le site web « Live » ou de production.

Déployer votre tag marketing en production

On reprend les mêmes étapes que précédemment :

• Retournez au panel Versions
• Depuis la version 2, choisissez Publier Dans
• Et sélectionnez ensuite l’environnement Live.

La version 2 du conteneur est maintenant disponible pour tous les environnements.

N’oubliez pas que vous pouvez aussi bien revenir à une version précédente à tout moment.

Maitriser vos déploiements de tag

L’utilisation conjointe des environnements et des fonctionnalités de version de Google Tag Manager offre un mécanisme puissant.

Et comme nous venons de le voir, ce n’est pas si compliqué que l’on pense.

Ce mécanisme permet de tester les nouvelles intégrations avant de les mettre en production. Et c’est très important pour tous sites web professionnels utilisant plusieurs environnements. Vous ne voulez certainement pas casser la prod !

Aller plus loin avec Google Tag Manager

Cet article fait parti d’un guide sur les configurations avancées de Google Tag Manager avec Analytics.

Dans les articles suivants, nous examinerons les concepts avancés qui sont souvent nécessaires pour la configuration des sites web professionnels.

Je vous invite à continuer la configuration de votre site en exploitant encore plus les environnements de Google Tag Manager en configurant plusieurs propriétés de Google Analytics.