How to install and track Live Chat App Tawk.to with GTM


– In this video, I’m going
to show you how you can use tawk.to, a free chat
widget for your website, to engage your customers and measure your interactions with them. All and more coming up right after this. (driving electronic music) Hi there, and welcome to another video of measureschool.com, where we teach you the data-driven way of digital marketing. My name is Julian, and on this channel, we publish tutorials, how-to videos, and take a look at new marketing
tech just like this one. So if you haven’t yet,
consider subscribing. Now recently, I was on the
lookout for a new chat tool that we can easily integrate
on measureschool.com, and also track the
interactions with this widget. Thanks to viewer Matthew,
I gave tawk.to a go. It’s quite a little, powerful chat widget that you can install
through Google Tag Manager, which I’m a big fan of, but
most importantly, it’s free. So I thought I’d make a quick
tutorial on what is possible with this little piece of marketing tech. We’ve got lots to cover, so let’s dive in. Today, our journey starts here
at the homepage of tawk.to, which you can find at tawk.to. And here’s where you can sign up for completely free chat
solution of tawk.to. This will, in the end, look
a little bit like this, where you have a chat window where you can also initiate a chat. So once you sign up, you will be greeted with the dashboard of tawk.to and the embed code that you
need to install on your website to get this little chat
widget onto your website. Now, tawk.to has a lot
of different integrations with different CMS
systems, so if you want to just install this via an
extension or a plugin, you would be able to do this, as well. Please check back with
their knowledge base to see if there’s an extension available. But since this is JavaScript,
we could also install this via Google Tag Manager on our website, which is my preferred
method of doing things. So I would, for example,
just copy this code and look onto my website, where I already have Google
Tag Manager installed, go over to my Google Tag Manager account, create a new tag, give it a name, choose the custom HTML option, put our code in here, and define a trigger where I want to essentially enable this widget. Then save this, and we
can try this all out by going into our preview in debug mode. Back to our page, let’s reload this. And our preview in debug mode
obstructs a bit of our view, but we can click on this little
arrow here, and we see that a chat widget has been
installed onto our website. We can try this out. And we see that there’s
a new message here. Somebody just wrote us. We can join this conversation
and chat with our user. So this seems to be working really well, and just in a few
seconds, we have installed a chat solution on our website. Now, the tawk.to interface gives you a lot more
customization options, such as the appearance of the widget, but also, can you program
in certain triggers, for example, if the user has visited two or three of your
pages, you would be able to actively open up the chat window and start chatting with him, which is great for proactive
engagement with your user. So there are a lot of different options within the interface, that there’s also a
JavaScript API available. And this JavaScript API features different customizations that
you can implement for the code and then be able to pick up certain events or push certain actions, like opening up the chat
window automatically through a JavaScript call. So what would this look like? I have made a little demo here that you can download under
measureschool.com/chat, and you’ll be able to
download our template, which will let you
install tawk.to-specific tags and variables that we have created. So just go to Import Container, and choose the file
that you want to import, then choose your workspace, and if you’re not sure if
this would overwrite anything, just go with the merge option here and the rename conflicting
tags, triggers and variables. Then you can confirm that. I have already done this. So in the end, you will get new tags, variables, and
triggers into your account. All you need to do then is go onto the main tawk.to
widget tag that we have here and implement your tawk.to embed code. So let’s go back and find
our tawk.to embed code, copy that, go back to our Tag Manager, and paste this in. The

Comments 57

  • Another great video. Well done.
    I sent you an email hoping to get some time (paid of course)
    Need help cleaning up our revenue tracking and referral issue.

  • Hey Julian,
    Nice video, really usefull!

    Thing is, here i read that it is not permitted to push personal data into the datalayer:
    https://wordpress.org/support/topic/advanced-matching-pulling-email-to-datalayer/

    What are your thought on that?

  • Dude, you're on a roll. Nice video, love it.

  • the bad side of it is if people are using ad blockers, none of this would work :/

  • You're a life saver! Thank you so much 🙂

  • Hey Julian,
    Great video thanks! I wonder is there a way to extend the tag to collect data when visitor starts a chat (types in something)?

    Thanks,
    Zoran

  • Thank you Julian, what an excellent video!

  • What are assets?

  • Hey thanks for the info. I need a bit of support, are we able to track different events than simply chat window open/closed in GA? Specifically I'm looking to track when someone enters their info or initiates the chat itself (so that I can track true engagement rather than those that might just be clicking to see what it does!) I'd like to then to use that as a Goal within Analytics and import into Adwords to track. Thanks Julien, great tutorial.

  • I see double code in file "tawkto.json" :

    Tawk_API.onChatStarted = function(){
    dataLayerPush("Chat Started");
    };
    Tawk_API.onChatStarted = function(){
    dataLayerPush("Chat started");
    };

    It wrong or correct ? thank you so much !

  • Hi., nice videos. How can i pin tawk.to live chat to my wix mobile

  • Whoa! Very Helpful. Can you tell me how can i use chat window open in Goals?

  • Thanks, Julian!

  • Great tutorial video for Tawk.to, thank you Julian, but why I am clicking Get Access on https://measureschool.com/chat , the window is stuck and doesn't show my any access or something?

  • Youre alife sevr! Thank you so much

  • hello give me this error when I import the container "the entry is not valid. You may have inactive data; refresh the page and try again"

  • Great stuff again Julian, you da man!

  • how can i record the events as goals?

  • Hey Julian – can you help me out? I've followed this video to track tawk.to chat data in google analytics, through google tag manager. I got almost all the way through the process, but when I went to our google analytics to check everything (as you do around 6:21), I have no events, just empty. It's not sending any events over to Google Analytics.

    Am I supposed to set up these events manually? Or should the tag manager process I followed automatically set these up? Please help!

  • Thanks for the video. I subscribed and downloaded your import. However, there seems to be an issue with the event. If Tawk.to is offline, as soon as I load the page an event fires saying the chat window closed. Is there a way to not trigger that event if it's offline?

  • Thanks so much 🙂

  • Thanks Julian, really good video – just what I was looking for 🙂

  • Hey julian where can I find the template? the page in not working anymore?

  • Great video! I was looking for a solution like this but I couldnt find it anywhere but here.

    Just wondering if I can get the template. I already signed up but didnt received anything.

  • Thanks measureschool!

  • Tawk.to Template: https://measureschool.com/chat – doesn't work. Can u fix it?

  • Hey Julian, Do know if Tawk.to expose a user ID / Chat ID that can be used in the dataLayer? This would be used in the aim of trying to link a users source/medium with the offline eventuality of the chat. Example: A user becomes a lead in the CRM as result of a chat conversation. Is there anything we can use to link the user behavior both online and offline?

    Many Thanks

  • How to connect tawk to android app?

  • Thank you! Helped me out a lot.

  • Hi!! How can I track my revenue that were directly impacted by the chat?

  • Hello Julian, I want to track tawk.to with google analytics, I already changed the GA- Id in GTM to mine, I see the events in dataLayer, but I have no events in google analytics, what do you suggest me to do? Thanks for the video.

  • Hey Julian, thanks for the video! I wanted to find out about pushing user information into the data layer. From what I hear we're violating GTM's privacy policy, is that right?

  • Tks for your video can you guide how to set conversion in GA for visitors only who chat. I set Goal as follow Category:Tawk.to –Action: {{dlv – eventAction}} but i check conversion In GA, it not work. Pls help me

  • how did you get your name at the top of the tag?

  • This tool also give the location of user in chat box but how is that possible when I open my website on my PC the location shows on tawk of bhopal while I am in Indore….. Is this tool shows the wrong location of users?? or there is another reason??

  • very good

  • Hi Julian, signed up, confirmed email etc etc but the resource it took me to was a video about tracking redirects – not installing Tawk.to with GTM. Any thoughts??>?

  • This is good Julian, but not sure how we can resolve the cross domain tracking in tawk.to – see error
    https://res.cloudinary.com/embroiderydigitizer/image/upload/v1537897594/Random%20Images/issue_tawk_to_duplication.png

  • julian the url https://measureschool.com/chat is broken, i don't know where i can find tawto.json

  • this has stopped working for offline messages

  • Its great? Can you please tell how to track any other live chat box?

  • Gracias excelente aporte me sirvio mucho!

  • Great Video!
    I implemented (without having programming skills) your code to a customer website and it works perfect.
    Just one Question: I realized you used this code element two times (tawk.to – Widget – All Pages):
    Tawk_API.onChatStarted = function(){
    dataLayerPush("Chat started");
    Is there any need for that?
    Regards from Liechtenstein
    Dan

  • hi . my tags are not firing

  • Thanks so much for all your videos. I've learned so much about Google tag manager from you today. One question though… I am trying to install Tawk.to on pages that are in my sales funnel only (not all of my pages) and for some reason the tawk.to widget wouldn't show up.

    When I changed the trigger from the select few sales pages to a trigger that was for all pages it works right away. Any idea why that would be?

    The two pages were my homepage and my shopping cart page, both of which I pasted the full URL beginning with https://

  • Is it possible to track event based on duration chat window is open? For example we can set a goal conversion based on 5 minutes the chat is open thereby high probability its a lead.

  • Hi, it did work but my questions is when I tested it only encountered the events for the 1st time and from 2nd time it snot showing anything, for the 1st time, it shows chat opened, closed, started and ended and when I tried again from another browser, internet, and device, there is nothing in real-time events. May I know where I am missing something?

  • did everything. I'm thinking I'd need to embed good tag manager to my website first tho right?

  • Hi Julian! Thank you for the video.

    You only showed one user. Let's say I want to offer my customer support services to some sites, can you tell me how that usually happens?
    Would I have to install the code for them, or do they do it themselves? Do you think that would be an obstacle for them?

  • Thanks for the video Julian! I was wondering if there is any simple instructions on how to do this same event tracking via GTM but for other chatbots with API integrations. I am unable to find this!

  • Hello julian,

    I done everything, i see in google tag manaager that triggers is activating, but I can't see events in analytics

  • Hello julian,

    Thank you for your video, you can help me a problem, how to install tawk.to in my AMP website? because AMP website stop javascript or block code js? waiting you…

  • How to set anyother profile pic instead of flag picture ?

  • Could you help me that how to set up a chat tracking in tag manager

  • How we can do with other chat software like zendesk or Jivo chat. We are using zendesk from last 5 years

  • Very cool! Thanks for sharing! Unfortunately, my analytics window doesn't show any events after following your steps. Any ideas? Thx.

  • I noticed people often make a mistake when updating the Analytics ID in the Analytics Event Tag. You need to set the destination GA property which will receive those events. You can use 2 options to do that:

    1. You can enter the tracking ID (UA-XXXXXXX-XX) in the Tracking ID field
    or
    2. You can set that ID in the Google Analytics Settings Variable and then pick that variable in the designated field within Universal Analytics Tag.

    The tag will work fine either way. But, some people tend to mix them those two and break the tracking by doing so. The most common mistake is to insert a Google Analytics Settings Variable in the Tracking ID field and that will never work.

    – The tracking ID field supports only values with the following format: UA-XXXXXXX-XX.

    – Google Analytics Settings Variable must be inserted ONLY in the GA Settings drop-down.

    Good luck!

Leave a Reply

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