Google Tag Manager : Comment utiliser les dataLayers pour vos utilisateurs

Dans cet article, nous allons voir comment utiliser les dataLayer pour activer certaines fonctions comme un support par chat avec Crisp que vous souhaitez réserver à certains de vos utilisateurs. Par exemple, les utilisateurs premiums qui ont un abonnement chez vous.

Prenons un service SaaS, sur lequel vous avez plusieurs offres qui sont : la version gratuite, Bronze, Argent et Or. Dans cette solution SaaS, vous ne souhaitez activer le chat que pour vos utilisateurs en abonnement.

Historiquement, vous demandez à votre équipe technique de ne charger que le JS de votre chat pour ces utilisateurs. Pour cela vous utilisez une technique ancestrale : le IF.
Mais, en 2020, on essaye d’être le plus autonome possible. On va passer tout ça par GTM.
Pourquoi ? Car vous pouvez changer de système de chat, vouloir ajouter Hotjar et d’autres scripts tiers. Pas besoin de déranger l’équipe tech pour ça.

On va utiliser les dataLayers pour manipuler ces JS.

Comment utiliser les dataLayer ?

Seule contrainte pour être autonome, il faut que je sois au courant de l’offre de mon utilisateur, donc je vais demander à mon équipe technique de charger plus de “contexte” sur l’utilisateur via les dataLayers. Je ferai ma personnalisation et chargement des scripts dans Google Tag Manager.

Je vais faire passer 2 variables qui sont :

• Le type d’utilisateur (free ou premium)
• L’offre en cours (none, bronze, argent, or)

Voici le code que l’équipe tech va ajouter au Template :

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    typeUser: 'premium',
    offre: 'or'
  });
</script>

Ajoutons le script de Crisp

Dans Google Tag Manager, vous ajoutez une balise HTML personnalisée et vous copiez / collez le code proposé par Crisp.

Comment faire le déclencheur uniquement pour les utilisateurs prémium ?

Première étape, je déclare mes variables dataLayer dans Google Tag Manager afin de pouvoir les faire remonter.
Dans la partie variables, il “suffit” d’ajouter 2 variable : typeUser et offre.

Et ensuite, j’ajoute un déclencheur pour que la balise Crisp soit chargée uniquement sur la variable typeUser est égale à premium.

J’ai ainsi un chargement conditionnel de ce script uniquement pour mes utilisateurs premium.

Bien entendu, vous pouvez ajouter de nombreuses combinaisons pour déclencher des comportements spécifiques pour vos besoins métiers / marketing.

Voici le détail en vidéo de l’utilisateur des dataLayer