This article explains how you can send Crisp's users events to Google Analytics using Google Tag Manager (or not).

We will cover a few examples but regarding Google Analytics developers docs you will be able to set a wide variety of use case. Depending on the way you use Crisp, you should be able to build users events for support, marketing & sales teams.

If you want to have a look at all the events that are built in Crisp, you should have a look here.

For Google Tag Manager, you'll need first, to create an event listener (containing the event you want to track with Crisp) and a trigger on a personalized event called "gtm.click". You'll then have to create a personalized event called "CrispInteractions" that enables the Google Analytics triggers to send data.

Chatbox has been loaded

This event helps you to monitor how many times a chatbox has been loaded.
For this event, we use the [chat:initiated]

If you are using Google Tag Manager :

<script type="text/javascript">
  $crisp.push(["on", "chat:initiated", function(event){
    dataLayer.push({
      'event': 'CrispInteractions', 
      'eventCategory': 'chatbox',
      'eventAction': 'chat initiated'
    });
  }]);
</script>

If you are using Universal Analytics (analytics.js) :

<script type="text/javascript">$crisp.push(["on", "chat:initiated", function(){ ga('send', 'event', 'Chat', 'Chat-Initiated');}]);</script>

Chatbox has been opened

This event helps you to monitor how many times a chatbox has been opened.
For this event, we use the [chat:opened]

If you are using Google Tag Manager :

<script type="text/javascript">
  $crisp.push(["on", "chat:opened", function(event){
    dataLayer.push({
      'event': 'CrispInteractions', 
      'eventCategory': 'chatbox',
      'eventAction': 'chat opened'
    });
  }]);
</script>

If you are using Universal Analytics (analytics.js) :

<script type="text/javascript">$crisp.push(["on", "chat:opened", function(){ ga('send', 'event', 'Chat', 'Chat opened');}]);</script>

Chatbox has been closed

This event helps you to monitor how many times a chatbox has been closed.
For this event, we use the [chat:closed]

If you are using Google Tag Manager :

<script type="text/javascript">
  $crisp.push(["on", "chat:closed", function(event){
    dataLayer.push({
      'event': 'CrispInteractions', 
      'eventCategory': 'chatbox',
      'eventAction': 'chat closed'
    });
  }]);
</script>

If you are using Universal Analytics (analytics.js) :

<script type="text/javascript">$crisp.push(["on", "chat:closed", function(){ ga('send', 'event', 'Chat', 'Chat closed');}]);</script>

A message has been sent

This event helps you to monitor how many messages have been sent through Crisp.
For this event, we use the [message:sent]

If you are using Google Tag Manager :

<script type="text/javascript">
  $crisp.push(["on", "message:sent", function(event){ 
    dataLayer.push({
      'event': 'CrispInteractions', 
      'eventCategory': 'chatbox',
      'eventAction': 'message sent'
    });
  }]);
</script>

If you are using Universal Analytics (analytics.js) :

<script type="text/javascript">$crisp.push(["on", "message:sent", function(){ ga('send', 'event', 'Chat', 'Message Sent');}]);</script>

A message has been received

This event helps you to monitor how many messages have been received through Crisp.
For this event, we use the [message:received]

If you are using Google Tag Manager :

<script type="text/javascript">
  $crisp.push(["on", "message:received", function(event){
    dataLayer.push({
      'event': 'CrispInteractions', 
      'eventCategory': 'chatbox',
      'eventAction': 'message received'
    });
  }]);
</script>

If you are using Universal Analytics (analytics.js) :

<script type="text/javascript">$crisp.push(["on", "message:received", function(){ ga('send', 'event', 'Chat', 'Message Received');}]);</script>

Visitor Email Added

This event helps you to monitor when a new lead has been created through Crisp.
For this event, we use the [user:email:changed]

If you are using Google Tag Manager :

<script type="text/javascript">
  $crisp.push(["on", "user:email:changed", function(event){
    dataLayer.push({
      'event': 'CrispInteractions', 
      'eventCategory': 'chatbox',
      'eventAction': 'visitor email added'
    });
  }]);
</script>

If you are using Universal Analytics (analytics.js) :

<script type="text/javascript">$crisp.push(["on", "user:email:changed", function(){ ga('send', 'event', 'Chat', 'Visitor Email Added');}]);</script>

Or, you can simply use our Zapier integration with Google Analytics

GTM Tutorial to track Message Sent in Google Analytics

Here is an example of what you should in order to track [message:sent]

Step 1 : Build an event listener as explain beneath

Create a custom html tag that contains the code that is supplied above, based on what you want to track (chatbox open, message sent ...)




At this stage, you are calling a function ($crisp.push) that contains a listener, this listener is supposed to be set website wide.

As you can see in the listener, you are pushing data to the DataLayer (if you don't know what a dataLayer is for GTM, here is a good explanation).

The data Layer is creating an event, which is "CrispInteractions" that we will need later, at step 3.

Step 2 : Create a custom event that triggers step 1 (beware, gtm.click is only available if you track message sent, otherwise, you would want to use gtm.dom)

What is a custom event in Google Tag Manager?

Google Tag Manager Custom Event is used for tracking interactions that might take place on your website or mobile app that isn’t handled by standard methods.

To what refers gtm.click and gtm.dom?

gtm.click refers to any mouse click that is done on your website. If you're going with gtm.click, it means that your listener will be triggered on a mouse click (eg. when a user click on the chatbox to open it).
gtm.dom refers to the website and will trigger the listener when the website is fully loaded.

It may happen that gtm.click is not working, simply change to gtm.dom and it should work properly :)

Step 3 : Create the custom event for CrispInteractions



In this tutorial we're using a custom event because we just created an event that is specific to our need.

"CrispInteractions" is created through the dataLayer.push at step 1.

If you want to know more about this function, here is a good explanation.

This custom event is only triggered when a message is sent because you're using the $crisp.push method that looks for message sent.

Step 4 : Just link the custom event (CrispInteractions) with an Analytics property that will send the right data to your Google Analytics account.



You can now try it live! Don't forget to publish your changes or to end the preview mode prior to any live test. Happy chat!

Updated on: 13/03/2024