Integrate HelpCrunch with Google Tag Manager

Just follow this guide if you need to track chat/widget events in Google Tag Manager
Written by Nick
Updated 1 month ago
Below mentioned documentation work only with Google Analytics 4. In case you use Universal Analytics write to us for assistance.
Before starting, you must set up the Google Analytics 4 Configuration tag in your GTM workspace. How to set up the GA4 Configuration tag

Create a variable for the events name

1. Navigate to your GTM workspace and click ‘Variables’ on the left panel:

2. To add your user-defined variable click ‘New’:

3. To configure your variable click the ‘Variable Configuration’. Then find and select ‘Custom Event’:

4. Name your variable as ‘HelpCrunch - Events Name’ or of your choice, and save.

Create triggers for each event you need to track

1. Decide what events you need to track. You can find their list below in the section ‘Customer events’.

2. Click ‘Triggers’ on the left panel:

3. To add a new trigger click ‘New’:

4. To configure your trigger click ‘Trigger Configuration’. Then find and select ‘Custom Event’:

5. Fill in the event name for your trigger. You can copy it from the code snippets in ‘Customer events’ below. For example, to track when a customer sends a message:

<script type="text/javascript">
  HelpCrunch('onCustomerMessage', function(event) {
    dataLayer.push({
    'event': 'sendChatMessage',
    });
  });
</script>

sendChatMessage is the event name you need to paste into the field.

6. Name your trigger as ‘HelpCrunch - sendChatMessage’ or of your choice, and save.

7. Repeat for each event you need to track.

Create a tag for customer events

1. Click ‘Tags’ on the left panel:

2. To add a new tag click ‘New’:

3. To configure your tag click ‘Tag Configuration. Then find and select ‘Custom HTML’:

4. Copy a code for the event you need to track from the section ‘Customer Events’ and paste it into the HTML field:

5. Combine several codes under one script if you need to track multiple events. For example:

<script type="text/javascript">
  HelpCrunch('onCustomerMessage', function(event) {
    dataLayer.push({
    'event': 'sendChatMessage',
    });
  });

  HelpCrunch('onClickByMessenger', function(event) {
    dataLayer.push({
    'event': 'Messenger' + event.detail.name + 'Click',
    });
  });
</script>

6. Click on ‘Triggering’ and select ‘All pages’:

7. Name your tag as ‘HelpCrunch - Events’ or of your choice, and save.

Create a tag to pass data to GA4

1. Click ‘New’ above the list of tags:

2. Click ‘Tag Configuration’ and select ‘Google Analytics: GA4 Event’:

3. Select your GA4 Configuration Tag and add the event name ‘customer’ or of your choice:

4. In the section ‘Event Parameters’ click ‘Add Row’. Fill in the ‘Parameter Name’ field with the ‘Action’. For the ‘Value’ field click on the icon on the right side of the field and select you variable you have created before:

5. Click on ‘Triggering’ and select all triggers you have created for the events.

6. Name your tag and save.

Publish your workspace

Click ‘Submit’ in the top right corner. Name your version, add a description if needed, and click ‘Publish’:

Don’t forget to test your workspace after publishing it.

Customer events

Use these code snippets for creating your triggers in Google Tag Manager.

Customer opens a website widget

<script type="text/javascript">
  HelpCrunch('onChatOpen', function(event) {
    dataLayer.push({
    'event': 'opensChat',
    });
  });
</script>

Customer closes a website widget

<script type="text/javascript">
  HelpCrunch('onChatClose', function(event) {
    dataLayer.push({
    'event': 'closesChat',
    });
  });
</script>

Customer selects messenger integration on website widget button

<script type="text/javascript">
  HelpCrunch('onClickByMessenger', function(event) {
    dataLayer.push({
    'event': 'messenger' + event.detail.name + 'Click',
    });
  });
</script>

Use these event names for trigger settings:

  • messengerLivechatClick - for Live Chat
  • messengerTelegramClick - for Telegram
  • messengerViberClick - for Viber
  • messengerInstagramClick - for Instagram
  • messengerFacebookClick - for Facebook Messenger
  • messengerWhatsappClick - for WhatsApp
  • messengerHelpcenterClick - for Knowledge Base

Customer sends a message in a chat

<script type="text/javascript">
  HelpCrunch('onCustomerMessage', function(event) {
    dataLayer.push({
    'event': 'sendChatMessage',
    });
  });
</script>

Customer receives a new message

<script type="text/javascript">
  HelpCrunch('onNewUnreadChat', function(event) {
    dataLayer.push({
    'event': 'getsNewMessage',
    });
  });
</script>

Customer submits a pre-chat form

<script type="text/javascript">
  HelpCrunch('onPreChatFormSubmit', function(event) {
    dataLayer.push({
    'event': 'submitsPreChatForm',
    });
  });
</script>

Did this answer your question?