Chat Events in Google Analytics

Quick links in this article:

1 Sending events to the data layer | 2 Triggers for each chat event | 3 Send events to Google Analytics

In this article, we’ll explore how to setup custom event monitoring in Google Analytics to report on the following Chat events: Chat Opened, Chat Started, Chat Assigned, Chat Finished. To follow this guide you’ll need access to Google Tag Manager for your website.

Please refer to Google Tag Manager directly for additional support on this topic - we’re experts in all-things Gnatta, and can only offer limited advice on external software.

Sending events to the data layer

Before you can send your custom Gnatta chat events into Google Analytics, you first need to set up a custom tag that will push those events into the data layer on your website. You’ll need to create a Custom HTML tag that fires on All Pages (Page View) - or any pages where you want tracking to occur.

Set up a new custom HTML tag to push chat events into the data layer

The code you’ll need is as follows - note there are four ‘Events’ defined here (Started, Finished, Assigned and Opened). Copy and paste this code into the tag, and save it. You don’t need to make any changes!

Optional: You can pass through additional custom information with each event, if you’d like to, using any other variables you have available. We’re passing the ‘Event’ and the ‘PageLocation’ in the below snippet.

<script type="text/javascript">
  var checkInterval = 100; // Check every 100ms
  var maxWaitTime = 10000; // Maximum wait time (10 seconds)
  var elapsedTime = 0;

  var interval = setInterval(function () {
      if (window.gnatta) {
          clearInterval(interval);

          gnatta.on("Started", function () {
              dataLayer.push({
				 'event': 'Started',
				 'pageLocation': window.location.href,
				});
          });
         gnatta.on("Finished", function () {
              dataLayer.push({
				 'event': 'Finished',
				 'pageLocation': window.location.href,
				});
          });
          gnatta.on("Assigned", function () {
              dataLayer.push({
				 'event': 'Assigned',
				 'pageLocation': window.location.href,
				});
          });
          gnatta.on("Opened", function () {
			dataLayer.push({
			 'event': 'Opened',
			 'pageLocation': window.location.href,
			});
          });
      } else if (elapsedTime >= maxWaitTime) {
          clearInterval(interval);
          console.error("Gnatta object not found within the maximum wait time.");
      } else {
          elapsedTime += checkInterval;
      }
  }, checkInterval);
</script>

Triggers for each chat event

Triggers for each new custom chat event

Next, you need to define a trigger for each of the chat events. We’re going to do that using a Custom Event trigger type. Simply create a new trigger, select the type as Custom Event, and then copy the event name from the code snippet above - you’ll need one for each:

Opened
Started
Assigned
Finished

The event name must match the label given in the snippet above. If you make amendments to the snippet, be sure to match your event names appropriately.

We’re setting ours up to fire on All Custom Events for the sake of simplicity.

Send events to Google Analytics

Now that you’re generating events, and listening to them via your custom triggers, you can send that data on to your GA4 account like you would with any other trackable event in GTM! Use the tag type GA4 Event to send the event directly to your Google Analytics account whenever your trigger conditions are met. You can set one up for each event trigger you’ve defined.

Once you’ve done that for each new event/trigger, you should have all of the relevant tags in place.

We’d recommend you use the debugger tool in GTM to test your tags and ensure everything fires as expected. Then when you’re ready, publish the changes to your live site, start a test chat and head to your GA4 account to check your reports!