If you select 'UserGuiding' as the data source for a custom attribute, the UserGuiding embed code checks the data you've set with the 'userGuiding.track’ method.
As you may already know, custom attributes are set within segmentations as properties and can’t be used alone.
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.
In the image below, ‘guide_created’ is the key field in your event layer and we call it identifier of the custom attribute.
And the ‘guideCreated’ is a value of your end-users and required to be defined by you considering the identifier.
For each guide, hotspot, checklist and NPS survey that has this custom attribute, UserGuiding code checks the data you've sent via the 'track’ method, in order to decide whether to show them to end-users or not.
To give you an example:
1. Create a custom attribute and set ‘UserGuiding’ as the data source.
2. Create a new segment or update an existing one, and then designate the custom attribute you've created as a property.
3. In this example, the segment name is ‘Guide Created Users’ and adjectional custom attribute is ‘Guide Created’.
4. Go to the settings page of the onboarding material (guide, hotspot, checklist or NPS) and define segmentation field as follows:
5. Go to Segmentation tab within the Panel, switch to the Custom Attributes and find code snippet by clicking the icon shown below.
6. Copy the code from the popup and put it in a place in your JS code as you see fit.
That’s it! From now on, you're able to show your onboarding material for the right segment.
Sometimes, however, when your website is loaded, userGuiding object may not be ready. When you send data via 'track’ method, you may get ‘userGuiding is not defined’ error within the console.
To overcome this problem, check out the article: What does "userGuiding' is not defined error' mean?
A cookie is a user data kept in a browser.
const x = document.cookie
document.cookie = “hello=world”
When you set the cookie as your data source for a custom attribute, UserGuiding script searches for cookies and tries to find the cookie variable you've already set. If the UG script succeeds in finding it, the onboarding material appears before its defined user segment.
4. Browser Local Storage
Browser local storage is the persistent data storage of browsers.
const hello = localStorage.getItem(‘hello’)
If you select Browser Local Storage as the data source of a custom attribute, UserGuiding script searches for the data you've set in order to decide to show the onboarding material to its defined user segment.