Track web chat events in Google Analytics using Tag Manager

The web chat widget offers a number of events that can be tracked in Google Analytics (GA4), which is useful when looking at your website’s engagement and attributing web chat engagement to other efforts of your marketing like organic, social, or ads.

• When a user clicks the FAB to open or close the web chat widget on your website
• When a new conversation is started
• When a user clicks the Send button, sends a message
• When a new lead is captured
• When a meeting time is chosen (Upcoming event for a future feature)

Follow the steps below to add a web chat widget to a website and track events from the widget with Google Analytics.

To begin, you will need to have a Google Analytics account, and Google Tag Manager will need to be installed on your website. 

Step 1 - Install the web chat via Google Tag Manager

To get the web chat widget on your site, it must be  added in Google Tag Manager. In Google Tag Manager, under Tags, add a new Custom HTML Tag that includes the widget script. The script is located in your web chat configuration in Partner Center or Business App. The trigger for this tag should be Initialization - All Pages so the widget loads on every page of the site.

Step 2 - Install Google Analytics with Tag Manager

In Google tag manager, under Tags, add a new Tag.

• The tag configuration should be Google Analytics > Google Tag.
• Your Tag ID should be the ID of your Google Analytics container. You can find this in the Google Analytics dashboard.
• The trigger should be Initialization - All Pages.

Step 3 - Adding Triggers

The web chat has numerous events that will occur when an action happens with in the web chat. 

You can use Google Tag Manager triggers to send these events to Google Analytics.

• In Google Tag Manger, go to the Triggers tab and add a new trigger. The trigger configuration should be Custom Event. The Event name should match the Event Key of the event you want to track in the table above.

• Add all the events you want to track

Step 4 - Tracking Web Chat Events

Finally, to track the new events we have added in our Triggers we need to add one last Tag to our page. Go back to the Tags tab and a new tag.

Tag Configuration

• The Tag Configuration you will need to add is under the Google Analytics, add the Google Analytics: GA4 Event tag type.
• The measurement ID should be the same ID you used for your Google Analytics Tag ID in step 2.
• The event name Event Name, can be set to {{Event}} where it will use the name of the trigger event.'

Triggering Events

Below the Tag Configuration you can add triggers that will trigger this G4A Event. When you add triggers you will see a list of triggers that were created in step 3.

Add all the triggers that you’d like to cause this event to fire. Your final configuration should look like:

Testing

Google Tag Manager

To test that everything is working you can press the preview button at the top of the page.

This will take you to the Google Tag Manager preview screen. You should also see your website open in a new tab. You can now interact with your web chat and see if the events are coming in to Google Tag Manager.

If things are working correctly you will see that the events succeeded.

Google Analytics

The last thing to check is that you are seeing events in Google Analytics. Go to your Google Analytics dashboard. Under Admin > Data display there is a DebugView, in this view you should be able to see any incoming events. If everything is working correctly you will be able to see the new events coming into Google Analytics.

You should also be able to see the new events in your Realtime overview.

Once you have tested that these events are coming in to Google Analytics you can now save and publish your changes to Google Tag Manager so your site can start tracking these new events.

Copy to Multiple Client Accounts

If you want to use this same setup for multiple businesses, you can easily duplicate your Google Tag Manager (GTM) setup, including tags, triggers, and variables, to other accounts or containers using the GTM container export/import feature.

To export your GTM container:

1. Open Your GTM Account: Log into your GTM account and select the container you’ve configured with your tracking setup.
2. Export the Container:
   • Go to Admin (in the top navigation).
   • Under the Container column, select Export Container.
   • Choose the container version you want to export (select the latest version if you’re exporting recent changes).
   • Click Export and save the .json file to your computer. This file contains all the tags, triggers, and variables in your GTM container.

To import the container to another GTM account:

1. Log into the Target GTM Account:
   • Open the GTM account or container where you want to duplicate your setup.
2. Import the Container:
   • Go to Admin.
   • Under the Container column, select Import Container.
   • Choose the .json file you saved during export.
   • Select Existing or New container, depending on whether you’re importing into an existing container or creating a new one.
   • Choose Merge: This allows you to add the imported items alongside existing ones (you’ll be prompted to resolve any conflicts).
   • Review the Summary screen to confirm the import details, and click Confirm.
3. Update Client-Specific Details:
   • After importing, update all client-specific details.
   • Google Analytics measurement IDs (two locations), and the web chat code.
   • Test the configuration in Preview Mode to ensure everything is correctly set up for the client’s site.

Additional Tips:

• Version Control: Save your configurations as versions in GTM, so you have an easy rollback option if needed.
• Use Variables for Easy Configuration: If you have client-specific details, use GTM variables so you can easily update them per client site without modifying each tag.
•