Web - Google Tag Manager

📷

UserLeap is now Sprig

We might have changed our name, but you don't have to change a thing!
All of your surveys, integrations, and code will continue to function properly with no action required.

Introduction

📘

Info

You will need edit permissions to make changes to the Google Tag Manager container. We recommend editing and publishing permissions to submit changes.

Google Tag Manager (GTM) is a free-to-use container that allows the user to quickly deploy and manage the installation of code, usually javascript, on a website. Once installed, you can use your GTM integration to send events and attributes to Sprig. Installing with GTM will allow you to:

  1. Identify users that are completing an action on your website/in-app product
  2. Create events for the actions your users are taking on your website/in-app product
  3. Display surveys based on a customized event
  4. Filter to a specific audience, based on user-passed attributes (like planType)

Here are some of the benefits of using Sprig with Google Tag Manager:

  • Little to no coding needed*
  • Deployment can be done in minutes
  • The out-of-the-box solution encompasses most, if not all, user tracking needs
  • Most install-based products provide their own custom template (Including Sprig)

📘

Info

Some knowledge of javascript and HTML is necessary.

GTM Already Deployed

Usually, a Google Tag Manager deployment is managed by marketing in an organization. If you are unsure whether or not it is currently being used, consider contacting the group that manages the website that you want to launch microsurveys.

Another option is to check via the inspect option in your web browser.

  1. To open the Inspect window in Chrome, Firefox and Edge, press Control+Shift+I (or Option+Command+I on Chrome and Safari for Mac).
  2. Make sure you are on the Elements tab (or Inspector tab in Firefox), then press Control+F (or Command+F for Mac) to open the search field. Firefox displays the search field by default.
  3. Search for the string GTM. If GTM is already deployed, you should get results similar to the following:
    <script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXXX-X"></script>. The container id XXXXXX-X is specific to your deployment.

Adding Sprig to GTM

Two steps are needed to add Sprig to GTM:

  1. Create an environment ID variable and add it to GTM.
  2. Create a tag that consists of your Environment ID variable and a trigger.

Environment ID

The Environment Id are found on the Connect>JavaScript page.

  1. Click Connect > JavaScript
  2. Confirm which Environment you are in. Based on the current Environment , note the Development ID or Production ID.
  3. Start the GTM app and proceed with the task as described in the following video.

Open up the Variables section of Google Tag Manager.

Create a new user-defined variable.

We’ll name this new variable UL_EnvID (Production) and make this a constant variable type.

Add the environment ID below and then click Save.

Installation Tag

Now that we have the environment ID and the trigger (All Pages - in GTM by default), we can put it all together inside a tag. Sprig/UserLeap supplies its own custom tag template which can be found in the tag library. In the interim, as we transition from UserLeap to Sprig, search for the old company name UserLeap.

Click Tags and then click on New.

Let's give the tag a title.

Now we’ll locate the UserLeap tag from the Google Tag Manager library and add our environment ID variable (UL_EnvID) along with the All Pagestrigger (there by default)

To locate the UL_EnvID variable we just created, you'll want to click on the "lego-looking" icon in the "Environment ID" field below. Once finished, click on the triggering portion for us to add our All Pages trigger

Once you've added the trigger, click Save in the top right.

Finally, we'll Submit all our changes. You have now installed Sprig/UserLeap across your webpage/web-based application.

User Identification

Receiving UserIDs

If you have any questions, please reach out to [email protected] or contact us via the in-product help chat.

Sprig allows you to identify visitors by supplying a userId. While tracking UserIDs is optional, it provides a consistent experience across platforms and prevents users from seeing the same survey multiple times. Here’s a quick overview of Sprig’s survey eligibility window.

📘

Info

UserIds are unique, and the process will differ from client to client. This section is indicative of our own setup. For specific questions, please email [email protected] or reach out to us via the in-app product support.

Custom JS Variable

Open the Variables section, next select New.

📘

Info

At this step, you may require some assistance from a developer to determine what function/variable on your website/app stores and assigns user IDs.

Add a custom JavaScript variable.

Let's add a new trigger specifically for this new UL_UserID variable we just created.

We can call this trigger UL_Overview Page & >0.

Overview Page = URL on UserLeap where I want the app to send visitor userids for tracking

>0 = Second criteria that MUST be met for the tag to fire. Only fire this tag, `UL_UserIDis NOT 0

The trigger we create will be a Page View trigger

All triggers must be contained within a tag before we can deploy them. So next, we'll create another UserLeap tag - this one for UL_UserID.

Let's give the tag a title UL_UserID tag.

Now we’ll locate the UserLeap tag from the Google Tag Manager library and add our user ID variable (UL_UserID) along with our new UL_Overview Page & >0 trigger.

To add the UL_EnvID and UL_UserID you'll need to click on the respective 'lego-looking" icon in the image below. Add in the trigger as well. When finished, click Save.

Submit your changes.

Tracking Events

Setting up Triggers

️ Warning

The types of triggers will vary as per your individual use-case, for more information on what all is possible please visit Google Tag Manger's trigger configuration documents

In Sprig/UserLeap, each survey requires a trigger. Sprig/UserLeap triggers, not to be confused with Google Tag Manager triggers, determine when and where to survey users. A helpful way to think of a trigger is “the action that causes your survey to appear”. Here are some common Events that people use to trigger a microsurvey:

  • Finished Onboarding
  • Visited Dashboard
  • Logged In
  • Canceled Subscription
  • URL matches

With Google Tag Manager, no coding is required to send these events to Sprig/UserLeap. To do this, you’ll need to complete the following steps, which we walk you through below:

  1. Make sure the triggers (such as clicks, page views, scrolls) are configured in the variables tab
  2. Apply the relevant trigger(s) to the container
  3. Apply trigger to tag, and publish

For an alternative to creating No Code events, you can also perform this directly in the Sprig UI via the No Code option.

Configuring Built-in Variables using Google Tag Manager

In this example, we are going to configure an event that tracks a specific button on your website and add that to Sprig/UserLeap

‌Out of the box, without the need for any custom code, Google Tag Manager allows you to track events such as clicks, pages, scrolls, etc. Let's go ahead and enable these variables.

Please note that you do not need to configure all of these variables, only the ones you foresee needing/wanting Google Tag Manager to track. Variables that are NOT assigned to a trigger will not have an impact on your Google Tag Manager implementation

Click on Variables.

Select Configure

Select all the variables you want to enable

Apply Triggers to Track an Event

This specific event trigger is for click-text (i.e. targeting the text given to a button in the CSS of a page- also known as inner text).

Let's name this UL_Click Text - [Name of Button]

Let's create a new trigger that helps us track anytime someone clicks on button text. We'll name this trigger UL_Click Text - [Name of Button]

Click on the Triggers container on the left.

Give your Trigger a name, we provided an example name above but feel free to customize it.

Once you click on the “Trigger Configuration” portion, you’ll want to select the All Elements trigger type.

After selecting the “All Elements” trigger, make sure you change to fire on “some clicks”. Next, filter for Click Text and contains [name of your button text]

Create a Tag to House the Variable and Trigger

When complete, don't forget to Publish to make the changes live on your website.

Remember, all triggers must be part of a tag before we can deploy them. So next, we'll create the UserLeap tag for this click-text event.

  1. Let's give the tag a title. We’ll name it UserLeap_Events_Clicked-on-Analytics.
UserLeap Events Clicked-on-AnalyticsUserLeap Events Clicked-on-Analytics

UserLeap Events Clicked-on-Analytics

  1. In the Environment ID field, click on the respective 'lego-looking" icon. Select the environment variable you created previously.

  2. In the Event Type field, select Event.

  3. In the Event Name field, type in "Clicked on Analytics".

️ Warning

Do not use dynamic naming in the Event Name field. It may cause performance issues as it will capture ANY click event tracked by GTM and then send it to Sprig.

  1. In the Firing Trigger field, select the trigger that you created

  2. Click Save.

  3. In the Event Name field, type in "Clicked on Analytics".

  4. Make sure to publish your changes by click on Submit.

📘

Info

if you want to test your variables, tags, and triggers before deployment, refer to this documentation from Google

Attributes

Receiving Attributes

Like events, attributes are just another way to enhance your microsurvey targeting functionality. While events are triggered behaviors that occur on the client-side, attributes can be thought of as groups or segmentations that are assigned based on that behavior.

For instance, if I’m a SaaS company and I have three plans (free, growth, and enterprise), I might consider sending Sprig an attribute of planType that could carry any one of those three values.

There are many options to send attributes to Sprig using Google Tag Manager (see below)

  1. Send from GTM’s data layer
  2. Write a custom javascript variable that defines a variable (attribute) and correctly determines the value(s) that should be assigned
  3. Utilize local storage
  4. Work with 3rd party cookies

This guide will cover the first option, the Google Tag Manager Data Layer

What is The Data Layer

The data layer stores information that is critical to your business and works as a middleman between Google Tag Manager and external applications (Ad accounts, Analytics Tracking, etc).

How to Check Your Current Data Layer (if Applicable)

  1. First you’ll need to make sure you have Google Tag Manager installed.
  2. Open up the development console and then type in window.datalayer
  3. Press return

To open the development console use Ctrl + Shift + i (command + Shift + i on Mac).

How to Push to Data Layer

If you are just getting up to speed on how the GTM data layer works, we recommend speaking to an in-house developer or someone that owns the internal tag repository.

Generally speaking, the easiest way to create the data layer is using the datalayer.push() method

Note: The GTM data layer is created by default when you deploy your GTM container

Using the Data Layer to track Events and Attributes

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'formLocation': ‘footer’,
 'event': 'new_subscriber'
 });
window.dataLayer = window.dataLayer || []; 
window.dataLayer.push({ 
 'event': 'checkout', 
 'customerInformation': [{
        'planid': '52',
        'planName': 'Essentials - 20k',
        'costPerMonth': 79
      }]
});

How to Create a Data Layer Variable in GTM

<head>
   <script>
dataLayer.push({
'customerInformation': [{
'planid': 52,
'costPerMonth': 79,
'planName: 'Essentials - 20k'
'teamid': 12345
 }]
});
   </script>
   <!-- Google Tag Manager -->
   ...
   <!-- End Google Tag Manager -->
</head>

In order to create a variable, you’ll need to specify the Data Layer key of which value you want to retrieve. These are key-value pairs, and in the example above might look something like this

Key: customerInformation

Value: planid, planName, costPerMonth, teamid

Step By Step Instructions

Go to Variables, and add a new User Defined Variable.

Select a Data Layer Variable, give it a name (we recommend a naming convention to keep everything organized).

Then we’ll want to add in the key (the name of the variable). In the example below I have to specify planid using dot notation since it's an object within the customerinformation variable.

Once finished, we’ll just add it to a UserLeap tag and deploy. Make sure the tag dropdown is set to User Attribute. The key and value can be set dynamically using the configuration seen below. As for the trigger, all pages is what we recommend.

You should start to see an attribute in Sprig, under Survey Filters ](../../../product-definitions/interacting-with-survey-filters-and-triggers.md), with the name PlanId.