1. UserGuiding

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.


Here is an example application:

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.

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?

2. Cookies

A cookie is a user data kept in a browser.

It is stored in the document object and can be set and or get with the javascript as follows.

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. 

3. Global Javascript (window)

Global javascript variables are declared to ‘window’ and accessible from any function.

If you set your end-user properties to global javascript, UserGuiding script can read it. Therefore, in order to segment your end users, these properties can be used as well.

4. Browser Local Storage

Browser local storage is the persistent data storage of browsers.

With javascript, data can be get from/set to local storage as follows:

const hello = localStorage.getItem(‘hello’)

localStorage.setItem(‘hello’, ‘world’)

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.

5. Custom Javascript Function

If you segment an onboarding material (guide, hotspot…) with the custom javascript function, the function's itself is carried out by UserGuiding script and its return value is used for deciding whether to show these materials to the end-users.

Protip:
If you want to send a variable to the custom javascript function, you can use ‘window’ object.

Related Articles:

What is Custom Attribute?
Creating Custom Attributes

Did this answer your question?