Track Tawk.to Chat Engagement in Google Analytics through Google Tag Manager

Posted on by

Tawk.to is getting popular very quickly as a free chat web application. Here’s an easy way to add the service to your website through Google Tag Manager and send an event to Google Analytics when a chat starts.

Let’s begin by adding the Tawk.to widget to our site with GTM. Go to Admin and copy your widget code:

widget-code

Now we’ll create a custom HTML tag in GTM and fire it on all pages.

tawkto-main-tag

This will show the Tawk.to chat pop up on every page of the site.

Let’s add the chat interaction tracking in another custom HTML tag:

tawkto-engagement

Here’s the code I’m using:

<script type="text/javascript">
Tawk_API.onChatStarted = function(){
if(Tawk_API.isVisitorEngaged()){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event': 'chat-started'});
}
};
</script>

There’s also Tag Sequencing setting to fire our main Tawk.to tag before this Tawk.to engagement tag.

And the last tag we’ll create is the GA event tag for chat interaction, which will fire on the chat-started event:

chat-started-tag

We can go to Preview mode and test it. When we started a chat, the chat-started event appeared in the events column of the GTM Debug console and our Chat engagement GA tag was fired:

gtm-debug-mode

We also see the event coming in Google Analytics real-time reports:

events-real-time

From here you can use the event to setup a goal in GA, import it into AdWords or add AdWords / Facebook conversion tracking for the chat interaction activity. Hope you’ll find this useful and try it yourself.

is a Google Analytics fan, who also loves SEO, conversion optimization, online marketing and social media. You can follow her on Twitter and LinkedIn.

39 thoughts on “Track Tawk.to Chat Engagement in Google Analytics through Google Tag Manager”

  1. Hi Margarita

    What is the trigger configuration which allows to fire a tag for chat engadgement?

    Looking for your reply.

    Thanks

    Reply ↓

  2. Hi Margarita:

    I have a question, in the step “Chat engagement (the last one)” in “label” you refer the URL of the page where that chat online is hosted?

    Reply ↓

  3. Hello,

    I am looking for an alternative method that does not include using GTM to place the widget on the site. I tried to setting the Tawk.to engagement tag to fire at an interval, but this did not work.

    Do you know how I could get this to work?

    Reply ↓

  4. Thank you so much! This worked! It took me forever… but after looking at the link in your first comment, that helped dummy old me figure it out!

    I just added the Event as a Goal in GA. I should know if it works soon but for the label, do I do the same: {{Page URL}}
    ?

    THANKS!

    Reply ↓

  7. Hi Margarita,

    When im configuring the last lag (UA)

    The only option I get for a trigger is “All pages”

    I can’t figure out how to put there “chat started”

    Thanks.
    Hernán

    Reply ↓

  11. Hey thank you for the article! The chat-started event is not being pushed for me and I’m thinking maybe it’s because the second tag “Chat engagement” is being fired right away and the user is not yet engaged? (isVisitorEngaged( ) is rendering false)

    Read through the previous comments and looked at the screenshot and everything seems to be setup as shown.

    Reply ↓

  12. Hi Margarita,

    Thanks for the article. Everything seems to be working fine except for when I’m trying to track the “Chat Maximize” on mobile devices. I am unable to trigger this event using the below code. Kindly let me know if there is anything i need to change.

    Tawk_API = Tawk_API || {};
    Tawk_API.onChatMaximized = function(){
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({‘event’: ‘chat-maximized’});
    };

    Reply ↓

  13. Hi Margarita,

    The tracking seems to be working fine for the desktop website, but i am unable to track “Chat Maximize” for mobile users. Can you help me out with this?

    Tawk_API.onChatMaximized = function(){

    This is the function i am using.

    Thanks.

    Reply ↓

  22. Chat engagement tag is not getting fired for my website. Is there any code that I have to use in my website like dataLayer.push(). Can You help me on how to use code in website with sample example?

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *