Support Portal

Search our knowledge base or get in touch

basic

advanced

Exact phrase:

  1. Home
  2. Adv Installation
  3. Integrating LiveHelpNow into Google Tag Manager

Integrating LiveHelpNow into Google Tag Manager

  • Date updated
  • Rating

How do I install LiveHelpNow widget code in Google Tag Manager

Google Tag Manager (GTM) is a simple solution for managing JavaScript snippets that send data to third parties (like LiveHelpNow) from your website or app. You can easily add or remove snippets without requiring a developer to update any code.
GTM is highly recommended for LiveHelpNow widget installation. It is easy, fast and the simplest way to load the LiveHelpNow on your website.

Important:

  • You must have Google Tag Manager installed on your website.
  • You'll need permissions to edit your website's Google Tag Manager configuration. — If you're unsure who owns your Google Tag Manager account, check with the team or person who manages your website, SEO or Marketing operations.

 Installation

  1. Please first copy LiveHelpNow widget code from Admin Panel > System setup > Website code
  2. Sign in to google tag manager and select your website's container
  3. From the 'Tags' section of your GTM account, click 'New' to create a new tag:

  4. Name the new tag "LiveHelpNow"  and select Custom HTML for tag Type


  5. Paste coped in step 1 LiveHelpNow code into the HTML portion and open the 'Triggering' section, and choose the trigger for loading the LiveHelpNow widget.
     
    You can choose an existing trigger, or create a new one with the '+' icon in the top right:

    Tip: For optimal user experience we recommend choosing “Window Loaded”, so your website loads as fast as possible:
  6. Your tag is now configured!
    All that is left to do is to “Submit” the changes to your container for them to take effect. 

Tracking conversions

Before you begin

In order to complete this guide, it is assumed that the following has already been done:

It also assumes that you have the following:

  • Access to the Tag Manager container for the website
  • The Editor (or above) role to the Google Analytics account

Set up events

To set up an event using Google Tag Manager, you will configure a Google Analytics: GA4 Event tag and then create a trigger that specifies when you want to send the event.

The following steps show you how to send a custom event to a Google Analytics 4 property when a user commences live chat. The steps show you how to implement the event using Tag Manager.

Step 1: Create Variable

  1. Click Variables
  2. Add new Variable
  3. Name it "LHN - Label" (you can use any name you like)
  4. Variable Type: Data Layer variable
  5. Data Layer Variable Name: eventLabel
  6. Click "Save" to add new variable

Step 2: Create a GA4 Event tag

Start by creating a Google Analytics: GA4 Event tag for the new custom event.

  1. In Google Tag Manager, click Tags > New.
  2. Enter a name for the GA4 Event tag at the top (e.g., "GA4 Event - Chat Started").
  3. Select Google Analytics: GA4 Event.
  4. In Configuration Tag, select your Google Analytics: GA4 Configuration tag.
  5. In Event Name, enter a LiveHelpNow. This will create a new custom event and the name will appear in your GA4 reports.

Step 2: Create a trigger

Next, create a trigger to send the event when someone clicks the button.

  1. Click the Triggering box in your GA4 Event tag.
  2. Click + on the top right.
  3. Enter a name for the trigger (e.g., "Trigger - Chat Started").

You can choose the conditions for sending the event. The following example sends the event by using custom event and datalayer object:

  1. Click the Trigger Configuration box in your trigger.
  2. Choose Custom Event.

    select-custom-event
  3. Click Some Custom Events. 

image

Click "Save"

 You may configure other LIveHelpNow events sent by using other available LiveHelpNow events such as Chat-Started, Chat-Ended, Invite-Shown, Invite-Accepted, Prechat-Survey, Offline-Form-Opened, Offline-Form-Submitted.

Step 3: Preview your changes

Before you publish your new event in Tag Manager, click Preview to see the data that's recorded when you click the "Sign up for the newsletter" button.

You can use preview mode to test changes to your container before you publish those changes to your website. Learn more about preview mode

See your events in Analytics

You can see your events and their parameters using the Realtime and DebugView reports. Note that the DebugView report requires some additional configuration before you can use the report. These two reports show you the events users trigger on your website as the events are triggered.

Additional customization for advanced users out there.

Note: These examples may require creating custom tags in Google Tag Manager, if you’re not already tracking the events needed to trigger the method.

Show message or start chat when a visitor shows signs of leaving your website

 

Create "Exit intent" tag by using the following JavaScript in custom html tag type: 

<script>
(function(){
varstb_exitintent=false;
document.addEventListener("mousemove",function(e){
varscroll=window.pageYOffset||document.documentElement.scrollTop;
if((e.pageY-scroll)<10&&stb_exitintent==false){
dataLayer.push({"event":"exit_intent"});
stb_exitintent=true;
}
});
})();
</script>

 

Like so:



Setup a new trigger for exit intent:

 

 

Then add a new tag to launch chat window or send invitation messages, etc. by following LiveHelpNow JS Sdk docs

 

 

 

Getting support with Google Tag Manager

If you have trouble identifying or tracking logged in users, tracking custom events, or triggering Intercom methods with custom tags that rely on GTM's data layers we recommend getting support from Google directly.

 

 

Related articles