Mettre en place du tracking sur le chatbot | Base de connaissances client

Comment mettre en place du tracking sur le chatbot

Vous utilisez Google Analytics ?

Une fois le widget de chat (webchat) déployé sur votre site internet, vous aurez certainement besoin de pouvoir tracker des évènements du webchat pour les mettre en corrélation avec d'autres évènements provenant de votre site internet.

Voici quelques cas d'usage :

Savoir si une conversation avec l'assistant virtuel permet d'améliorer la conversion
Comprendre le parcours de l'utilisateur avant qu'il échange avec l'assistant virtuel
Savoir si l'utilisateur a démarré une conversation avec l'assistant avant de recourir à la page contact ou à la page FAQ,

La mise en place :

Le widget de chat étant encapsulé dans une iframe, il n'est pas possible de "capter" directement les actions des utilisateurs. Nous allons pour se faire utiliser le SDK du widget, qui permet d'écouter les évènements basiques tels que :

- Lorsque le widget est ouvert ou fermé
- Lorsqu’une conversation est démarrée.

Les événements du SDK sont documentés ici : https://academy.tolk.ai/kb/guide/fr/sdk-vjmcaSzHed/Steps/785727,785728,785729

L'infâme agissant comme une boîte étanche, le SDK permet donc de faire "transiter" de l'information entre l'iframe et l'extérieur, c’est-à-dire votre site internet.

Vous devrez donc interagir avec le SDK depuis votre site, en chargeant un fichier javascript dans votre site internet directement.

Pour interagir avec ces évènements, voici un exemple d'implémentation dans un fichier nommé tracking_bot.js

function startBotSDKEventsListeners() {

  window.botSDK.onOpenBot(function (e) { 
    console.log('Webchat opened');
  });

  window.botSDK.onCloseBot(function (e) { 
    console.log('Webchat closed');
  });

  window.botSDK.onClosePreonboarding(function (e) { 
    console.log('Webchat preonboarding closed');
  });

  window.botSDK.onDiscussionStart(function (e) { 
    console.log('Discussion started');
  });

}

window.addEventListener('sdk-loaded', startBotSDKEventsListeners());

Si vous souhaitez pour chacune de ces actions créer un événement Google Analytics qui a pour nom "chatbot", nous vous recommandons de créer une fonction commune, appelée buildTag, par exemple :

function buildTag(actionName) {
  window.dataLayer = window.dataLayer || [] ;
  window.dataLayer.push({'event':'chatbot','action':actionName});
}

Vous pourrez ensuite préciser le nom de l'action pour chacun des évènements, comme suit :

function buildTag(actionName) { 
  window.dataLayer = window.dataLayer || [] ;
  window.dataLayer.push({'event':'chatbot','action':actionName}); 
}

function startBotSDKEventsListeners() {

  window.botSDK.onOpenBot(function (e) { 
    buildTag('Webchat opened');
  });

  window.botSDK.onCloseBot(function (e) { 
    buildTag('Webchat closed');
  });

  window.botSDK.onClosePreonboarding(function (e) { 
    buildTag('Webchat preonboarding closed');
  });

  window.botSDK.onDiscussionStart(function (e) { 
    buildTag('Discussion started');
  });

}

window.addEventListener('sdk-loaded', startBotSDKEventsListeners());

Les résultats

Et c'est tout 😎

Rendez-vous ensuite sur votre outil de observer pour bénéficier les résultats.

Pour récapituler

1/ Créer un fichier javascript (par exemple tracking_bot.js) que vous chargez sur votre site.

2/ Dans ce fichier, initialiser le SDK du webchat

3/ Dans ce fichier, créer une fonction permettant d'interagir avec votre système de tracking présent sur votre site internet

4/ Pour chacun des évènements du webchat dont vous avez besoin, personnaliser le nom de l'évènement.