Installer le Widget avec Google Tag Manager

Pourquoi utiliser GTM ?

Google Tag Manager offre un contrôle avancé du déploiement sans modifier le code de votre site :

• Ciblage par URL : afficher le widget uniquement sur certaines pages ou rubriques

• Filtrage par appareil : déployer des widgets différents sur ordinateur et sur mobile

• Routage par langue : afficher un widget propre à chaque langue selon la structure de l'URL

• Tests A/B : activer des configurations de widget différentes selon les segments d'utilisateurs

Prérequis

Prérequis côté ViaSay

• Assurez-vous d'avoir créé un Widget ViaSay

👍 Déployez en invisible, lancez quand vous êtes prêt

Réglez Audience Distribution sur 0 % pendant la mise en place. Le code du widget est déployé en production mais reste masqué. Quand vous êtes prêt à lancer, ajustez le pourcentage dans Integration pour contrôler la visibilité, sans aucune modification de code.

Prérequis techniques

• Google Tag Manager installé sur votre site

• Accès au conteneur GTM avec des droits de modification

• Connaissance de base des notions GTM (balises, déclencheurs, variables)

Étapes d'installation

Étape 1 : créer un déclencheur

https://www.loom.com/share/448ecadbff9d40c0a43dff0e1190d752

Les déclencheurs définissent quand et où votre widget se charge.

1. Allez dans Triggers dans la barre latérale de gauche

2. Cliquez sur New

3. Cliquez sur la zone de configuration du déclencheur

4. Sélectionnez Page View comme type de déclencheur

5. Configurez la portée du déclencheur :

Déployer sur toutes les pages :

• Sélectionnez All Page Views

Déployer sur certaines URL :

• Sélectionnez Some Page Views

• Ajoutez la condition : Page URL contains /your-path/

Exemple : afficher le widget uniquement sur les pages FAQ :

'Display widget only on FAQ pages:'
Page URL contains /faq

'Display widget only on FR pages:'
Page URL contains /fr

1. Donnez un nom explicite à votre déclencheur (par ex. « Widget - All Pages », « Widget - FAQ Only », « Widget - Desktop FR »)

2. Cliquez sur Save

Étape 2 : créer une balise

https://www.loom.com/share/91b0188772694601a07e45bd43971818

Les balises contiennent le code du widget proprement dit.

1. Allez dans Tags dans la barre latérale de gauche

2. Cliquez sur New

3. Cliquez sur la zone de configuration de la balise

4. Sélectionnez Custom HTML comme type de balise

5. Collez le code de votre widget ViaSay (onglet Build > Integrate > Channels > Integration)

6. Descendez jusqu'à la section Triggering

7. Cliquez pour ajouter un déclencheur

8. Sélectionnez le ou les déclencheurs créés à l'étape 1

9. Nommez votre balise (par ex. « ViaSay Widget », « ViaSay Widget - Desktop »)

10. Cliquez sur Save

Étape 3 : tester et publier

1. Cliquez sur Preview en haut à droite

2. Saisissez l'URL de votre site pour lancer le mode débogage

3. Vérifiez que le widget se charge sur les pages prévues

4. Vérifiez que la section Tags Fired confirme l'exécution de votre balise

5. Cliquez sur Submit pour publier les modifications

6. Ajoutez un nom et une description de version

7. Cliquez sur Publish

Configurations avancées

Cibler certains types d'appareils

Créez une variable JavaScript personnalisée pour détecter le type d'appareil :

1. Allez dans Variables dans la barre latérale de gauche

2. Cliquez sur New sous User-Defined Variables

3. Sélectionnez Custom JavaScript comme type de variable

4. Ajoutez cette fonction :

function() {
  return window.innerWidth <= 768 ? 'mobile' : 'desktop';
}

 

1. Nommez-la deviceType

2. Créez des déclencheurs distincts pour le mobile et l'ordinateur :

   • Déclencheur : deviceType equals mobile

   • Déclencheur : deviceType equals desktop

Déployer plusieurs widgets

Déployez des configurations de widget différentes selon l'URL ou le contexte :

Créez des balises distinctes, avec des jetons de widget différents, pour chaque déclencheur.

Transmettre des variables personnalisées au widget

Enrichissez les conversations avec le contexte de l'utilisateur grâce aux User Channel variables. Voir la documentation User Channel Variables →

Dépannage

⚠️ Impact des bloqueurs de publicité : GTM est fréquemment bloqué en raison de son lien avec Google Analytics. Si la visibilité maximale du widget est essentielle, utilisez plutôt l'installation HTML directe.

GTM ou installation HTML directe

Documentation GTM

• GTM Trigger Types Reference

• GTM Variable Types Reference

• GTM Built-in Variables

Étapes suivantes

• Configurez l'apparence du widget dans Format & Design

• Configurez des messages d'accueil adaptés au contexte dans Greetings

• Transmettez des données utilisateur avec des variables personnalisées

• Suivez les performances par segment d'URL dans Monitor