Google Tag Manager: add LiveChat to your sites

Krzysztof Kraus
4 min read
updated: Mar 25, 2020

Learn how to install LiveChat on your site with Google Tag Manager (or GTM) with this step-by-step tutorial.

Install LiveChat using Google Tag Manager

First, log in to your LiveChat account. Then, follow the steps below:

  1. Go to Settings > Channels > Website, select Install via Google Tag Manager and click on Connect Google Tag Manager.
  2. You will be redirected to a Google Sign In page. Log in using your e-mail and password. Next, accept request to access your Google Account.
  3. Choose GTM account and GTM tag container and click on Install LiveChat.
  4. Finally, you should see “Congratulations! LiveChat on your website is now up and running!” message.

That’s it! You’ve added LiveChat using Google Tag Manager.

Create a Google Tag Manager account and container

Usually, one account is just enough because all tags for all your company’s websites can be managed using a single GTM account. Follow the steps below to create the account:

  1. Sign in to your Google account.
  2. Go to the Google Tag Manager page and click Create Account.
  3. Choose a name for your account and click Continue.

Entering company name

  1. Next, you need to setup a container. The container holds all your tags, such as Google Analytics tag, Adwords tag or LiveChat tag. Name the container, select for Web option and click Create.

Creating a container in Google Tag Manager

  1. Read through the GTM Terms of Service and click YES to accept them and continue.
  2. You will get a container with a code snippet. Copy the code and paste it into every page of your site just below the opening tag.
  3. Click OK to close the code snippet box and finish setting up GTM manager and your first container.

Getting the Google Tag Manager code

Use Google Tag Manager with Google Analytics

To use the Google Analytics integration with Google Tag Manager, you need to configure a few more things to make sure that various events are recorded correctly.

When using Google Analytics and Google Tag Manager at the same time, make sure to let LiveChat know which code should we track.
When using Google Analytics and Google Tag Manager at the same time, make sure to let LiveChat know which code should we track.

Go through those steps to properly configure the integration:

  1. Once you have installed Google Analytics integration, log in to your Google Tag Manager account, go to the Tags section and click on the New button.

Creating a new tag for Google Analytics

  1. In the next section, click on Tag Configuration.

Click on Tag Configuration

  1. Choose the Universal Analytics option.

Choosing the Universal Analytics option

  1. Enter your Tracking ID and choose Event from the Track Type drop-down list.

Entering Google Tag Manager Tracking ID

  1. Hit macro button in the Category section.

Clicking on the Macro Button

  1. Click on the + button to proceed.

Clicking on Plus button

  1. Press Variable Configuration button.

Clicking on Variable Configuration

  1. Choose Data Layer Variable from the list of available options.

Choosing Data Layer Variable

  1. Type eventCategory in the Data Layer Variable Name field.

Typing proper value in the Data Layer Variable field

  1. Click on Save button.

Saving Data Layer Variable

  1. You will be asked to rename your Variable. Use gaLiveChatCategory as the name of Variable and save changes.

Renaming the Variable

  1. In the same way, create a new variable for the Action field. Select Data Layer Variable, enter eventAction as Data Layer Variable Name, click on the Create variable button and name it, e.g. gaLiveChatAction.
  2. Create a new variable for the Label field. Select Data Layer Variable, enter eventLabel as Data Layer Variable Name, click on the Create variable button and name it, e.g. gaLiveChatLabel.
  3. Next, add a new variable for the Value field. Select Data Layer Variable, enter eventValue as Data Layer Variable Name, click on the Create variable button and name it, e.g. gaLiveChatValue.
  4. After you’ve set up these variables, click on Triggering button available below.

Adding a trigger

  1. Click on the + button available on the next screen.

Clicking on a + button

  1. On the next screen, click on Trigger Configuration button to set up a new firing rule.

Clicking on Trigger Configuration

  1. Choose the Custom Event option.

Selecting the Custom Event option

  1. Type in LiveChat in the Event name field and click on Save.

Saving Custom Trigger Rule

  1. Name the firing rule, e.g. gaLiveChatRule, and click on the Save button.

Naming the Firing Rule

  1. Finalize by clicking on the Save button. Again, you will be prompted with a window to rename your new tag, in e.g. LiveChatTag. Confirm changes by clicking on Save.

After you complete the setup, you will be able to use LiveChat with both Google Tag Manager and Google analytics.

Was this article helpful?

Got it!

Thanks for your feedback.

Thank you!

We’re happy to help.


Segment: live chat in your store or app

How to turn on LiveChat - Segment integration? Read more to learn how to integrate LiveChat with Segment!

Read the article

WHMCS: placing LiveChat on your site

How to add live chat software to WHMCS page in a few minutes and start chatting with clients? It's easy with live chat for WHMCS integration.

Read the article

Start using LiveChat now!

Free 14-day trial Team plan features No credit card required

Still not convinced? Discover all LiveChat features

Discover our other products