Implementing User.com with Google Tag Manager
Install User.com on your website without coding skills
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 a user ID and email on every pageview of a logged in visitor in websites Data Layer. 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
When implementing a new tag, we suggest to test it first in "preview mode" before publishing the updated container. The "preview mode" lets you check if your implementation is working properly, before it starts to collect users data on your website.
Now, when you go to your website, you see everything that is going on in Tag Assistant as you go through your website.
Learn more about the preview mode here
Stage 1. Script loading
The first thing you need to do, is to add a tracking code on every page of your website. Here are the steps:
Go to Tag manager -> Tags.
Create a new Tag.
Choose Custom HTML tag.
Paste the User.com tracking code.
In the window Triggering, choose All Pages as the trigger.
In Tag firing options, select Once per page. (You will need this in next steps.)
To know which code you should pass, please go to Settings > Setup & Integrations > Google Tag Manager in your user.com app, where you will find a code with your individual "apiKey".
When adding tags in Google Tag Manager we suggest that you use "User.com" phrase in the name of the tag. It will be easier then to know which tags are related to your User.com integration when there's more of them. You can also create a folder.
That's it! You have just finished a basic marketing User.com 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 basic tracking code, you will not get more complex user data such as the email address. Let's add some additional information to your implementation script in next steps.
Stage 2. Login data
There are two ways marketing automation systems identify your users 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 data layer.
1. Start tracking the user ID variable
Go to "Variables".
Create a new variable from the menu "User-Defined variables".
Name it “userid”.
Choose a variable type: Data Layer Variable.
Set Data Layer Variable Name to “userid”.
Check the checkbox, Set Default Value, and leave the input empty.
Save the variable.
What it does is saving a variable from data layer as a GTM variable which you can use in your tags.
Remember, that we're still assuming that the name of your variable in data layer is "userid". If it's different, adjust your code accordingly.
2. Create the email variable
Create a new variable from the menu User-Defined Variables.
Name it “email”.
Choose a variable type: Data Layer Variable.
Set Data Layer Variable Name to “email”.
Check the checkbox, Set Default Value, and leave the input empty.
Save the variable
3. Change the tracking code
Now that you email and user ID for your logged in visitors, change your tracking code so that it passes those values on to User.com.
If you want to refer to GTM variables in "Custom HTML" tags, you need to use double brackets:
attribute_name: '{{your_variable_name}}'So in our case, to add "userid" and "email" add these two lines to your snippet:
user_id: '{{userid}}',
email: '{{email}}',You should end up with a script looking like this:
Keep the "Tag firing options" set to "Once per page".
Now your tracking code will recognize logged in users and collect their email addresses and id.
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. Configure "Variables" in your GTM
Go to Variables.
Click Configure.
Check all variables in the menu Clicks.
Step 2. Check the variables of your click event
Go to your website in "Preview mode"
Click on the element that you want to trigger the event for.
Go to the Tag Assistant window.
Check the click variables to find the one that will identify this click. Copy the value of this variable.
In the presented example we will use a "Click Text" value to trigger an event only when the text of clicked element is "Reviews"
Step 3. Create a trigger in Google Tag Manager
Go to "Triggers".
Create a new trigger.
Set Trigger Type to Click - All Elements.
Select the option Some Clicks.
In the drop-down menu, set the identification variable (found in the previous step). Set the operator to “contains” or "equals", depending on your use case and paste the value of the variable from the previous step.
Step 4. Pass the event data on to User.com
Go to "Tags" and create a new tag.
In Tag Type choose Custom HTML Tag.
In the field underneath, labelled HTML, paste the event tracking code. Use the code from example below. You can update it to fit your needs. In the example we use "reviews_click" as a name of the event.
Set the trigger of the tag to the trigger created in the previous step.
Select Advanced Settings -> Tag Sequencing -> tag firing options -> choose the implementation tag
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.
Click "Save"
<script>
userengage('event.reviews_click')
</script>
In "Preview mode", you can check if the event was properly sent.
Remember that code with event.reviews_click name? If you've configured everything properly, the event with its name should be visible on the user's timeline. Now you know which users read the reviews of your product on your website.
Events with attributes
Optionally, if you want to send additional event attributes, for example: instead of saying “this person has clicked the reviews button” you want to say “this person clicked the reviews button on the page which URL is "https://yourpage.com/product-name”, you have to create another variable that stores another click variable and includes it in the event tag.
Example event:
<script>
userengage('event.reviews_click', {
'url': {{yourVariableName}}
});
</script>
Enhanced eCommerce tracking
If you are lucky enough to have the Enhanced Ecommerce tracking standard implemented, the job is a lot easier since you already have all the triggers and variables in place. Learn how to implement User.com on a website with Enhanced Ecommerce standard here.
Stage 4. Integrating User.com with Google Analytics
Learn how to trigger Analytics and Adwords events with User.com in this tutorial.