Google Tag Manager: add chat to your site
This article will help you with:
- Creating a Google Tag Manager account and container
- Installing LiveChat using using the GTM import tool
- Installing LiveChat manually in your Google Tag Manager
- Using Google Tag Manager with Google Analytics
Google Tag Manager with LiveChat
Google Tag Manager will allow you to add LiveChat to your website, without the need to edit your website’s source code. It can be used to install tools like conversion tracking, site analytics, remarketing audience and more. Do that with just a few mouse-clicks!
Take a look at how easy it is to add LiveChat tracking code using Google Tag Manager (GTM for short).
You don’t have to start from scratch. If you are already using GTM, jump straight to the installation part. But if you are new to GTM, follow the steps below to create a new account and your first container.
Creating 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:
- Sign in to your Google account.
- Go to the Google Tag Manager page and click Create Account.
- Choose a name for your account and click Continue.
- 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.
- Read through the GTM Terms of Service and click YES to accept them and continue.
- 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
Click OK to close the code snippet box and finish setting up GTM manager and your first container.
Installing LiveChat using Google Tag Manager
There are two main ways to install LiveChat. You can either use the import tool to quickly add both LiveChat and Google Analytics to your existing container, or choose the manual installation.
Quick installation using the import tool
Google Tag Manager lets you import and merge containers to your existing containers uploading a simple file. This way, you can add LiveChat and Google Analytics to your existing container with just one click.
To get the import file, please fill out the form below with your LiveChat login and Google Analytics tracking ID and hit Send me the import file. After a few seconds, you’ll receive the import file to your mailbox along with the installation instructions.
Follow the instructions from the email to install LiveChat and Google Analytics via Google Tag Manager.
- From your Google Tag Manager panel, click on New Tag.
- From the new window, click on Tag Configuration.
- Choose Custom HTML Tag option.
- Paste LiveChat tracking code inside the HTML container. Click on the Continue button to proceed.
- After adding LiveChat code, click on Triggering button available underneath
- Add a rule that will fire the tag on All Pages.
- Click on the Save button in order to add your new Tag.
- You will be asked to Rename your Tag – for example, you can use the name of your website. After renaming it, click on Save button.
- To finalize adding LiveChat to your site, you need to publish your container. Click on Publish button in the top right section of the screen to proceed.
- Preview the changes that you have made and, if you’re ready, click on the Publish button.
Congratulations! You’ve added LiveChat using Google Tag Manager.
Using 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.
Go through those steps to properly configure the integration:
- 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.
- In the next section, click on Tag Configuration.
- Choose the Universal Analytics option.
- Enter your Tracking ID and choose Event from the Track Type drop-down list.
- Hit macro button in the Category section.
- Click on the + button to proceed.
- Press Variable Configuration button.
- Choose Data Layer Variable from the list of available options.
- Type eventCategory in the Data Layer Variable Name field.
- Click on Save button.
- You will be asked to rename your Variable. Use gaLiveChatCategory as the name of Variable and save changes.
- 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.
- 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.
- 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.
- After you’ve set up these variables, click on Triggering button available below.
- Click on the + button available on the next screen.
- On the next screen, click on Trigger Configuration button to set up a new firing rule.
- Choose the Custom Event option.
- Type in LiveChat in the Event name field and click on Save.
- Name the firing rule, e.g. gaLiveChatRule, and click on the Save button.
- 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.