Google Tag Manager Tutorial

How to use Google Tag Manager to integrate the Remote API

Using the Tagmanager to manage advanced Userlike setups? Check out our new Widget Router feature, which is as powerful but easier to set up and maintain! More on Userlike Widget Routing

In this tutorial we will show you the detailed process of an advanced chat setup using the Userlike Remote API and the Google Tag Manager.

The objective of the setup is:

  • Show the normal Chat Widget on all pages
  • Show a proactive Chat Widget during the checkout process.

We use one Chat Widget which is set to use the Remote API mode. The rest of the logic is done by URL matching and tags with the Tag Manager.

Prepare the widget

Change your default Chat Widget to use the Remote API.

Step 1

Create a new Tag Manager container for your website.

Step 2

Create a new "Tag".

Step 3

Select the tag type "Custom HTML".

Step 4

Name it "Proactive" and paste the Userlike Widget Code. Make sure to check the option "Support document.write".

Step 5

Create another "Tag". Name it "Normal" and paste the Userlike Widget Code. Make sure to check the option "Support document.write".

Step 6

Create a new "Tag"...

Step 7

Name it "Checkout" and add a URL match pattern for your checkout page, like "contains: checkout"

Step 8

Create another "Tag". Name it "Not Checkout" and add a URL match pattern for all URLs despite your checkout page, like "not contains: checkout"

Step 9

Edit the "Normal" tag and add a "Firing Rule".

Step 10

Select "Not Checkout" rule and save.

Step 11

Edit the "Proactive" tag and add a "Firing Rule".

Step 11

Select "Checkout" rule and save.

Step 13

Publish your setup and you are ready to use the chat.