How To Track Freshworks Live Chat With GTM

I was approached by a client recently with a request to track a third-party live chat function on their website. The tool is called Freshchat and is run by the company Freshworks, and it's the standard Live Chat tool you'll find on many sites in the bottom right-hand corner of the screen.

Third-party live chat tools are pretty handy, but they don't always play nice with your GTM and GA, and the Freshworks chat app is no exception. I first tried my hand at click triggers and element visibility triggers to try and create a unique event but had no luck.

GTM had no way of identifying when I was clicking to prompt the Live chat to open.

So I scoured the web for answers, and I managed to come up with a solution using:

1. A custom javascript listener
2. A custom event trigger
3. A trigger grouping

Note: While this tracking solution does work today, it might not work in the future as Freshworks makes changes to it. Also you might not reproduce the same results as I do, so you might need to adjust your triggers based on your data layer.

Creating a custom listener.

The first step in getting your Freshchat to speak to your Google Tag Manager account is to create a bridge between the two, and this is where a custom listener comes in. I managed to find several pages that offered Listeners for this exact issue, but I settled on the following.

Source: GitHub - Knogobert/freshchat.js

If you wish to use their standard version and use your triggers based on the event parameters set in all these custom events, be my guest. It should work just fine; you would simply push every event to your GA using the GeneralEvent custom event and set parameters to capture the event action.

To me, this was a bit of a bother and added additional steps, and the client only wanted to track Live chat opens as a lead, so what I did was customise each GeneralEvent as a custom Event. This makes each click event easier to identify in Tag Manager, and you can set your tags accordingly.

To get started, you can either:

• Edit the custom HTML tag you're using for your Fresha account and paste in this additional code.
• Set up a separate custom HTML tag, paste in the code below with a few changes and set it to fire on either all pages or the pages you have Live chat set up on.

Copy the code below and replace the token section YOUR_FC_TOKEN with the code for your Freshchat account. Also be sure to include an open and close script tag when pasting the code into the tag.

Once the listener is active, go ahead and test your data layer by heading to the preview mode and clicking the live chat. You should see three custom events fire upon click.

1. Live_Chat_User_Loaded
2. Live_Chat_Open
3. Live_Chat_Open

So now you're in a bit of a pickle; how do you create a trigger if the custom event fires twice?

I tried tweaking the code, but I couldn't get it to stop double firing, so I opted for the next best thing, using the entire stack to create one trigger.

Since I know that when I click on the open that the event fires twice, and I can constantly reproduce it, I can use this as a unique event using a trigger grouping.

1. I created a trigger for the Live_Chat_User_Loaded using the custom event trigger.
2. Then I created a trigger for the Live_Chat_Open

If you're unfamiliar with the process, head over to triggers

• Add a new trigger,
• Give your trigger a name - IE Live Chat Loads Trigger and Live Chat Open Trigger
• Select custom event,
• Under event name paste in the custom event - IE Live_Chat_User_Loaded
• Leave it set to all custom events.
• Save the trigger.
• Repeat the process so you have two triggers.

What is a trigger group?

Now, create a trigger grouping.

A trigger group will evaluate the conditions of two or more triggers as one. The trigger group will only fire after all of the selected triggers have fired at least once. If you add more than one instance of a particular trigger, it will need to fire the corresponding number of times before this trigger group will fire.

To create a trigger group:

1. Click Triggers New.
2. Click Trigger Configuration and choose Trigger Group.
3. Give trigger grouping a name.
4. Click and select two triggers you have already created.
5. Click Add.
6. Click Save.

Creating the live chat tracking tag

Now you have all the elements in place; you can go ahead and create the GA4 tag.

1. Create a new tag
2. Give the tag a name - Live Chat Open Tag
3. Select the tag type GA4 event
4. Select your GA4 configuration tag
5. Give the event a name IE - lead_live_chat
6. Select the trigger grouping you named and created earlier
7. Click save.

After all that, the last step would be to go back to your GTM, select the preview mode and test that your trigger grouping fires correctly and that you only have one event passing to GA4.

Note: This method above is only for those interested in tracking the live chat open on the first try. If you want more granular tracking, please reach out to us, and we can build a custom set-up for you.

Contact us

If you want to know more about digital marketing or feel this entire GA thing is too much of a bother and you need it sorted by experts, then we’re happy to assist. Simply contact us, and we can sort out your data migration for you.

Are you looking to promote your business?

Business owners can create their free business listing on nichemarket. The more information you provide about your business, the easier it will be for your customers to find you online. Registering with nichemarket is easy; all you will need to do is head over to our sign-up form and follow the instructions.

If you require a more detailed guide on creating your profile or listing, we highly recommend you check out the following articles. 

• How to create a nichemarketer profile 
• How to create a nichemarket business listing 

Recommended reading

If you enjoyed this post and have a little extra time to dive deeper down the rabbit hole, why not check out the following posts about Google Analytics?

• How To Track Social Sharing In Google Analytics
• Get Back Your Google Analytics Account With These Simple Steps
• How To Properly Set Up Google Analytics With Shopify Sites
• Google Analytics Interaction Hit Vs Non-Interaction Hit
• How To Track Video Views With Google Analytics
• How To Track Search and Zero Search Queries In Google Analytics

Tags: Tracking, Data Analytics, Big Data