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 → what needs to be ready before you start
• Set up GA4 tracking with Google Tag Manager → connect GTM to your GA4 data stream
• Track Crisp events with GTM → listen to chatbox events and push them to the Data Layer
• Use the data in GA4 → test, view, and enrich your events
• Crisp event listener examples → copy additional event listeners
• 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

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.

To find your Measurement ID, open your GA4 dashboard, 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Crisp event listener examples

Below are common $crisp event listeners you can reuse in GTM. For the full list, read the $crisp Methods documentation.

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.

Updated on: 03/05/2026