21

Set up Universal Analytics for tawk.to

Google’s Universal Analytics lets you track and analyze activity for a tawk.to widget on your site. You can set this up using the Global Site Tag or Google Tag Manager


Let’s walk through the steps for each setup.


Related: Learn how to set up Google Analytics 4 for tawk.to in this article: How to set up tawk.to for Google Analytics tracking.

Setting up analytics via the Global Site Tag

To set up Google Analytics using the Global Site Tag, you’ll first need to install the tag.


From your Google Analytics dashboard, make your way to AdminTracking InfoTracking Code and look for the Global Site Tag (gtag.js) section.


Follow the instructions on the page to install the Global Site Tag on the website you want to track.

Set up the tawk.to widget on your site

You can add the tawk.to widget simply by pasting a small snippet of JavaScript code on your site.


To find the widget embed code, log in to your tawk.to Dashboard. If you have multiple properties, check to make sure you're currently viewing the correct one by hovering over the hamburger icon at the top of the Dashboard.


Then make your way to AdministrationChat Widget and copy the Widget Code.


Paste the Widget Code before the ending </body> tag of your web page.

Events setup

Overview

To send custom events to Google Analytics, we’ll use the gtag() function that was loaded from the Global Site Tag(gtag.js).


For more information about how to send custom events to Google Analytics, this Google Developers guide provides a good reference: gtag.js send events.

Use the Global Site Tag with tawk.to JS API Callbacks

We can use tawk.to’s JS API callbacks with the gtag.js send events function to track custom events based on each of the callbacks available.


Here are some examples of how to use it with the available callbacks.


If you’ll be using these examples, we recommend adding the gtag.js to your Widget Code as shown.

OnChatStarted

OnChatStarted

OnChatEnded

OnPrechatSubmit

OnOfflineSubmit

Setting up analytics via Google Tag Manager (GTM)

Widget Setup with GTM

Get the widget code

To get the widget embed code, go to your tawk.to Dashboard. Then make your way to AdministrationChat Widget and copy the Widget Code.

Add the Widget Code

To add the widget to your website using Google Tag Manager, we’ll first need to create a Custom HTML Tag.


To get started, log in to Google Tag Manager and select the website you want to track.


From the Dashboard, click Add a New Tag.


A new panel will appear. Select Tag Configuration and search for Custom HTML.


Selecting Custom HTML will open a new HTML textarea. Paste the Widget Code there. 

Next, select Triggering and choose the All Pages trigger. Update the tag name and click on Save to confirm your new Custom HTML Tag.

Events Setup (for advanced users)

To track Google Analytics events in GTM, we’ll be utilizing a feature called the Data Layer.


For more information, see Google’s explanation in their Developer Guide: Using a Data Layer.


Here’s an illustration showing how it works:

Basically, the website pushes data to a data layer variable which is read by GTM and transformed into tags/triggers/variables. GTM then feeds that data into Google Analytics.

Track events with tawk.to JS API Callbacks

To track events, we’ll be pushing data to the data layer with tawk.to’s JS API callbacks. Here's how we'll set this up:


1. Create a variable for the following:


     a. To read the event from the data layer.

     b. To read the eventAction from the data layer.

     c. To configure Google Analytics Settings across multiple tags.


2. Create a trigger that will fire the tag for Google Analytics: Universal Analytics event tracking when a tawk.to event happens.


3. Create a tag for Google Analytics: Universal Analytics to track events.


4. Modify the Widget Code Custom HTML tag to include the JS API Callbacks.

Creating variables

To create a variable, head over to your GTM dashboardVariables User-Defined Variables. Then select New.

Read event from the data layer

1. In the panel, click on Variable Configuration and select Custom Event


2. Set the DataLayer Variable Name to “event,” change the variable name and click on Save


3. The variable name should be strictly equal to the data that is present in the data layer, which in this case, is “event.”

Read eventAction from data layer

1. In the panel, click on Variable Configuration and select Custom Event


2. Set the DataLayer Variable Name to “eventAction.” 


3. Change the variable name and click Save. The variable name should be strictly equal to the data that is present in the data layer, which in this case, is “eventAction.”

Google Analytics Settings

1. In the panel, click on Variable Configuration and select Google Analytics Settings


2. Next, go to ➞ Admin Tracking InfoTracking CodeTracking ID


3. Copy the Tracking ID


4. Then, paste it into the Tracking ID field, change the variable name and click Save.

Creating a tawk.to event trigger

1. Head over to your GTM dashboardTriggers New


2. In the panel, click on Trigger Configuration and select Custom Event


3. Change the trigger name to “tawk.to” and click Save. The trigger name should be similar to the “event” value in the data layer which we’ll set as “tawk.to” later when we add the JS API callbacks.

Creating a Universal Analytics event tracking tag in Google Analytics

1. Head over to your GTM dashboardTags New.


2. In the panel that opens, click on Tag Configuration and select Google Analytics: Universal Analytics. For Track Type, select Event.


3. Set the Event Tracking Parameters, to the following values:


     a . Category — event data layer variable

     b. Action — eventAction data layer variable


4. For the Google Analytics Settings, select the Google Analytics Settings variable we created earlier.


5. Next, click Triggering and choose the tawk.to trigger we created earlier.


6. Change the name of the tag and click Save.

Add JS API Callbacks to the Widget Code

1. Head over to your GTM dashboard.


2. Select Tags and find the Widget Code Custom HTML you added earlier. 


3. In your Widget Code, add the JS API callbacks as shown below:

Here are some examples showing how to push to the data layer using tawk.to’s JS API callbacks:

OnChatStarted

OnChatEnded

OnPrechatSubmit

OnOfflineSubmit

Was this article helpful?

4 out of 8 liked this article

Still need help? Message Us