In this article, we focus on and illustrate creating user segments with custom attributes when the selected data source is the Browser Local Storage. An example use-case and sample images are used for a better explanation.
What is a Custom Attribute?
In UserGuiding, segmentation means to divide end-users into groups, or segments. Later on, each group you've created can be matched with a specific guide or a hotspot.
Custom attributes are segmentation properties that you create within UserGuiding's Dashboard to define specific user segments for your guides, hotspots, NPS survey, and etc.
You can create any kind of user segment that is special to your audience base if you create a custom attribute first. So, everybody can see the guides that are directed to them.
How to Create a Custom Attribute?
To create a custom attribute, find the Segmentation Tab in UserGuiding dashboard and when you arrive in the Segmentation page, switch to the Custom Attributes section, then click on +NEW ATTRIBUTE button.
While creating a new segment, you can create a new custom attribute on the fly.
How to Create a Custom Attribute
1. Set an identifier for your custom attribute.
Identifier: It is the custom attribute's name. The key field in your event layer is called the identifier of the custom attribute. It sets the user property you want o make trackable.
2. Select a data format from the menu.
Data Format: It could be Text, Number, Boolean, or Date. The value of the segment should be in the data format you select.
3. Select a data source from the dropdown menu.
Data Source: It is the medium between the user data and UserGuiding's container code. By the agency of the selected Data Source, you can share certain user data to be utilized for creating a custom attribute.
In other words, if you make a certain user data available for the embedded UG container code via the data source you select, it can pass through this snippet (container JS code) and be used as a segmentation property. This is actually how custom attributes function.
If you want to learn more, read Custom Attribute Data Sources.
Example Use-Case as Browser Local Storage is the Data Source
Web applications can store data locally in the Browser Local Storage and the stored data is kept across browser sessions.
Userguiding can use Browser's Local Storage data to segment end-users of your platform.
Important: Before selecting the Local Storage as the Data Source of your Custom Attribute, make sure that certain user data is available in your local storage and UserGuiding Container code can read it.
If you don’t have the user data to be read available inside the selected data source, please inform your development team so they can set the required data to the local storage.
1. How to check if the user data is set to Browser Local Storage
Look at the below example and see how you can check the presence of user data in Browser's Local Storage.
Go to your application's page. It can be any page containing the container code.
Open Chrome dev tools via right-click and click on Inspect.
Go to the Application tab.
Find the Browser's Local Storage in the left-hand menu and click.
Click on the website URL you are currently on.
In the example above, the data set to Browser Local Storage is in the format of the key-value pair.
2. How to Create the Custom Attribute in UserGuiding Panel
As it is shown at the beginning, go to panel.userguiding.com and:
Click on the +New Attribute Button.
Create your attribute by filling the fields given in the opening window.
Notice, in the below example, the identifier is userRole. It is the key field in our event layer.
The data format is text and the data source is the Browser Local Storage.
Finally, save your work.
3. How to Create Segments with the Custom Attribute: "userRole"
Go back to the segmentation page and:
Click on the +New Segment Button.
Select the userRole as the segment property.
Set the segment condition with a rule and a Value (visitor).
Save your work to create your segment.
4. How to designate a custom segment to its appropriate guide, hotspot or, etc.
Go to your guide's settings page.
Here, find the Audience Segmentation section.
Click on Custom Segmentation to select the suitable user segment from the opening dropdown menu.
After matching the guide with its appropriate segment, SAVE the final settings.
Finally, click on green Publish Changes on the upper left of the page, to update the live version of your guide, by updating the container code.
You can test the guide's behavior in your application containing the embedded Userguiding code.
Other guide settings like Status, Page Targeting, Trigger should be taken into consideration while testing.
The outcome of our example is that the guide will be only shown to end-users who are visitors.