Step 1: Create a free account on tawk.to chat software

Visit the tawk.to software homepage to create an account. Tawk.to will automatically send an email containing a script code to attach to your website so that tawk.to can operate on the website.

You can visit tawk.to to get the code if you don't receive the email.

Admin Access

Fill in website information

Click create

Proceed to fill out registration information

Step 2: Install tawk.to on your website using Google Tag Manager

Access your Google Tag Manager account
Create new tag: custom HTML tag type
Trigger select All pages

conversion settings

Paste the following code and replace ” https://embed.tawk.to/5916947b64f23d19a89b1f60/default ” with your code in the tawk.to generated code.

If you can't see the content, please like the page to continue viewing. Thanks!

[sociallocker id=”20715″]

//paste your Tawk embed code here, without Script tags

var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();

(function(){

var s1=document.createElement(“script”),s0=document.getElementsByTagName(“script”)[0];

s1.async=true;

s1.src='https://embed.tawk.to/5c527c74ab52840489/default';

s1.charset='UTF-8′;

s1.setAttribute('crossorigin','*');

s0.parentNode.insertBefore(s1,s0);

})();

// Event Listener function section

// This will push predefined events exposed by the Tawk.to API into the dataLayer, which can be picked up via Google Tag Manager and forwarded onto any Tracking software, which can be connected to GTM

var dataLayerPush = function(event){

dataLayer.push({

'event': 'tawk.to',

'eventAction': event

});

console.log({

'event': 'tawk.to',

'eventAction': event

});

}

Tawk_API.onChatStarted = function(){

dataLayerPush(“Chat Started”);

};

Tawk_API.onChatMaximized = function(){

dataLayerPush(“Chat Window opened”);

};

Tawk_API.onChatMinimized = function(){

dataLayerPush(“Chat Window closed”);

};

Tawk_API.onChatHidden = function(){

dataLayerPush(“Chat Window hidden”);

};

Tawk_API.onChatStarted = function(){

dataLayerPush(“Chat started”);

};

Tawk_API.onChatEnded = function(){

dataLayerPush(“Chat ended”);

};

Tawk_API.onPrechatSubmit = function(data){

dataLayerPush(“Prechat form submitted”);

};

Tawk_API.onOfflineSubmit = function(data){

dataLayerPush(“Offline Chat submit”);

};

[/sociallocker]

Step 3: Tracking chat start events, pre-chat information, offline chat tawk.to

3.1 Create data class variable to record events

Left menu select variable.
Variable type selects the data class variable.
Variable name eventAction (In the above code dataLayer.push({ 'event': 'tawk.to', 'eventAction': event }); push the event with the name tawk.to)
Name and save the variable.

How to set up tag conversion using Google Tag Manager 05

3.2 Create a trigger to fire the tawk.to event

Left menu select trigger
Create new trigger
Trigger Type: Custom Event
Activator Name: tawk.to
Name and save

Instructions for setting up tawk conversion using google tag manager 06

3.3 Create a tag to push tawk.to chat events to Google Analytics

Left menu select tag
Create new card
Tag Type: Universal Analytics
Category: tawk.to
Action: {eventAction} variable you just created you can click + next to it to show the list of variables.
Label: You choose Page Path to know which post on the website the customer chats on.
Google Analytics settings: select GA variable if you have not created a variable you can click on select setting variable and create new one
Trigger selected: Tawk.to Trigger (trigger just created)
Name the card and save the card.

How to set up tag conversion using Google Tag Manager 07

3.4 Check if tawk.to chat conversion event settings are working?

Select preview in Google Tag Manager

Go back to your website and try chatting and see if the tawk.to GA tag is working as shown below. If it is working, you have successfully installed it.

Annotation 2019 10 21 115909

3.5 Setting up tawk.to chat events in Google Analytics

Access your account Google Analytics
Left menu Analytics select administration
Select Target and create new
Goal Setting: Custom
Goal Description: Name and select the event
Target details: category -> tawk.to (same as you set when creating tag in Tag Manager)
Save target

install gold

You wonder why you don't fill in tasks and labels like in Google Tag Manager. While creating the tawk.to chat event tag, you create tasks and labels using variables. You can review the first code when creating the tawk.to tag. The task will have 3 different events: start chatting, fill in the form before chatting, fill in the form when you are offline. Instead of having to create 3 different tags according to the 3 events above, I create variables to temporarily store and then push to analytics.

Instructions for setting up tawk conversion using google tag manager 10