Help Center

When installing Usetiful, you can easily segment your users to display tailored product tours. For example, if your product supports different subscription plans like Free and Premium tiers, Usetiful offers flexible ways to target specific user groups and provide a customized onboarding experience.

In this guide, we’ll explore how to show different tours to different user segments. We'll use an example where we have two categories: Free and Premium users.

Three Ways to Segment Users

Depending on your setup and technical preferences, there are three ways to segment users in Usetiful. We'll cover them in order of reliability and complexity:

1. Using Tags

2. Using a Part of the URL

3. Using an Element on the Screen

1. Using Tags

Tags are the most reliable way to segment users. This method doesn’t depend on changing UI elements or URL structures, which can evolve over time. Instead, tags are programmatically set in the application, ensuring stable targeting.

Benefits of Tags:

• Independent of UI attributes like classes or IDs.

• Resilient to changes in URL structures.

Setting up tags requires a developer to modify the application logic to include relevant tags when pages load.

How Tags Work:

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,

<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",

<script>
window.usetifulTags = {
  plan: "Premium",
  language: "en"
};
</script>

Setting Up Targeting:

Once tags are implemented, you can configure targeting in Usetiful to display the appropriate tour (Find out more about setting up targeting here). For example, to target Premium users, set the condition to Tag value = Premium in the targeting settings.

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

Examples of tags and their values:

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

Note: 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). Example below,

2. Using a Part of the URL

If your application's URL includes user-specific information, such as the subscription type, you can use it to segment users.

Example:

• Free users: https://www.myapp.com/free/dashboard

• Premium users: https://www.myapp.com/premium/dashboard

Setting Up Targeting:

Create two tours—one for Free users and one for Premium users—and target each to its respective URL using regular expressions:

• Free users:

  • Regular expression: ^https:\/\/www\.myapp\.com\/free\/dashboard$

• Premium users:

  • Regular expression: ^https:\/\/www\.myapp\.com\/premium\/dashboard$

This setup ensures that tours only start on their intended pages.

Other Use Cases:

If your URLs indicate other attributes, like language or region, you can follow a similar setup.

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. 

3. Using an Element on the Screen

If user-specific information (e.g., subscription type) is displayed on the page, you can use it to segment users. For example, a user’s account details might display their plan as “Premium.”

How to Set Up Targeting:

1. Use the Usetiful browser plugin to select the relevant element (Find out more here),

   • Open the plugin panel.

   • Click "Select Element" and hover over the indicator (e.g., the text showing “Premium”).

   • The plugin will display and copy the element’s selector.
     
     
     

2. In Usetiful, configure targeting using the selector and text content (e.g., plan = Premium).

Example:

If the selector for the element is .user-plan and it contains the text “Premium” configure the targeting as follows:

• Selector: .user-plan

• Content: “Premium”
  
  

Note: Ensure a separate product tour is created for each user plan or language, with corresponding targeting settings.

Usetiful provides multiple ways to segment your users and deliver tailored experiences. Whether you choose tags, URLs, or elements, each method has its unique advantages. For the most robust and scalable solution, we recommend using tags.

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