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

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

  1. Post
    Author
    JustKevin

    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.

  2. Post
    Author
    Coen Boomkamp

    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?

  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
    Zoran Аrsovski

    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

  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
    John Pawson

    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.

  10. Post
    Author
    Congty GiaiCanh

    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 !

  11. Post
    Author
  12. Post
    Author
  13. Post
    Author
  14. Post
    Author
    Jesse Signwin

    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?

  15. Post
    Author
  16. Post
    Author
    Alejandro Medrano

    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"

  17. Post
    Author
  18. Post
    Author
  19. Post
    Author
    Kelsey Burns

    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!

  20. Post
    Author
    David G

    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?

  21. Post
    Author
  22. Post
    Author
  23. Post
    Author
  24. Post
    Author
    glueshake

    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.

  25. Post
    Author
  26. Post
    Author
    Lewis Fantom

    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

  27. Post
    Author
  28. Post
    Author
  29. Post
    Author
  30. Post
    Author
    Alejandro M

    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.

  31. Post
    Author
    Nitesh Sharoff

    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?

  32. Post
    Author
    Nhã Anh Phạm

    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

  33. Post
    Author
  34. Post
    Author
    kajal lodhwal

    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??

  35. Post
    Author
  36. Post
    Author
    Geoff Meakin

    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??>?

  37. Post
    Author
    Ankit Vats

    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

  38. Post
    Author
  39. Post
    Author
  40. Post
    Author
  41. Post
    Author
  42. Post
    Author
    triiidot Google Manager

    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

  43. Post
    Author
  44. Post
    Author
    Nat Green

    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://

  45. Post
    Author
    Gambit8319

    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.

  46. Post
    Author
    Adwords Webmaster

    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?

  47. Post
    Author
  48. Post
    Author
    casade D

    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?

  49. Post
    Author
    Mateo Diaz Critelli

    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!

  50. Post
    Author
    G Putkaradze

    Hello julian,

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

  51. Post
    Author
    Ruby Bui

    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…

  52. Post
    Author
  53. Post
    Author
  54. Post
    Author
  55. Post
    Author
    David Gilbert VO

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

  56. Post
    Author
    Milos Dordevic

    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!

  57. Post
    Author
    tio wu

    I followed all the steps correctly (I think). But the GA event – Tawk.to does not fire in the preview mode when I open and close the chat widget. 🙁

Leave a Reply

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