UserLeap

The UserLeap Developer Hub

Welcome to the UserLeap developer hub. You'll find comprehensive guides and documentation to help you start working with UserLeap as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Guides

Web - Google Tag Manager

Introduction

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 UserLeap. 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 Installing UserLeap via 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 UserLeap)

📘

Info

Some coding, or at least knowledge of javascript and HTML, will be required.

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, we recommend contacting marketing first.

Another option is to check via the inspect option in your local browser (video below)

To open the inspect window in Chrome, you'll want to right-click and select "Inspect". From there, make sure you are on the elements tab in the developer window, and press Control+C (or Command+C on Mac)

For further verification, look for a GTM container ID. The ID will always start with GTM.

Installing The Codebase

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

To install the UserLeap codebase, you’ll need to do these two things:

  1. Create an environment ID variable and add it to Google Tag Manager
  2. Create a tag that consists of your environment ID variable and a trigger (default to all page views

Environment ID

The Environment Id found on the Connect>JavaScript page.

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 your UserLeap 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. UserLeap supplies its own custom tag template which can be found in the tag library.

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 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.

UserLeap 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 UserLeap’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 UserLeap, each survey requires a trigger. 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 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

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 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 UserLeap.

  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 UserLeap an attribute of planType that could carry any one of those three values.

There are many options to send attributes to UserLeap 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 customer information 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 UserLeap, under Survey Filters, with the name PlanId.

Updated about 2 hours ago

Web - Google Tag Manager


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.