Implementing User.com with Google Tag Manager

Why use Google Tag Manager?

Google Tag Manager lets anyone (even people who do not know how to code or do not have direct access to a website's code) implement certain pieces of code such as Google Analytics tracking snippet or marketing automation tracking scripts.

It also helps you move data between different services.

In this tutorial, we will take a look at how we can implement a whole marketing automation system entirely in the Tag Manager. We will set up

• User tracking,
• Event tracking,
• User identification,
• and more

Main goal is to build strong foundation for your Marketing Automation processes. Once all the neccessary data is flowing into User.com, the rest is as easy as Drag&Drop.

You will be non dependant on your Developers every time you would like to track new button clicks or scan a new form.

This tutorial examines the process based on our User.com marketing automation system. But a nearly identical process could be performed for almost any other marketing automation tool.

Before you start

Google Tag Manager implementation

Naturally, if you want to use "Tag Manager" it must be implemented first. In most cases, there either is a plugin for that, or the page already has it set.

You can read more about implementing Tag Manager here.

Login and user ID tracking

This is the one and only time that you have to ask your developer to do something for you in this process. Namely, you need to:

• track registrations
• assign unique user IDs upon registration
• show user ID and email on every pageview of a logged in visitor "dataLayer". Store the user ID value as “userid” and email as “email"

A tutorial for your developer on how to use "dataLayer" can be found here.

Turn on the PREVIEW

To start, when implementing new tags we suggest always using Preview mode, it let's you test your new implementations and debug it with ease.

Now, when you go to your website, you see everything that is going on in Tag Manager as you go through your website.

Learn more about the mode, PREVIEW, here

Stage 1. Script loading

The first thing you need to do is paste a tracking code on every page of the website. Here are the steps:

1. Go to Tag manager -> Tags
2. Create a new Tag
3. Choose Custom HTML tag
4. Paste the tracking code of your marketing automation system. (It shouldn’t be hard to find.)
5. In the window Triggering, choose All Pages as the trigger
6. In Tag firing options, select Once per page. (You will need this in next steps.)

To know which code you should pass, please go inside your user.com app to: Settings > Setup & Integrations > Google Tag Manager - where you will find your specific code.

That's it! You have just finished a basic marketing automation implementation. From now on, you should be able to talk with your visitors on chat, show them dynamic forms and pop-ups, and even change the content of the website.

However, with only the basic tracking code, you will not get more complex user data such as the email address.

Stage 2. Login data

There are two ways marketing automation systems identify you on the website: cookies and user ID.

A cookie is assigned to all users the moment they land on your page; while the user ID is assigned when someone logs in to your website.

The system can see the cookie with the basic tracking we’ve already implemented, but the user ID has to be sent to the system each time someone logs in.

With Stage 1 completed, you’re covered in regard to cookies. But you still need the user ID for users who sign up. This is where the previously mentioned registration and login tracking comes into play.

Use Tag Manager to send the user ID to our marketing automation system to identify the user. As mentioned before, your IT team should send the user ID value to "dataLayer".

1. Start tracking the user ID variable

1. Go to "Variables".
2. Create a new variable from the menu "User-Defined variables".
3. Name it “user ID”.
4. Choose Data Layer Variable.
5. Set Data Layer Variable Name to “userid”.
6. Check the checkbox, Set Default Value, and leave the input empty.
7. Save the variable.

2. Create the email variable

1. Create a new variable from the menu User-Defined Variables.
2. Name it “email”.
3. Choose Data Layer Variable.
4. Set Data Layer Variable Name to “email”.
5. Check the checkbox, Set Default Value, and leave the input empty.
6. Save the variable

3. Change the tracking code

Now that you have all this data, change your tracking code so that it passes those values on to User.com.

Add two lines to your snippet:

user_id: '',
email: '',

If you want to refer to GTM variables in "Custom Html" tags, use double brackets:

attribute_name: ''

Step 4. Set the tag to trigger only once per page

Now your tracking code will recognize logged in users and collect their email addresses upon registration.

Stage 3. Event tracking

Let’s say you want to send an automated message to everyone who viewed a specific video on your website. Before you can do this, you need to track the event, "clicking the button" and register that event in our MA system.

Here is how:

Step 1. Set up click variables

1. Go to Variables.
2. Click Configure.
3. Check all variables in the menu Clicks.
4. Save.

Step 2. Check the variables of your click event

1. Go to your website.
2. Click on the element that you want to trigger the event.
3. In the debugging panel of Google Tag Manager, on the bottom of the page, select gtm.click and go to Variables.
4. Check the click variables to find the one that will identify this click. Copy the value of this variable.

If "click" refreshes your page, remember to use "Event listening plugin" with your browser, e.g. GTM Sonar.

Note: If you do not see the "gtm.click", please create a trigger as below and test is again. You should be able to see "click" action in debugging mode.

Step 3 Register the event in Tag Manager

1. Go to "Triggers".
2. Create a new trigger.
3. Set Trigger Type to Click - All Elements.
4. Select the option Some Clicks.
5. In the drop-down menu, set the identification variable (found in the previous step). Set the operator to “contains” and paste the value of the variable from the previous step.

Step 4. Pass the event data on to User.com

1. Go to "Tags" and create a new tag.
2. In Tag Type choose Custom HTML Tag.
3. In the field underneath, labelled HTML, paste the event tracking code. Use the code below bullet point 7. You can update its name to 'search'.
4. Set the trigger of the tag to the trigger created in the previous step.
5. Select Advanced Settings -> Tag Sequencing -> tag firing options -> choose the implementation tag
6. This small change will make sure that even if the event triggered before User.com is correctly uploaded to the website, the tag will still work correctly.
7. Save, click "refresh", and it’s ready!

<script>
 userengage('event.search')
</script>

In "Preview mode", you can check if the event was properly sent. Remember to use "GTM Sonar" to listen for a click.

Remember that code with event.search name? If you've configured everything properly, the event with its name should be visible on the user's timeline.

Events with attributes

Optionally, if you want to send additional event attributes, for example: instead of saying “this person has clicked the video” you want to say “this person clicked the video with URL https …”, you have to create another variable that stores another click variable and includes it in the event tag.

Enhanced eCommerce tracking

If you are lucky enough to have the enhanced eCommerce package implemented, the job is a lot easier since you already have all the triggers and variables in place. All you have to do is pass those on to your MA system as described above. Learn how to implement enhanced eCommerce here.

Stage 4. Integrating User.com with Google Analytics

Learn how to trigger Analytics and Adwords events with User.com in this tutorial.

Related Articles

• Marketing Automation Course
• Inviting other people to GTM
• What are events and how to create them?