Tawk.to Chat Event Listener

Google Tag Manager and the Tawk.To chat event listener makes it easy to push Tawk chat activity to your analytics tools (Google Analytics, Heap, Mixpanel, Amplitude, Fullstory, etc.). Having the Tawk.To chat interactions data, you can improve your customer support strategy and increase the impact on your business KPIs.

How to track Tawk.to Chat Interactions with google tag manager

Tracking Tawk.to chat interactions in your analytics tools give you valuable insights into the impact these chat interactions have on your marketing funnel, conversions, and other business KPIs.

To implement the Tawk.to chat activity tracking, you’ll need Google Tag Manager and the Olark chat event listener javascript code.

To begin, create a custom HTML tag where you’ll paste the event listener code and fire it on pageview or DOM ready (always recommended).

💡PRO TIP: if you installed the Tawk.to chat script through Google Tag Manager, please use the DOM ready trigger instead.

What the Tawk chat event listener does, is to fire an event on every interaction with the Tawk chat widget.

The next step in this implementation is to create a custom event with the event name of [tawkto_Interactions], which gets fired on all chat activity

To get more information on what chat activity happened, you’ll need to create a dataLayer variable with the key [chatInteraction]

[chatInteraction] returns the following event description;

chat conversation started
chat ended by user
prechat form submitted
offline form submitted
Tawk.to chat widget minimized
Tawk.to chat widget maximized
message is sent by the visitor
message is sent by the agent
message is sent by the system
chat experience rate
file uploaded by visitor

You can use the [chatInteraction] dataLayer variable as event parameters or for streamlining your trigger to fire on specific Tawk.to chat interactions.

Also, you can create the following dataLayer keys to capture chat session ID and chat widget ID;

[chatSessionId] –> returns the chat sessio ID

[chatWidgetID] –> returns the widget ID

To push the chat activity data to your analytics, you’ll have to create the appropriate tags, connect your trigger and use the dataLayer variables you created to push more information about each Tawk.to chat interaction.

🏆 Credit: This event listener was created by Lucidgen, with little modifications done by the DumbData team

<script>
Tawk_API = Tawk_API || {};
var dlpush = function(a) {
dataLayer.push({
event: "tawkto_Interactions",
chatInteraction: a,
chatSessionId: Tawk_Window.sessionManager.sessionInformation,
chatWidgetID: $_Tawk_WidgetId
})
};
Tawk_API.onChatStarted = function() {
dlpush("chat conversation started")
};
Tawk_API.onChatEnded = function() {
dlpush("chat ended by user")
};
Tawk_API.onPrechatSubmit = function(a) {
dlpush("prechat form submitted")
};
Tawk_API.onOfflineSubmit = function(a) {
dlpush("offline form submitted")
};
Tawk_API.onChatMinimized = function(a) {
dlpush("Tawk.to chat widget minimized")
};
Tawk_API.onChatMaximized = function(a) {
dlpush("Tawk.to chat widget maximized")
};
Tawk_API.onChatMessageVisitor = function(a) {
dlpush("message is sent by the visitor")
};
Tawk_API.onChatMessageAgent = function(a) {
dlpush("message is sent by the agent")
};
Tawk_API.onChatMessageSystem = function(a) {
dlpush("message is sent by the system")
};
Tawk_API.onChatSatisfaction = function(a) {
dlpush("chat experience rate")
};
Tawk_API.onFileUpload = function(a) {
dlpush("file uploaded by visitor")
};
</script>