Helpscout Chat Event Listener

Want to measure how your website visitors interact with your Helpscout chat widget or click the chat widget CTA. You can use this Helpscout chat event listeners and Google Tag Manager to track these interactions in your measurement stack (Google Analytics 4, Piwik Pro, Mixpanel, Amplitude, Segment, etc.)

How to track Helpscout Chat interaction with google tag manager

Enrich your marketing data, by tracking Helpscout chat interactions in your analytics stacks.

Doing this gives you valuable insights into what impact these interactions, have on your marketing funnel, conversions, website engagement metrics, and other business KPIs.

For your implementation, you’ll need Google Tag Manager and the Helpscout chat event listener javascript code.

start by pasting the event listener script in the GTM custom HTML tag and firing it on pageview or DOM ready (always recommended).

PRO TIP: if you installed the Helpscout chat script through Google Tag Manager, please use the DOM-ready trigger instead.

Your next step should be creating a custom event with the name [Helpscout_Interaction], (this event happens on all Helpscout interactions)

To determine the actual event, you’ll have to create dataLayer variables.

[chatAction] returns the following event description;

Opened Helpscout Chat Widget
Closed Helpscout Chat Widget
Viewed Article
Conversation Started
Clicked Message CTA
Closed Message CTA
Message Shown To Visitor
Visitor Performed Search

You can use the [chatAction] dataLayer variable as event parameters or for streamlining your trigger to fire on specific Helpscout chat interactions.

Also, if you need more information on certain interactions, there are dataLayer variables you’ll have to create, which are available on some chat interactions

[chatBeaconId] –> Returns the chat widget ID, it’s available on all events

[chatBeaconName] –> Returns the chat widget name, it’s also available on all events

[chatSessionData] –> Returns the the user session ID, available on all events

[visitorEmail] –> Returns the user email, available on form submission events or events after the form submission.

[visitorName] –> Returns the user name, available on form submission events or events after form submission.

[articleID] –> Returns the article ID, happens on the viewed article event

[vistorMessage] –> Returns the chat message, not present on all events

[messageID] –> Returns the message ID for chat events

[searchQuery] –> Returns the search query used by the user when a search was performed.

Connect your marketing tags to the trigger and use the dataLayer variables you created to push more information about each Helpscout chat interaction.

<script>
//Triggered when the Helpscout Beacon is closed open
Beacon('on', 'open', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Helpscout_Interaction',
'chatAction': "Opened Helpscout Chat Widget",
'chatBeaconId': Beacon('info').beaconId,
'chatBeaconName': Beacon('info').beaconName,
'visitorDeviceID': Beacon('info').visitor.deviceId,
'chatSessionData': Beacon('info').visitor.sessionData,
'visitorEmail': Beacon('info').visitor.email,
'visitorName': Beacon('info').visitor.name
});
});
//Triggered when the Helpscout Beacon is closed
Beacon('on', 'close', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Helpscout_Interaction',
'chatAction': "Closed Helpscout Chat Widget",
'chatBeaconId': Beacon('info').beaconId,
'chatBeaconName': Beacon('info').beaconName,
'visitorDeviceID': Beacon('info').visitor.deviceId,
'chatSessionData': Beacon('info').visitor.sessionData,
'visitorEmail': Beacon('info').visitor.email,
'visitorName': Beacon('info').visitor.name
});
});
//Triggered when a Docs Article is opened in Beacon
Beacon('on', 'article-viewed', function (article) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Helpscout_Interaction',
'chatAction': "Viewed Article",
'articleID': article.id,
'chatBeaconId': Beacon('info').beaconId,
'chatBeaconName': Beacon('info').beaconName,
'visitorDeviceID': Beacon('info').visitor.deviceId,
'chatSessionData': Beacon('info').visitor.sessionData,
'visitorEmail': Beacon('info').visitor.email,
'visitorName': Beacon('info').visitor.name
});
});
//Triggered when a Chat is started via Beacon
Beacon('on', 'chat-started', function (chatvisitor) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Helpscout_Interaction',
'chatAction': "Conversation Started",
'vistorName': chatvisitor.name,
'vistorEmail': chatvisitor.email,
'vistorMessage': chatvisitor.text
});
});
//Triggered when a Message’s CTA is clicked
Beacon('on', 'message-clicked', function (message) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Helpscout_Interaction',
'chatAction': "Clicked Message CTA",
'messageID': message.id,
'chatBeaconId': Beacon('info').beaconId,
'chatBeaconName': Beacon('info').beaconName,
'visitorDeviceID': Beacon('info').visitor.deviceId,
'chatSessionData': Beacon('info').visitor.sessionData,
'visitorEmail': Beacon('info').visitor.email,
'visitorName': Beacon('info').visitor.name
});
});
//Triggered when a Message’s close button is clicked
Beacon('on', 'message-closed', function (message) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Helpscout_Interaction',
'chatAction': "Closed Message CTA",
'messageID': message.id,
'chatBeaconId': Beacon('info').beaconId,
'chatBeaconName': Beacon('info').beaconName,
'visitorDeviceID': Beacon('info').visitor.deviceId,
'chatSessionData': Beacon('info').visitor.sessionData,
'visitorEmail': Beacon('info').visitor.email,
'visitorName': Beacon('info').visitor.name
});
});
//Triggered when a Message is shown
Beacon('on', 'message-closed', function (message) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Helpscout_Interaction',
'chatAction': "Message Shown To Visitor",
'messageID': message.id,
'chatBeaconId': Beacon('info').beaconId,
'chatBeaconName': Beacon('info').beaconName,
'visitorDeviceID': Beacon('info').visitor.deviceId,
'chatSessionData': Beacon('info').visitor.sessionData,
'visitorEmail': Beacon('info').visitor.email,
'visitorName': Beacon('info').visitor.name
});
});
//Triggered when a Message is shown
Beacon('on', 'search', function (searchterm) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Helpscout_Interaction',
'chatAction': "Visitor Performed Search",
'searchQuery': searchterm.query,
'chatBeaconId': Beacon('info').beaconId,
'chatBeaconName': Beacon('info').beaconName,
'visitorDeviceID': Beacon('info').visitor.deviceId,
'chatSessionData': Beacon('info').visitor.sessionData,
'visitorEmail': Beacon('info').visitor.email,
'visitorName': Beacon('info').visitor.name
});
});
</script>