Intégration Google Tag Manager
Ajoutez un chatbot IA avec Google Tag Manager
Chargez votre agent intoCHAT sur chaque page avec une balise HTML personnalisée, sans modifier les gabarits de votre site. Le code ci-dessous transmet l'identifiant de l'agent d'une façon que GTM conserve.
Dernière mise à jour:
Comment intoCHAT fonctionne avec GTM
Google Tag Manager vous permet d'ajouter des scripts à votre site depuis un seul endroit. intoCHAT fonctionne via GTM, avec un détail qui compte : GTM retire les attributs data des balises script dans les balises HTML personnalisées, et le script intoCHAT lit justement l'identifiant de l'agent dans un tel attribut. Le code de cette page contourne le problème en créant l'élément script en JavaScript : le widget se charge avec le bon agent. Tout le reste, des couleurs aux connaissances, se gère dans intoCHAT.
Installer intoCHAT avec Google Tag Manager
Copiez l'identifiant de l'agent
Dans intoCHAT, ouvrez l'onglet Share de votre agent. L'identifiant figure sur la carte WordPress Plugin, et c'est aussi la valeur de data-chatbot-id dans la balise script.
Créez un déclencheur DOM prêt
Dans votre conteneur GTM, allez dans Déclencheurs et cliquez sur Nouveau. Ouvrez Configuration du déclencheur, choisissez DOM prêt, laissez-le se déclencher sur tous les événements, nommez-le et enregistrez.
Ajoutez une balise HTML personnalisée
Allez dans Balises et cliquez sur Nouvelle. Ouvrez Configuration de la balise, choisissez HTML personnalisée et collez le code ci-dessous, avec votre identifiant à la place de YOUR_AGENT_ID. Sélectionnez le déclencheur DOM prêt et enregistrez.
Testez en mode aperçu
Lancez le mode aperçu de GTM, ouvrez votre site dans la fenêtre connectée et vérifiez que la balise s'est déclenchée et que la bulle de chat apparaît dans le coin inférieur.
Envoyez et publiez
Envoyez vos modifications et publiez le conteneur. La bulle de chat se charge désormais sur chaque page où tourne votre conteneur GTM.
La balise HTML personnalisée
<script>
(function () {
if (document.getElementById('intochat-embed')) return;
var s = document.createElement('script');
s.id = 'intochat-embed';
s.src = 'https://www.intochat.ai/api/embed.js';
s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
document.body.appendChild(s);
})();
</script>Ne collez pas dans GTM la simple balise script de l'onglet Share : GTM en retire l'attribut data-chatbot-id. Cette version définit l'attribut en JavaScript et ne charge rien si le widget est déjà présent sur la page.
Ce que fait l'agent sur un site géré avec GTM
S'installe sans déploiement de code
Si votre site charge déjà un conteneur GTM, vous ajoutez, testez et retirez l'agent depuis GTM sans modifier les gabarits du site.
Apprend de votre site
Collez l'adresse de votre site et intoCHAT trouve jusqu'à 500 pages via le sitemap et les liens, affiche les pages en JavaScript avant lecture et vous laisse choisir quoi inclure.
Collecte des leads
Un formulaire dans le chat demande un e-mail ou un numéro de téléphone, selon les règles que vous fixez. Les leads vous sont envoyés par e-mail et s'exportent en CSV.
Exécute des actions sur votre page
Les actions côté client appellent des fonctions JavaScript que vous enregistrez sur votre page, et les actions API personnalisées permettent à l'agent d'appeler votre API HTTP pendant le chat.
Respecte votre charte
Réglez couleurs, avatar, icône du bouton, texte d'info-bulle et position dans intoCHAT. Les changements s'appliquent sans toucher à la balise GTM.
Montre ce que demandent les visiteurs
Lisez chaque conversation avec recherche et filtres par date, et suivez conversations, messages et leads dans le tableau de bord.
Questions fréquentes
Puis-je coller la balise script intoCHAT habituelle dans Google Tag Manager ?
Non. GTM retire les attributs personnalisés comme data-chatbot-id des éléments script dans les balises HTML personnalisées : le widget ne saurait pas quel agent afficher et aucune bulle n'apparaîtrait. Le code de cette page crée l'élément script en JavaScript et définit l'attribut lui-même, ce que GTM ne modifie pas.
Quel déclencheur GTM utiliser pour intoCHAT ?
Utilisez un déclencheur DOM prêt. Le widget ajoute sa bulle au body de la page dès qu'il s'exécute, et DOM prêt se déclenche une fois que le navigateur a construit la page : le body est donc toujours là. Pour n'afficher le chat que sur certaines pages, réglez le déclencheur sur certains événements et ajoutez une condition comme Page Path commence par /support.
Charger intoCHAT via GTM ralentit-il mon site ?
La page ne l'attend pas. GTM charge son conteneur de façon asynchrone, et un élément script ajouté en JavaScript ne bloque pas l'affichage. La fenêtre de chat tourne ensuite dans son propre iframe servi par intoCHAT, séparé du code de votre site.
La bulle de chat apparaît-elle deux fois sur une application monopage ?
Non. Le code vérifie si son élément script existe déjà avant de l'ajouter : si la balise se redéclenche sur la même page, par exemple avec un déclencheur de modification de l'historique, rien n'est ajouté. Une fois chargée, la bulle reste jusqu'au prochain rechargement complet, donc les conditions de page décident seulement où elle apparaît en premier.
Dois-je modifier la balise GTM quand je change l'agent ?
Non. La balise ne contient que l'identifiant de votre agent. Les couleurs, la position, le message d'accueil, les questions suggérées et les connaissances sont chargés depuis intoCHAT à chaque ouverture de page : inutile de publier une nouvelle version GTM.
Mon site a une Content Security Policy. Que dois-je autoriser ?
Autorisez www.intochat.ai pour les scripts, les connexions et les frames. Le widget charge son script depuis ce domaine, y récupère ses réglages et ouvre le chat dans un iframe servi par intoCHAT.
Voyez-le répondre à partir de votre site
Collez l’adresse de votre site et discutez avec un agent créé à partir de vos pages. Cela prend environ une minute.
Créer votre agent gratuitementOffre gratuite, sans carte bancaire.