Welche Möglichkeiten es gibt, in der Client-Side-Schnittstelle Insights zu generieren und wie eine Implementierung funktioniert
Zusätzlich zu der Erfolgsmessung im moinAI Hub können Interaktionen von Websitebesuchern mit dem KI-Chatbot in bestehende Analysen z.B. der Customer-Journey auf der Website miteinbezogen werden.
Wie häufig wird das Widget geöffnet? Welche Buttons klicken die Nutzer während der Konversation am meisten – Quick Replies, das Karten-Menü oder Links? Wie oft haben Nutzer gestern etwas in das Textfeld eingegeben? All diesen Fragen und noch mehr kann mithilfe der Client-Side-Schnittstelle (API) auf den Grund gegangen werden.
Die Darstellung der Daten hängt davon ab, welches Tool für das Auswerten von Nutzerverhalten verwendet wird. Mögliche Tools dafür sind beispielsweise Mixpanel, Google Analytics oder Adobe Analytics. Um damit zu starten, müssen lediglich wenige Zeilen Code integriert werden. Dies funktioniert schnell und einfach, z.B. mit dem Google Tag Manager.
Technische Dokumentation
Für das Tracking von Nutzerinteraktionen in Google Analytics stehen in der Client-Side-Schnittstelle passende Events bereits, die z.B. in Google Analytics genutzt werden können. Mit Hilfe dieser Events können Interaktionen getrackt werden.
Das moinAI Chat-Widget sendet die folgenden Events (inkl. Beispielcode). Diese Angaben sind auch in der technischen Dokumentation hinterlegt.
widget.interaction
- widget open / close state
- teaser interactions: Teaser close, click on teaser buttons
{"event_type":"widget.interaction","source":"teaser","action":"button_click","text":"Frage stellen"}{"event_type":"widget.interaction","source":"teaser","action":"close_teaser"}
user.click
clicks on conversation items
- buttonlist links
- card buttons
- quick replies
{"event_type":"user.click","source":"quickreplies","text":"Rufnummernmitnahme"}
user.input
- user input message text
{"event_type":"user.input","message":{"message":"test"}}
Es ist möglich den Beispielcode in der GA Testumgebung zu nutzen und dann dort mit dem Chatbot zu interagieren, um zu sehen, welche Ereignisse ausgelöst werden.
Hier der Code, mit dem auf die oben genannten Events gehorcht werden kann bzw., sich auf die Events registriert werden kann:
<script>
window.chatWidgetReady = function() {
console.log('chatWidgetReady function');
window.knowhere.api.on('widget.interaction', function (data) {
console.log('CUSTOMER EVENT WIDGET HANDLER', data)
})
window.knowhere.api.on('user.click', function (data) {
console.log('CUSTOMER EVENT CLICK HANDLER', data)
})
window.knowhere.api.on('user.input', function (data) {
console.log('CUSTOMER EVENT INPUT HANDLER', data)
})
}
</script>
Beispiel
Eine Aktion ausführen bei jedem user click (button, quickreply):
Mehr dazu in der Google Analytics Dokumentation.
<script>
window.chatWidgetReady = function() {
window.knowhere.api.on('user.click', function(data) {
// HIER TRACKING EINFÜGEN
// z.B. Google Analytics, angenommen chatbot-click ist definiert:
// ga('send', 'chatbot-click');
})
}
</script>
Hinweis zur Nutzung von mehreren API-Funktionen
Die chatWidgetReady function kann nicht mehrfach aufgerufen werden. Bei der Nutzung von mehreren API-Funktionen wie z.B. Client-Side-Tracking & ein manueller Widget Teaser muss ein Gesamt-Skript integriert werden:
<script>
window.chatWidgetReady = function() {
console.log('chatWidgetReady function');
window.knowhere.api.on('widget.interaction', function (data) {
console.log('CUSTOMER EVENT WIDGET HANDLER', data)
})
window.knowhere.api.on('user.click', function (data) {
console.log('CUSTOMER EVENT CLICK HANDLER', data)
})
window.knowhere.api.on('user.input', function (data) {
console.log('CUSTOMER EVENT INPUT HANDLER', data)
})
window.knowhere.api.teaser({
showTeaser: true,
showAvatar: true,
message: 'Wie kann ich Dir helfen?',
quickActions: [{
text: 'Frage stellen',
intent: 'start'
},
{
text: 'Beispielthema',
intent: 'faq_beispielthema'
}
],
timeout: 2000
});
}
</script>