> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.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

---

# ${color}[#0080dd](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.

---

# ${color}[#0080dd](Set up GA4 tracking with Google Tag Manager)

#### ${color}[#445055](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/87ae2703583ac800/new01_1py2agq.png =1000xauto)

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.

#### ${color}[#445055](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/87ae2703583ac800/new02_13rvygs.png =1000xauto)

#### ${color}[#445055](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/87ae2703583ac800/new03_2illvm.png =1000xauto)

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

---

# ${color}[#0080dd](Track Crisp events with GTM)

#### ${color}[#445055](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**.

```html
<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/87ae2703583ac800/new04_1j3vpy9.png =1000xauto)

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

#### ${color}[#445055](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/87ae2703583ac800/new05_8do0je.png =1000xauto)

#### ${color}[#445055](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/87ae2703583ac800/new06_w6894f.png =1000xauto)

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

#### ${color}[#445055](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/87ae2703583ac800/new07_1sdnuyc.png =1000xauto)

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

---

# ${color}[#0080dd](Use the data in GA4)

#### ${color}[#445055](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.

#### ${color}[#445055](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 =1000xauto)

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

#### ${color}[#445055](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.

```html
<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 =1000xauto)

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 =1000xauto)

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 =1000xauto)

---

# ${color}[#0080dd](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).

#### ${color}[#445055](User email was changed)

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

#### ${color}[#445055](Chatbox was initiated)

```html
<script>
  window.$crisp = window.$crisp || [];
  window.dataLayer = window.dataLayer || [];

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

#### ${color}[#445055](Chatbox was opened)

```html
<script>
  window.$crisp = window.$crisp || [];
  window.dataLayer = window.dataLayer || [];

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

#### ${color}[#445055](Chatbox was closed)

```html
<script>
  window.$crisp = window.$crisp || [];
  window.dataLayer = window.dataLayer || [];

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

#### ${color}[#445055](Visitor message was sent)

```html
<script>
  window.$crisp = window.$crisp || [];
  window.dataLayer = window.dataLayer || [];

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

#### ${color}[#445055](Operator message was received)

```html
<script>
  window.$crisp = window.$crisp || [];
  window.dataLayer = window.dataLayer || [];

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

#### ${color}[#445055](Knowledge base search was sent)

```html
<script>
  window.$crisp = window.$crisp || [];
  window.dataLayer = window.dataLayer || [];

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

---

# ${color}[#0080dd](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.*

###### ${color}[#F08820](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.

###### ${color}[#F08820](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.

###### ${color}[#F08820](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.

###### ${color}[#F08820](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.