> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use Google Tag Manager to track Crisp events in Google Analytics 4

__Learn how to track Crisp chatbox events in Google Analytics 4 using Google Tag Manager.__

By combining ****$crisp**** event listeners with ****Google Tag Manager**** and ****GA4 events****, you can measure how visitors interact with the chatbox and use that data in your analytics reports.

__In this guide, you will configure:__

* [Requirements](#1-requirements) → what needs to be ready before you start
* [Set up GA4 tracking with Google Tag Manager](#1-set-up-ga4-tracking-with-google-tag-manager) → connect GTM to your GA4 data stream
* [Track Crisp events with GTM](#1-track-crisp-events-with-gtm) → listen to chatbox events and push them to the Data Layer
* [Use the data in GA4](#1-use-the-data-in-ga4) → test, view, and enrich your events
* [Crisp event listener examples](#1-crisp-event-listener-examples) → copy additional event listeners
* [Frequently Asked Questions](#1-frequently-asked-questions) → common setup and debugging questions

---

# Requirements

Before starting, create a workspace in both ****Google Tag Manager**** and ****Google Analytics 4****. You will use GTM to deploy event listeners on your website and send matching events to GA4.

__You will need:__

* ****Crisp chatbox**** installed on your website
* ****Google Tag Manager**** installed on the same website
* A ****GA4 property**** with a web data stream
* Your GA4 ****Measurement ID****, usually starting with `` `G-` ``
* Permission to publish changes in your GTM container

|| The old ****Google Analytics: GA4 Configuration**** tag has been replaced by the ****Google tag**** in Google Tag Manager. The overall setup remains similar: load the Google tag first, then send GA4 event tags from GTM.

---

# Set up GA4 tracking with Google Tag Manager

#### Add the Google tag

In your GTM workspace, go to ****Tags → New****, then create a ****Google tag****. Add your GA4 ****Measurement ID**** so GTM knows where analytics data should be sent.

![Google tag configuration in Google Tag Manager](https://storage.crisp.chat/users/helpdesk/website/-/d/3/0/0/d3002f0aea449000/32778d47-0d9c-49de-83f2-0a36c7_1q2e6kt.png)

To find your ****Measurement ID****, open your [GA4 dashboard](https://analytics.google.com/analytics/web/), go to ****Admin → Data Streams****, then select the web data stream used by your website.

#### Choose the trigger

Attach the tag to ****Initialization - All Pages**** or another all-pages trigger that runs before your event tags. This makes sure GA4 is ready when Crisp events are later sent.

![Google tag trigger configuration](https://storage.crisp.chat/users/helpdesk/website/-/6/5/8/e/658e730b56049800/fdfed4e4-17ac-40ed-a68c-45beaf_176x6tm.png)

#### Save and publish the base tag

Name the tag clearly, save it, and publish your GTM container. Your GA4 property can now receive website data through GTM.

![Final Google tag configuration](https://storage.crisp.chat/users/helpdesk/website/-/a/2/1/5/a215ba2c73b02800/6b44bb94-45a4-448e-9141-af65a3_16plchb.png)

| If you need help with the Google tag setup, review Google’s official Tag Manager and GA4 documentation before continuing.

---

# Track Crisp events with GTM

#### Add Crisp event listeners

Create a new ****Custom HTML**** tag in GTM and paste the following snippet. This example listens to two Crisp events: ****message:sent**** and ****chat:opened****.

```
<script>  window.$crisp = window.$crisp || [];  window.dataLayer = window.dataLayer || [];  $crisp.push(["on", "message:sent", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "message_sent"    });  }]);  $crisp.push(["on", "chat:opened", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "chatbox_opened"    });  }]);</script>
```

Add a trigger such as ****Page View - All Pages**** so the listeners are registered on pages where Crisp is available.

![Custom HTML tag for Crisp event listeners](https://storage.crisp.chat/users/helpdesk/website/-/e/d/4/6/ed4680f6b8331800/e56339af-b750-41be-959f-c4aecd_gtj49k.png)

|| ****message:sent**** tracks messages sent by visitors from the chatbox. ****message:received**** tracks messages received from an operator.

#### Create the Data Layer variable

In GTM, go to ****Variables → User-defined variables → New****, then create a ****Data Layer Variable**** named ****event_label****. This variable reads the event label pushed by the Crisp listener.

![Data Layer variable for the Crisp event label](https://storage.crisp.chat/users/helpdesk/website/-/2/3/9/c/239c2ca59b17b600/209f2b20-403e-4b57-bf52-51af88_134xdnn.png)

#### Create the custom event trigger

Go to ****Triggers → New → Trigger Configuration****, then select ****Custom Event****. Use ****CrispInteractions**** as the event name, matching the `` `event` `` value pushed in the Data Layer.

![Custom event trigger for CrispInteractions](https://storage.crisp.chat/users/helpdesk/website/-/9/6/8/f/968f4dd6063a4000/955234f7-040e-4f09-ac8e-ffaf53_8dr6qp.png)

This trigger fires when GTM receives a ****CrispInteractions**** event from the Data Layer.

#### Send the event to GA4

Create a new ****Google Analytics: GA4 Event**** tag. Use your Google tag as the configuration, then set the ****Event Name**** field to the ****event_label**** variable created earlier. Finally, attach the ****CrispInteractions**** custom event trigger.

![GA4 event tag using the CrispInteractions trigger](https://storage.crisp.chat/users/helpdesk/website/-/f/d/7/5/fd75375545d24000/f71237c3-d754-4576-a1c3-13842e_f8xdsz.png)

With this setup, GA4 receives events named ****message_sent**** and ****chatbox_opened**** instead of a generic ****CrispInteractions**** event.

---

# Use the data in GA4

#### Publish and test

Use GTM ****Preview**** mode before publishing. Open your website, interact with Crisp, and confirm that the ****CrispInteractions**** event appears in the GTM debug panel and that the GA4 event tag fires.

Once everything works, publish the GTM container.

#### View the events in GA4

In GA4, make sure the right account and property are selected. You can usually inspect custom events from ****Realtime****, ****DebugView****, and engagement reports.

![GA4 Realtime overview showing events](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/new08_61bhj8.png)

Realtime and DebugView are useful for testing. Standard reports and custom explorations can take longer before new events and dimensions are visible.

#### Add extra event parameters

You can enrich events by pushing additional parameters to the Data Layer. For example, the snippet below adds ****crisp_event_context**** with a different value for each event.

```
<script>  window.$crisp = window.$crisp || [];  window.dataLayer = window.dataLayer || [];  $crisp.push(["on", "message:sent", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "message_sent",      crisp_event_context: "visitor_message"    });  }]);  $crisp.push(["on", "chat:opened", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "chatbox_opened",      crisp_event_context: "chatbox_visibility"    });  }]);</script>
```

Then create another ****Data Layer Variable**** for ****crisp_event_context****.

![Data Layer variable for an extra event parameter](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/new09_bd8a2.png)

Open your GA4 event tag, expand ****Event Parameters****, then pass the variable as a parameter. Parameter names should use letters, numbers, and underscores, and should start with a letter.

![GA4 event tag with extra event parameters](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/new10_12sjh7b.png)

To use the parameter in GA4 reports, go to ****Admin → Custom definitions → Create custom dimension****, then create an event-scoped dimension that matches the parameter name.

![GA4 custom dimension for a Crisp event parameter](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/new11_1e8ou4o.png)

---

# Crisp event listener examples

Below are common ****$crisp**** event listeners you can reuse in GTM. For the full list, read the [$crisp Methods documentation](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/dollar-crisp/#register-a-callback-on-event).

#### User email was changed

```
<script>  window.$crisp = window.$crisp || [];  window.dataLayer = window.dataLayer || [];  $crisp.push(["on", "user:email:changed", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "user_email_changed"    });  }]);</script>
```

#### Chatbox was initiated

```
<script>  window.$crisp = window.$crisp || [];  window.dataLayer = window.dataLayer || [];  $crisp.push(["on", "chat:initiated", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "chat_initiated"    });  }]);</script>
```

#### Chatbox was opened

```
<script>  window.$crisp = window.$crisp || [];  window.dataLayer = window.dataLayer || [];  $crisp.push(["on", "chat:opened", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "chat_opened"    });  }]);</script>
```

#### Chatbox was closed

```
<script>  window.$crisp = window.$crisp || [];  window.dataLayer = window.dataLayer || [];  $crisp.push(["on", "chat:closed", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "chat_closed"    });  }]);</script>
```

#### Visitor message was sent

```
<script>  window.$crisp = window.$crisp || [];  window.dataLayer = window.dataLayer || [];  $crisp.push(["on", "message:sent", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "message_sent"    });  }]);</script>
```

#### Operator message was received

```
<script>  window.$crisp = window.$crisp || [];  window.dataLayer = window.dataLayer || [];  $crisp.push(["on", "message:received", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "message_received"    });  }]);</script>
```

#### Knowledge base search was sent

```
<script>  window.$crisp = window.$crisp || [];  window.dataLayer = window.dataLayer || [];  $crisp.push(["on", "helpdesk:queried", function() {    dataLayer.push({      event: "CrispInteractions",      event_label: "helpdesk_queried"    });  }]);</script>
```

---

# Frequently Asked Questions

__Still have questions which were not covered in this article? Here is a collection of the most frequently asked questions on this topic.__

###### Why is my event not appearing in GA4?

First, confirm that the GTM container was published after your latest changes. Then use ****Preview**** mode to check whether the Data Layer event is pushed and whether the GA4 event tag fires. You can also add `` `console.log()` `` inside the Crisp callback to confirm that the listener is triggered on your page.

###### Can I group all Crisp events under one GA4 event name?

Yes. Instead of using ****event_label**** as the GA4 event name, you can use a constant event name such as ****CrispInteractions**** and pass ****event_label**** as an event parameter. This is useful if you prefer one GA4 event with dimensions for each Crisp interaction type.

###### Why does GTM Preview fail to connect?

Common causes include ad blockers, the wrong GTM container, a missing GTM snippet, a different environment than the one being previewed, or a website security rule blocking the preview script. Test in a clean browser session and verify that the right container is installed.

###### Can I install GTM on my knowledge base?

Yes, if you have configured your knowledge base or website setup to load your GTM container. Once GTM is available, you can use Crisp-related events such as ****helpdesk:queried**** where supported.