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 are special to your audience base, if you create a custom attribute first. Thus, in this article, we will show you how to create custom attributes.
* Utilization of the Custom Attribute feature requires experience over coding. It is recommended to ask the help of a developer teammate.
Where to start?
First of all, arrive at panel.userguiding.com
You can find the Segmentation Tab under the “Customization” section in the left-hand menu.
Click on it, and 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?
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.
What are the Data Sources?
You have many options to decide on which medium will make the data containing user attributes accessible. This way, it can pass through your code snippet (container JS code) and be used as a segmentation property.
For instance, if you select 'UserGuiding' as the data source, the code snippet (container JS code) checks the data you've set through 'userGuiding.track’ method.
Because, when you embed UserGuiding code to your website, the code defines ‘userGuiding’ object to the window. This object’s ‘track’ method allows you to send segmentation data to UserGuiding code.
To learn more about Data Sources, check this article out.
An example practice:
Let's assume, in your web platform, your customers differ from each other based on product plan they use as users having freemium plan and premium plan.
And you've just released two different new features each for a different plan, and you want to promote these features with UserGuiding guides.
That's why, you designed two custom guides and now, you need to direct each of them, separately, to the correct user segment having the following custom attribute.
1. Creating the Custom Attribute
In the above image, ‘customer_type’ is the key field in your event layer. It is the identifier of the custom attribute.
Text is our Data Format. Since the value of your user segment is in text form.
Data source is UserGuiding. So, the code snippet (container JS code) will check the data you've set through 'userGuiding.track’ method.
If you click on SAVE, you will see the following code snippet.
Copy the code below and insert it into your application (A developer can decide on the snippet's location).
6. The value in your event layer (code) should change with respect to the customer type as free or premium.
Expected code tracking snippet if the customer's plan type is freemium:
And, if the customer's plan type is premium:
2. Creating the Segments with the custom attribute: "customer_type"
Go back to segmentation page and create two different user segments.
Select the customer_type as the segment property.
Set their conditions with a rule and a value (user property).
Segment of users whose plan type is freemium:
Segment of users whose plan type is premium:
3. Designating custom segments to their appropriate guide
Go to each guide's settings page.
Click on Custom Segmentation to select the suitable user segment from the opening dropdown menu.
After matching each guide with their tailored segment, SAVE the final setting of the guide.
Finally, click on green Publish Changes on the upper left of the page, to update their live version too, by updating the container code.