Crisp Chat Event Listener

Measure Crisp chat activity and conversions, with rich data about information Crisp chat previously, has about the user. These event listeners make it possible to automatically capture these chat interactions there by using Google Tag Manager to send the data to your analytics (Google Analytics 4, Piwik Pro, Mixpanel, etc.)

How to track Crisp Chat Interaction with google tag manager

You can use Google Tag Manager and this event listener script to push Crisp chat interactions data to your analytics (Google Analytics, Piwik Pro, Mixpanel, etc.)

These event listener code helps emit DataLayer events with relevant chat information when users interact with your embedded Crisp chat widget or helpdesk.

These events are;

Chat initiated
Chat widget opened and closed
Message sent and received
Capture user email
Queried Crisp helpdesk

To measure Crisp interactions and conversions, you have to copy the event listener, then create a custom HTML tag in GTM where you’ll paste the code.

Add a pageview or DOM ready (recommended) trigger to the custom HTML tag you created.

💡 Pro Tip: fire on DOM ready if you implemented the Crisp chat widget through GTM).

The next step is to create a custom event trigger with the event name [CrispInteractions] that happens for every Crisp Chat interaction.

You can streamline your event to fire for specific Crisp interactions by creating dataLayer variables that return the value of what Crisp interaction occurred.

[chatAction] –> tells us what Crisp interaction happended, start a chat, chat widget opened, etc.

[CrispSessionID] –> gives the Crisp session ID

[CrispEmail] –> The user email if they have submitted it before

[CrispPhone] –> the user phone number

To push these data to your analytics or marketing platform, you’ll have to connect your marketing tag/pixels to the generic or specific trigger, depending on your needs.

Having these data in your analytics, you’ll be to make analyses such as;

How often do users interact with your Crisp chat widget
How many complete a chat after initiating one
What’s the impact on your business KPIs such as conversions, etc.
Build a funnel starting with opening a Crisp chat, etc.

<script type="text/javascript">
$crisp.push(["on", "chat:initiated", function(event){
dataLayer.push({
'event': 'CrispInteractions', 
'chatAction': 'chat initiated',
'CrispSessionID': $crisp.get("session:identifier"),
'CrispEmail': $crisp.get("user:email"),
'CrispPhone': $crisp.get("user:phone")
});
}]);

$crisp.push(["on", "chat:opened", function(event){
dataLayer.push({
'event': 'CrispInteractions', 
'chatAction': 'chat opened',
'CrispSessionID': $crisp.get("session:identifier"),
'CrispEmail': $crisp.get("user:email"),
'CrispPhone': $crisp.get("user:phone")
});
}]);

$crisp.push(["on", "chat:closed", function(event){
dataLayer.push({
'event': 'CrispInteractions', 
'chatAction': 'chat closed',
'CrispSessionID': $crisp.get("session:identifier"),
'CrispEmail': $crisp.get("user:email"),
'CrispPhone': $crisp.get("user:phone")
});
}]);

$crisp.push(["on", "message:sent", function(event){ 
dataLayer.push({
'event': 'CrispInteractions', 
'chatAction': 'message sent',
'CrispSessionID': $crisp.get("session:identifier"),
'CrispEmail': $crisp.get("user:email"),
'CrispPhone': $crisp.get("user:phone")
});
}]);

$crisp.push(["on", "message:received", function(event){
dataLayer.push({
'event': 'CrispInteractions', 
'chatAction': 'message received',
'CrispSessionID': $crisp.get("session:identifier"),
'CrispEmail': $crisp.get("user:email"),
'CrispPhone': $crisp.get("user:phone")
});
}]);

$crisp.push(["on", "user:email:changed", function(event){
dataLayer.push({
'event': 'CrispInteractions', 
'chatAction': 'visitor email added',
'CrispSessionID': $crisp.get("session:identifier"),
'CrispEmail': $crisp.get("user:email"),
'CrispPhone': $crisp.get("user:phone")
});
}]);

$crisp.push(["on", "helpdesk:queried", function(event){
dataLayer.push({
'event': 'CrispInteractions', 
'chatAction': 'Helpdesk Queried'
});
}]);
</script>