Installing the tracker: Google Tag Manager
Setup the DataLayer
For the Google Tag Manager script to know when one of your trial users is logged in, we need to make sure we're passing key user data (ID, email etc) to GTM's Data Layer.
First, we need to locate in your website's code where your GTM code is installed. For example, in our case our GTM code can be located as follows:
So for example, in our case, we'd end up pasting the Data Layer code as follows:
Your Data Layer code has now been installed. Note that you will need to populate the user and customProperties fields with real data from the user that is logged into your site. That's out of scope of this guide. Once you've setup Google Tag Manager and you are ready to populate these attributes with real data from your user, head over to our Identify Your User guide.
Create the GTM Variables
Now that the GTM DataLayer has been setup on your website, we now need to make sure that GTM knows about the variables that you'll be sending to it. This is a quick step but a really important one.
First, click on the Variables menu item on the left sidebar when logged into GTM.
On the page that loads, you'll see a User-Defined Variables section. Press the New button as shown below.
Let's name this new Variable OnboardFlow_User. To do this click into the Untitled Variable placeholder at the top of the screen and replace it with OnboardFlow_User.
Next, click anywhere in the Variable Configuration section.
Next, select Data Layer Variable as the Variable Type.
And finally, set the Data Layer Variable Name to user (all lower case, as shown below).
Press Save and the variable has now been created.
Now repeat all of these steps one more time (so that we can setup the second and last variable), except this time call the Variable OnboardFlow_CustomProperties and set the Data Layer Variable Name to customProperties
Create the GTM Tag
We're now pushing the Data Layer to GTM based on the user that is logged into our site and GTM now knows about these data variables. We're now ready to create the GTM tag. To do this head back to the Overview section (when logged into GTM) and click the Add a new tag link to create the new tag.
Next, replace the Untitled Tag placeholder with OnboardFlow, so that you'll know what it is later one.
Next, press anywhere in the Tag Configuration section, as shown below.
You'll now be asked to choose the tag type. Select Custom HTML, as shown below.
You'll now be asked to add the custom HTM. Copy and then paste into this box the Custom Tag Code provided to you when setting up the site within OnboardFlow. If needed, you can locate this by heading back into the setup area.
Once pasted, click anywhere on the Triggering section below, as shown in the following screenshot.
You'll now be asked to choose the Trigger. Simply click the All Pages option, as shown below.
Once selected, press the Save button top right of the screen to save the Tag.
The Tag has now been install... but it's not yet active. Let's head to the final step.
Publish GTM Changes
Well done for getting this far. A few steps, but hopefully nothing too taxing. With all of the above setup, all we need to do now is publish the changes and Google Tag Manager will start initialising the OnboardFlow script on your website.
To do this, click the Submit button that can be found on the top right of the screen when accessing the main GTM dashboard page.
And that's it. Your custom GTM Tag will now be deployed to your site.
With the Tag now deployed... don't forget to properly identify your user so that OnboardFlow knows who is logged into your site.