# Google Tag Manager and Google Analytics 4

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.&#x20;

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**

```javascript
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`

5. Set the trigger to fire on **All Custom Events**.
6. Name the trigger (e.g., `ce - distance_widget_loaded`) and click **Save**.
7. 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`

7. Under **Triggering**, select the corresponding custom event trigger (e.g., `ce - distance_widget_loaded`).
8. Name the tag (e.g., `ga4 - chat_widget_loaded`) and click **Save**.
9. 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.
