Help Center

When installing Usetiful, it is possible to add the capability to efficiently segment your users.

For example, if your product has different user tiers or subscription plans, such as Free users, Premium users and more, it is easy to segment users. There are multiple ways in Usetiful to show different tours to different classes of users.

In this article, we will consider how to show different tours to different classes of users on an example - we have two user categories - Free and Premium, and we want to show a different tour to each of them. 

Depending on the context, there are three different ways to achieve the above. We will go from the most reliable solution to the easiest. 

1. Using tags

2. Using a part of the URL

3. Using an element on the screen

1. Using tags

Using tags to segment users is the most reliable technique, because

- it does not rely on ever changing UI elements and their attributes (classes, ids, etc)

- it does not rely on URL structure - which is also prone to change over time

Setting up targeting by tags will require involving a developer and adding a specific logic to how the pages are loaded in the application / website to complete the setup.

The fundamental idea behind tags is that on different pages a slightly different Usetiful script is being loaded, and that indicates to the Usetiful system which specific tour needs to be displayed on that page. 

The differences in the Usetiful script occur when we select one of the targeting options in the installation window below

In the code snippet below, take a look at the bolded part

<script>
window.usetifulTags = {
tagName: "tagvalue",
tagNameAnother: "tagvalueanother"
};
</script>

tagName can be replaced by any attribute of the user that views the page - language, location, subscription plan or anything else. tagValue is the actual attribute value. 

In our example, for a Premium user, here's how it would look

plan: "Premium",

Usetiful will enable you to target the content based on values in these tags. Targeting can be set up using the condition "Tag value" in the page targeting. Find out more here.

At the same time, we need to setup targeting of the plan that is designed for the Premium users as below

This will ensure that on the page which contains the Usetiful script with tag plan: "Premium" will only be shown the desired tour. 

You can customize tags entirely by yourself. However, the pages need to be setup in a way to programmatically be served with appropriate Usetiful scripts. 

A single user can have none, one or multiple tags assigned.

Examples of tags and their values:

Please note that tag names and tag values must be of data type string - for example "abcd", "abcd123" or "123" but you can use operators to compare them even with numbers (lower than or higher than).

Did you know that you can personalize messages to your users using tags? Find out more here!

2. Using a part of the URL

If there is an indication of the subscription plan in the URL when users sign in, we can segment users by URL, and show a different tour to each of the plan users. 

For example, the URL of the dashboard for free users is https://www.myapp.com/free/dashboard

And the respective URL for premium subscription is https://www.myapp.com/premium/dashboard

All we have to do is to create two different tours - one for the Free plan users and one for the Premium plan users, and target each of them to the precise URL of their respective dashboard. Here is how the settings will look like

We want to ensure that the tour designed for the Free plan users only starts on page https://www.myapp.com/free/dashboard
For this, we will leverage URL Regular expression targeting

Note: the URL regular expression used in this example is ^https:\/\/www.myapp.com\/free\/dashboard$ which will only match to https://www.myapp.com/free/dashboard strictly. The tour will not start on ANY other page. 

Similarly, for Premium users, the settings will be as follows

For this case, the URL regular expression in use was ^https:\/\/www.myapp.com\/premium\/dashboard$, which will only strictly match https://www.myapp.com/premium/dashboard

If there is an indication of the page language in the URL, or any other attribute, the setup will be similar.

3. Using an element on the screen
If there is an indication on the page that the user belongs to one of the two categories, it means that we can use it to segment users. For example, in many products the user category is shown in the account, as below

You can see that in my account above, my subscription plan is shown - Premium.

To display a specific product tour to all users who use the Premium subscription, we will leverage the targeting of the tour by element content.  

See the setting below

We need to input the element selector (which we can find by inspecting the element) and the text content, which is the word "Premium".

To find the selector, use the Usetiful browser plug-in for Chrome. Click on the plugin icon and select "Open panel"

You will see the plugin panel open from the bottom of the screen

Click "Select element" and hover over the element that will serve as the indicator. You will see that the plugin displays the selector, and once you click on the element, the selector will automatically be copied. You can then paste it in the targeting settings. 

To find the selector in the browser, right click on the element, and select "Inspect". Then copy the element selector and paste it in the settings of the tour. 

The final set of settings for this tour will look like below

This setup will ensure that the tour will only be displayed if the user is in Premium plan. Segmenting by language is achieved in a similar manner - given there is an indication of the language in which the page is being used. 

Note: for every user plan or language there needs to be a separate product tour, with their respective settings.