How can I use Google Tag Manager (GTM) to monitor Crisp event in Google Analytics 4 (GA4)?
This article will explain how you can listen for your Crisp's user events by using Google Tag Manager, and how to track these events in the new Google Analytics 4.
Introduction
I. Setting up Google Analytics 4 with Google Tag Manager
II. Deploying Event Listeners with Google Tag Manager
III. Collecting Events in Google Analytics 4
Congratulations, you're all done!
Where can I view my Events in Google Analytics 4?
How to add more Parameters in the Event's Data Layer
Extra Resources
Crisp Event Listeners
Frequently Asked Questions
One of the advantages of GTM is that, once added to your website, it allows you to listen and track various user events without having to directly edit the code of your website.
Combined with GA4 and our Javascript SDK, it is a powerful way to analyse your users' behaviour and measure traffic and engagement across your website.
This guide will cover various examples and enable you to set a wide variety of use cases. Depending on the way you use Crisp, you should be able to build users events for support, marketing & sales teams.
Still not sure which events to track, and how it can help your business growth? Don't hesitate reaching out and chatting with us!
To get started, you have to create a workspace in both Google Tag Manager and Google Analytics 4.
Because we will be using GTM to deploy our event listeners and send them to GA4, you only need to install the former on your website. You can do so by following the official documentation.
The GA4 setup will only require you to create a Property (which represents your app/website) and its associated Data Stream (representing the data flow of your website to Google's Analytics). This will generate your Measurement ID which we will use in GTM to connect both. This is easily achieved with this dedicated article.
To start off this guide, we will link our GTM account with our GA4 property's data stream. This will enable us to view analytics for all events occuring through GTM, as well as pass information we will want to track later on.
Step 1: In your GTM workspace, move to "Tags" and click on "New".
Step 2: In the tag type, select "Google Analytics: GA4 Configuration" and enter your GA4 Measurement ID.
To find your GA4 Measurement ID, you can follow this procedure:
Go to your GA4 Dashboard.
Move to "Admin" (bottom-left) and select your account and property.
Navigate to "Data Streams" and select the one you are using. Your Measurement ID will appear.
Step 3: We now need to add a Trigger for our Tag. Click on the "Triggering" field and use the one called "Initialization - All Pages".
Step 4: That's it! You should now have the following configuration:
Take the time to name your Tag, save it, and submit the changes to publish it.
Your GA4 property will now receive analytics data from your website through GTM.
Having troubles? A step-by-step guide is also available in Google's official documentation.
Now that we've connected GTM and GA4, it's time to add Crisp Event Listeners to our website. The Javascript functions we will be adding use Crisp's SDK to inform us when a certain action has been done by the user. There are many events we can listen with the Crisp SDK, so don't hesitate checking them out in the Extra Resources section.
In this article, in order to demonstrate the capabilities of this feature and offer you an overview of what can be achieved, we will be listening for two events simultaneously:
message:sent Messages sent by users
chat:opened Chatbox was opened
Step 1: To inject event listeners on our website, we'll need to add the code in a Tag. Let's create a new one and select the "Custom HTML" type, then copy-paste the following code snippet:
This Javascript includes our SDK method (which listen for our Crisp user events) and the GTM method which allow us to push some parameters to our analytics.
Step 2: Now we can add our Trigger to fire this Tag. Link a new one and select "Page View - All Pages".
Step 3: Your Tag is now ready to inject event listeners in your website. You should have the following configuration:
Name your Tag, save it, and we will be ready to move into the last part of this guide.
Note that since Google Analytics 4, event_action and event_category are no longer mandatory. However, you can add them in the Data Layer if you wish, they will automatically be converted into event parameters inside of your analytics report.
GTM is now loading our event listeners on our website, which capture actions performed by users and send back information.
We now need GTM to automatically send those events to GA4 so that we can consult them in our reports. To responsively achieve that, we'll create a new Tag and its associated Trigger, and use the Variables feature of GTM.
Step 1: Let's create a variable for our "event-label" parameter.
In your workspace, go to Variables > User-defined variables > New.
Add a new Variable configuration and select the "Data Layer Variable" type.
Use "event-label" as Data Layer Variable Name, as this is the parameter we wish to pass, name your Variable, and save it.
Step 2: Until now we've used Built-in Triggers, but it's now time to create our own customized one.
In your workspace, go to Triggers > New > Trigger Configuration.
Select the "Custom Event" trigger type.
As Event Name, use the value of the "event" parameter defined in our Data Layer function earlier (in our case, it is "CrispInteractions").
This will allow our trigger to fire as soon as this specific event is captured by GTM. Remember to name your Trigger and save it.
Step 3: We can now create the Tag that will send our events to GA4.
In your workspace, go to Tags > New > Tag Configuration.
Select the "Google Analytics - GA4 Event" type.
In the "Configuration Tag" field, choose the Tag you used to setup your GA4 Configuration in this first chapter of the article.
In the "Event Name" field, click on the Add Variable icon on the right and select our previously created variable for "event-label".
We use our event-label variable as the displayed event name on GA4 insteast of "CrispInteractions" in order to more effectively be able to visualize those user events in our reports.
Step 4: Add the previously created customized trigger to our Tag.
As usual, don't forget to name your Tag and to save those changes.
By now, you should have 3 Tags and their associated Triggers. One for the GTM/GA4 Configuration, a second to add Events Listeners on your website from GTM, and a third to send the captured events to GA4.
Once you're ready, go ahead and publish this new version of your workspace.
GTM will now listen for events on your website and send them to GA4 so that you can monitor them in your analytic reports. You can now tweak and customize the Crisp user events you want to capture (and they way to you want to listen to them) by modifying the code and the methods used.
And if you wish to dig deeper, we have a few more tips for you below in this article. Feel free to check them out!
You can preview and debug your containers before submitting your changes to ensure that GTM is able to capture the data sent by your Event Listeners. If you're uncertain about how to do that, don't hesitate reading this article from the official documentation.
Make sure you've selected the correct account and property. There are several ways for you to consult data regarding your custom Events.
For instance, you can view them in:
Realtime report
User Engagement report
DebugView report
While the Realtime report is mostly instantaneous, data shown in User Engagement reports or other customized reports can take 24-48h to appear.
If your events are not being displayed at all, don't hesitate debugging and testing your events.
GTM makes it very easy to add new parameters to the data layer of your Events. Variables will allow you to dynamically fetch the value of your parameters, and attach it to the data sent to your GA4 workspace.
As an example, let's add a parameter to the Data Layer of the script we used earlier in this article.
Step 1: Let's edit the Custom HTML of our Event Listeners to add a parameter that will have different values depending on the event.
Step 2: Let's create a variable for our new "event-param1" parameter.
In your workspace, go to Variables > User-defined variables > New.
Add a new Variable configuration and select the "Data Layer Variable" type.
Use "event-param1" as Data Layer Variable Name, name your Variable, and save it.
Step 3:
In your workspace, go to Tags and open the one containing your GA4 Event to edit it.
Click on the "Event Parameters" dropwndown menu and add a new row.
Pick a name for that parameter (it must consist of letters, numbers, or underscores, and it must start with a letter).
To set the parameter value, click on the Add Variable icon on the right and select the variable we created for "event-param1". Save and publish your changes.
This new parameter's value will now be dynamically set depending on the event, and will be carried over to your GA4 analytics report.
However, to take advantage of GA4's reports features such as free forms building, we can create a new Dimension for our Parameter.
Head over to your GA4 dashboard then go to Admin > Custom definitions and click on "Create custom dimensions".
Pick a name for your Dimension (it will be displayed in your report) and use the "Event" Scope.
The "Event parameter" must match the one defined in our GA4 Event Tag. You can now save your changes.
You're all done here!
Within 24-48h you should be able to view and use that new custom Dimension in your reports.
If you want to learn more about Custom Dimensions and Metrics, then this article from the official documentation should be just what you are looking for.
Should you want to learn more regarding Events in GA4, Google has several very relevant articles in there official documentation. Feel free to check their articles about Events and Custom Events to get started on the right foot!
If you're using Universal Analytics, we have an article on How to send events from Crisp to Google Analytics via GTM.
You can also use our Zapier integration with Google Analytics.
To learn more about Data Layers, head over to this great article.
Below is a list of our Javascript SDK Methods allowing you to listen to specific user interactions with Crisp.
A full documentation and detailed description is available in this SDK section of our Developer Hub .
These methods use $crisp.push (which is async-safe, meaning that it can be loaded before Crisp or your DOM is fully loaded) and "on" (which is used to listen for events).
Description: This event helps you to monitor when a new lead has been created through Crisp.
Syntax: $crisp.push(["on", "user:email:changed", callback])
Description: This event helps you to monitor how many times a chatbox has been loaded.
Syntax: $crisp.push(["on", "chat:initiated", callback])
Description: This event helps you to monitor how many times a chatbox has been opened.
Syntax: $crisp.push(["on", "chat:opened", callback])
Description: This event helps you to monitor how many times a chatbox has been closed.
Syntax: $crisp.push(["on", "chat:closed", callback])
Description: This event helps you to monitor how many messages have been sent through Crisp.
Syntax: $crisp.push(["on", "message:sent", callback])
Description: This event helps you to monitor how many messages have been received through Crisp.
Syntax: $crisp.push(["on", "message:received", callback])
Description: This event helps you to monitor how many search queries were performed on your Helpdesk.
Syntax: $crisp.push(["on", "helpdesk:queried", callback])
I did everything but my new event is not being registered in Google Analytics, what could be the reason?
If everything looks fine but your event still does not appear in GTM, make sure you have published the changes after your latest revision.
The DebugView is your best ally to verify that the data layer is being pushed correctly and make sure that GTM is processing your event.
Additionally, you can use classic JavaScript such as console.log() in your callback function to make sure it is triggered on your page, right from your console.
Can I group all my Crisp events into one in Google Analytics 4?
Yes, this is possible. When creating your GA4 Event Tag, you can use a constant Event name (eg. "CrispInteractions") and pass the name of the event-label as a parameter instead of using it as the Event name.
You can then create custom dimensions for these parameters and use them in your free form reports as well.
When I try to launch the Preview before publishing a new version the connexion always fail, why is that?
There can be a number of reasons, namely your adblocker (they are known to block GTM so disable them on your own website), an issue with your container, being on the wrong environment, etc. If you're unsure of the reason, this article can help you troubleshoot the causes.
If Kevin drives from point A to point B at 55km/h and has a 20min head-start on Thomas who starts from point C but drive 70km/h with a 300kg trunk load, then can I install GTM on my Helpdesk as well?
Yes you can.
Have more questions? Shoot us a message!
Table of Content
Introduction
I. Setting up Google Analytics 4 with Google Tag Manager
II. Deploying Event Listeners with Google Tag Manager
III. Collecting Events in Google Analytics 4
Congratulations, you're all done!
Where can I view my Events in Google Analytics 4?
How to add more Parameters in the Event's Data Layer
Extra Resources
Crisp Event Listeners
Frequently Asked Questions
Introduction
One of the advantages of GTM is that, once added to your website, it allows you to listen and track various user events without having to directly edit the code of your website.
Combined with GA4 and our Javascript SDK, it is a powerful way to analyse your users' behaviour and measure traffic and engagement across your website.
This guide will cover various examples and enable you to set a wide variety of use cases. Depending on the way you use Crisp, you should be able to build users events for support, marketing & sales teams.
Still not sure which events to track, and how it can help your business growth? Don't hesitate reaching out and chatting with us!
To get started, you have to create a workspace in both Google Tag Manager and Google Analytics 4.
Because we will be using GTM to deploy our event listeners and send them to GA4, you only need to install the former on your website. You can do so by following the official documentation.
The GA4 setup will only require you to create a Property (which represents your app/website) and its associated Data Stream (representing the data flow of your website to Google's Analytics). This will generate your Measurement ID which we will use in GTM to connect both. This is easily achieved with this dedicated article.
I. Setting up Google Analytics 4 with Google Tag Manager
To start off this guide, we will link our GTM account with our GA4 property's data stream. This will enable us to view analytics for all events occuring through GTM, as well as pass information we will want to track later on.
Step 1: In your GTM workspace, move to "Tags" and click on "New".
Step 2: In the tag type, select "Google Analytics: GA4 Configuration" and enter your GA4 Measurement ID.
To find your GA4 Measurement ID, you can follow this procedure:
Go to your GA4 Dashboard.
Move to "Admin" (bottom-left) and select your account and property.
Navigate to "Data Streams" and select the one you are using. Your Measurement ID will appear.
Step 3: We now need to add a Trigger for our Tag. Click on the "Triggering" field and use the one called "Initialization - All Pages".
Step 4: That's it! You should now have the following configuration:
Take the time to name your Tag, save it, and submit the changes to publish it.
Your GA4 property will now receive analytics data from your website through GTM.
Having troubles? A step-by-step guide is also available in Google's official documentation.
II. Deploying Event Listeners with Google Tag Manager
Now that we've connected GTM and GA4, it's time to add Crisp Event Listeners to our website. The Javascript functions we will be adding use Crisp's SDK to inform us when a certain action has been done by the user. There are many events we can listen with the Crisp SDK, so don't hesitate checking them out in the Extra Resources section.
In this article, in order to demonstrate the capabilities of this feature and offer you an overview of what can be achieved, we will be listening for two events simultaneously:
message:sent Messages sent by users
chat:opened Chatbox was opened
Step 1: To inject event listeners on our website, we'll need to add the code in a Tag. Let's create a new one and select the "Custom HTML" type, then copy-paste the following code snippet:
<script type="text/javascript">
$crisp.push(["on", "message:sent", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'message_sent',
});
}]);
$crisp.push(["on", "chat:opened", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'chatbox_opened',
});
}]);
</script>This Javascript includes our SDK method (which listen for our Crisp user events) and the GTM method which allow us to push some parameters to our analytics.
Step 2: Now we can add our Trigger to fire this Tag. Link a new one and select "Page View - All Pages".
Step 3: Your Tag is now ready to inject event listeners in your website. You should have the following configuration:
Name your Tag, save it, and we will be ready to move into the last part of this guide.
Note that since Google Analytics 4, event_action and event_category are no longer mandatory. However, you can add them in the Data Layer if you wish, they will automatically be converted into event parameters inside of your analytics report.
III. Collecting Events in Google Analytics 4
GTM is now loading our event listeners on our website, which capture actions performed by users and send back information.
We now need GTM to automatically send those events to GA4 so that we can consult them in our reports. To responsively achieve that, we'll create a new Tag and its associated Trigger, and use the Variables feature of GTM.
Step 1: Let's create a variable for our "event-label" parameter.
In your workspace, go to Variables > User-defined variables > New.
Add a new Variable configuration and select the "Data Layer Variable" type.
Use "event-label" as Data Layer Variable Name, as this is the parameter we wish to pass, name your Variable, and save it.
Step 2: Until now we've used Built-in Triggers, but it's now time to create our own customized one.
In your workspace, go to Triggers > New > Trigger Configuration.
Select the "Custom Event" trigger type.
As Event Name, use the value of the "event" parameter defined in our Data Layer function earlier (in our case, it is "CrispInteractions").
This will allow our trigger to fire as soon as this specific event is captured by GTM. Remember to name your Trigger and save it.
Step 3: We can now create the Tag that will send our events to GA4.
In your workspace, go to Tags > New > Tag Configuration.
Select the "Google Analytics - GA4 Event" type.
In the "Configuration Tag" field, choose the Tag you used to setup your GA4 Configuration in this first chapter of the article.
In the "Event Name" field, click on the Add Variable icon on the right and select our previously created variable for "event-label".
We use our event-label variable as the displayed event name on GA4 insteast of "CrispInteractions" in order to more effectively be able to visualize those user events in our reports.
Step 4: Add the previously created customized trigger to our Tag.
As usual, don't forget to name your Tag and to save those changes.
By now, you should have 3 Tags and their associated Triggers. One for the GTM/GA4 Configuration, a second to add Events Listeners on your website from GTM, and a third to send the captured events to GA4.
Congratulations, you're all done!
Once you're ready, go ahead and publish this new version of your workspace.
GTM will now listen for events on your website and send them to GA4 so that you can monitor them in your analytic reports. You can now tweak and customize the Crisp user events you want to capture (and they way to you want to listen to them) by modifying the code and the methods used.
And if you wish to dig deeper, we have a few more tips for you below in this article. Feel free to check them out!
You can preview and debug your containers before submitting your changes to ensure that GTM is able to capture the data sent by your Event Listeners. If you're uncertain about how to do that, don't hesitate reading this article from the official documentation.
Where can I view my Events in Google Analytics 4?
Make sure you've selected the correct account and property. There are several ways for you to consult data regarding your custom Events.
For instance, you can view them in:
Realtime report
User Engagement report
DebugView report
While the Realtime report is mostly instantaneous, data shown in User Engagement reports or other customized reports can take 24-48h to appear.
If your events are not being displayed at all, don't hesitate debugging and testing your events.
How to add more Parameters in the Event's Data Layer
GTM makes it very easy to add new parameters to the data layer of your Events. Variables will allow you to dynamically fetch the value of your parameters, and attach it to the data sent to your GA4 workspace.
As an example, let's add a parameter to the Data Layer of the script we used earlier in this article.
Step 1: Let's edit the Custom HTML of our Event Listeners to add a parameter that will have different values depending on the event.
<script type="text/javascript">
$crisp.push(["on", "message:sent", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'message_sent',
'event-param1': 'param1_valueA'
});
}]);
$crisp.push(["on", "chat:opened", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'chatbox_opened',
'event-param1': 'param1_valueB'
});
}]);
</script>Step 2: Let's create a variable for our new "event-param1" parameter.
In your workspace, go to Variables > User-defined variables > New.
Add a new Variable configuration and select the "Data Layer Variable" type.
Use "event-param1" as Data Layer Variable Name, name your Variable, and save it.
Step 3:
In your workspace, go to Tags and open the one containing your GA4 Event to edit it.
Click on the "Event Parameters" dropwndown menu and add a new row.
Pick a name for that parameter (it must consist of letters, numbers, or underscores, and it must start with a letter).
To set the parameter value, click on the Add Variable icon on the right and select the variable we created for "event-param1". Save and publish your changes.
This new parameter's value will now be dynamically set depending on the event, and will be carried over to your GA4 analytics report.
However, to take advantage of GA4's reports features such as free forms building, we can create a new Dimension for our Parameter.
Head over to your GA4 dashboard then go to Admin > Custom definitions and click on "Create custom dimensions".
Pick a name for your Dimension (it will be displayed in your report) and use the "Event" Scope.
The "Event parameter" must match the one defined in our GA4 Event Tag. You can now save your changes.
You're all done here!
Within 24-48h you should be able to view and use that new custom Dimension in your reports.
If you want to learn more about Custom Dimensions and Metrics, then this article from the official documentation should be just what you are looking for.
Extra Resources
Should you want to learn more regarding Events in GA4, Google has several very relevant articles in there official documentation. Feel free to check their articles about Events and Custom Events to get started on the right foot!
If you're using Universal Analytics, we have an article on How to send events from Crisp to Google Analytics via GTM.
You can also use our Zapier integration with Google Analytics.
To learn more about Data Layers, head over to this great article.
Crisp Event Listeners
Below is a list of our Javascript SDK Methods allowing you to listen to specific user interactions with Crisp.
A full documentation and detailed description is available in this SDK section of our Developer Hub .
These methods use $crisp.push (which is async-safe, meaning that it can be loaded before Crisp or your DOM is fully loaded) and "on" (which is used to listen for events).
User email was changed
Description: This event helps you to monitor when a new lead has been created through Crisp.
Syntax: $crisp.push(["on", "user:email:changed", callback])
<script type="text/javascript">
$crisp.push(["on", "user:email:changed", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'user_email_changed'
});
}]);
</script>Chatbox was initiated
Description: This event helps you to monitor how many times a chatbox has been loaded.
Syntax: $crisp.push(["on", "chat:initiated", callback])
<script type="text/javascript">
$crisp.push(["on", "chat:initiated", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'chat_initiated'
});
}]);
</script>Chatbox was opened
Description: This event helps you to monitor how many times a chatbox has been opened.
Syntax: $crisp.push(["on", "chat:opened", callback])
<script type="text/javascript">
$crisp.push(["on", "chat:opened", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'chat_opened'
});
}]);
</script>Chatbox was closed
Description: This event helps you to monitor how many times a chatbox has been closed.
Syntax: $crisp.push(["on", "chat:closed", callback])
<script type="text/javascript">
$crisp.push(["on", "chat:closed", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'chat_closed'
});
}]);
</script>Message was sent
Description: This event helps you to monitor how many messages have been sent through Crisp.
Syntax: $crisp.push(["on", "message:sent", callback])
<script type="text/javascript">
$crisp.push(["on", "message:sent", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'message_sent'
});
}]);
</script>Message was received
Description: This event helps you to monitor how many messages have been received through Crisp.
Syntax: $crisp.push(["on", "message:received", callback])
<script type="text/javascript">
$crisp.push(["on", "message:received", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'message_received'
});
}]);
</script>Helpdesk search was sent
Description: This event helps you to monitor how many search queries were performed on your Helpdesk.
Syntax: $crisp.push(["on", "helpdesk:queried", callback])
<script type="text/javascript">
$crisp.push(["on", "helpdesk:queried", function(event){
window.dataLayer = dataLayer || [];
dataLayer.push({
'event': 'CrispInteractions',
'event-label': 'helpdesk_queried'
});
}]);
</script>Frequently Asked Questions
I did everything but my new event is not being registered in Google Analytics, what could be the reason?
If everything looks fine but your event still does not appear in GTM, make sure you have published the changes after your latest revision.
The DebugView is your best ally to verify that the data layer is being pushed correctly and make sure that GTM is processing your event.
Additionally, you can use classic JavaScript such as console.log() in your callback function to make sure it is triggered on your page, right from your console.
Can I group all my Crisp events into one in Google Analytics 4?
Yes, this is possible. When creating your GA4 Event Tag, you can use a constant Event name (eg. "CrispInteractions") and pass the name of the event-label as a parameter instead of using it as the Event name.
You can then create custom dimensions for these parameters and use them in your free form reports as well.
When I try to launch the Preview before publishing a new version the connexion always fail, why is that?
There can be a number of reasons, namely your adblocker (they are known to block GTM so disable them on your own website), an issue with your container, being on the wrong environment, etc. If you're unsure of the reason, this article can help you troubleshoot the causes.
If Kevin drives from point A to point B at 55km/h and has a 20min head-start on Thomas who starts from point C but drive 70km/h with a 300kg trunk load, then can I install GTM on my Helpdesk as well?
Yes you can.
Have more questions? Shoot us a message!
Updated on: 13/03/2024
Thank you!