Google Tag Manager and Google Analytics 4

Google Tag Manager (GTM) and Google Analytics 4 (GA4) capture and track live chat widget events, enabling performance monitoring and insights across your website interactions.

GTM and GA4 allow you to automatically collect data from the Distance live chat widget without manually adding tracking scripts for each event. By configuring GTM with custom triggers for widget events and mapping these to GA4 tags, you can monitor user interactions, measure engagement, and generate analytics reports.

This setup ensures your team gains actionable insights into customer behavior, conversation volumes, and pre-chat activity, helping optimize support workflows and improve customer experience.

Configure the widget with your GTM ID

new WebChatEmbed({
  id: "your-tenant-id",
  googleTagManagerId: "GTM-XXXXXXX"
});

Create GTM Data Layer Variables

Our widget pushes the widgetTenantId with every event. To use this in your tags, you'll need to create a Data Layer Variable in GTM.

1. In your GTM Workspace, navigate to Variables.

2. Under User-Defined Variables, click New.

3. Choose Variable Configuration and select Data Layer Variable.

4. Set the Data Layer Variable Name to widgetTenantId (this name must match the variable name exactly as it appears in the data layer).

5. Name the variable (e.g., dlv - widgetTenantId) and click Save.

Create custom Triggers

The widget fires custom events to the dataLayer that you can use to trigger GA4 tags. Create a custom trigger for each event you want to track:

1. Navigate to Triggers in your GTM Workspace.

2. Click New.

3. Choose Trigger Configuration and select Custom Event.

4. For Event Name, enter one of the widget events:

• distance_widget_loaded

• distance_widget_opened

• distance_widget_closed

• distance_prechat_form_opened

• distance_prechat_form_submitted

• distance_message_sent

• distance_message_received

1. Set the trigger to fire on All Custom Events.

2. Name the trigger (e.g., ce - distance_widget_loaded) and click Save.

3. Repeat this process for all events you want to track.

Create Google Analytics 4 event tags

Now, create a GA4 Event Tag for each trigger to send the event data to your GA4 property:

1. Go to Tags in your GTM Workspace.

2. Click New.

3. Choose Tag Configuration and select Google Analytics: GA4 Event.

4. Select your Configuration Tag (your main GA4 tag). If you don’t have one, create a GA4 Configuration tag first.

5. Set the Event Name (use a clear GA4-friendly name, e.g., chat_widget_loaded).

6. To send the widgetTenantId with the event:

• Click Event Parameters → Add Row

• Parameter Name: widget_tenant_id

• Value: select the Data Layer Variable dlv - widgetTenantId

1. Under Triggering, select the corresponding custom event trigger (e.g., ce - distance_widget_loaded).

2. Name the tag (e.g., ga4 - chat_widget_loaded) and click Save.

3. Repeat this for each widget event, matching the GA4 tag to its respective custom trigger.

Final steps

1. Test Your Setup: Use GTM’s Preview mode to ensure tags fire correctly as you interact with the live chat widget.

2. Publish Your Container: Once confirmed, click Submit in GTM to make the tags live on your website.

3. Register Custom Dimensions in GA4: To view the widget_tenant_id in GA4 reports, first register it as a Custom Dimension in the GA4 interface.

Notes

• If GTM is already installed on your website, the widget detects it and uses the existing dataLayer without injecting a duplicate script.

• Use the widgetTenantId variable to filter or segment analytics by specific widget instances.

• Personal information (name, email, phone) from the pre-chat form is not included in GTM events for privacy reasons.

Tracking widget events in GA4 via GTM ensures your team can measure user engagement, analyze interaction patterns, and optimize live chat performance efficiently.