How to set up tawk.to for Google Analytics tracking with Google Tag Manager

Google Analytics tracking allows you to learn more about your visitors’ behavior on your site and how they communicate with you. You can set up Google Analytics tracking for your widget with Google Tag Manager to track custom events — for example when a chat starts or ends.

Prerequisites

Before you get started, you’ll need to have the following:


  1. A Google Analytics Account and Property
  2. A Google Analytics Data Stream
  3. A tag for the tawk.to widget in Google Tag Manager. If this has not yet been set up, follow the steps in this article: How to add the tawk.to widget with Google Tag Manager

Setting up Google Analytics

How to set up your Google Analytics Configuration

1 - Create a new tag for adding the Google Analytics Configuration Tag. Make sure to rename the tag to your liking (e.g. GA - config).

2 - Hover over the Tag Configuration pane. Click on it, and a new panel will appear.

3 - In the panel, select Google Analytics GA4 Configuration.

4 - In the form, provide the Measurement ID, which can be found in your Google Analytics account.

5 - Hover over the Triggering pane. Click on it, and a new panel will appear.

6 - In the panel, select All Pages to allow the tag to trigger on every page on which Google Tag Manager is installed.

7 - Click on Save to create the tag.

Creating Custom Events For Google Analytics

1 - Create another tag and now select Google Analytics GA4 Event as the Tag Configuration.

2 - In the form, for Configuration Tag select the Google Analytics GA4 Configuration tag we created earlier. For the Event Name, put in the custom event that you want to track. (ex. chat_started).

3 - For the tag’s trigger, we’ll create a custom one. Click on the + button to create. It will open up a new panel for the trigger creation.

4 - In the panel, change the trigger name to your liking (ex. Custom - tawk.to chat started) and click Save. Hover over the Trigger Configuration pane, click on it and another panel will appear.

5 - In the panel, scroll down and select Custom Event for the trigger type.

6 - In the form, input the event name for the custom event that you want to track and click on Save to create the trigger.

7 - Finally, click on the Save button to complete the tag creation.

Setting up a tag for using JS API and a Custom Events trigger

In this section, we’ll provide a sample for triggering the chat_started custom event we created earlier by using the JS API onChatStarted.


1 - Create a new tag and select Custom HTML as the tag type.

2 - In the HTML field, enter the following code block. Do note that the event property’s value should be equal to the Event Name that you inputted earlier when creating the custom event tag.

3 - In Triggering, select All Pages to allow the tag to trigger on every page on which Google Tag Manager is installed.

4 - Click on Save to complete the tag creation.

References

Was this article helpful?

8 out of 9 liked this article

Still need help? Message Us