If you want to segment your customers using the JavaScript snippet provided when you create a segment using Visit Custom Event as a segmentation rule, you need to execute a script and reload Nosto on the back of the execution of the JavaScript call.
This article covers how to get started, implement and review whether the segmentation efforts work accordingly.
Before you start
Create a new segment and use Visit Custom Event as a segmentation rule. Once selected, define a unique string. The snippet is ready to be used and can be triggered under any condition onsite (onload, onclick, ...).
In the example above, we will use this snippet as part of a side-by-side overlay when users click on a specific element.
Implementing the snippet
Click here for full screen
Looking at the side-by-side overlay above, let's explore the triggered actions when users click the element with the class nosto-hero-banner1.
Executing the snippet & reloading Nosto
On click and as we can see with the Event Listener, the following snippet will be executed:
When users click the element, let's explore the snippet being triggered:
Click here for full screen
In line #5, we can see the same snippet needed to segment the customer in the relevant Shoppers clicking on urban banner segment.
Note that Nosto is instantaneously reloaded after the snippet is executed. See lines #8 in this example.
Here is the documentation to reload Nosto.
For reference, you can use this code below, which is a simplified version of the code displayed in the screenshot above. Feel free to adjust the snippet string to match the one representing the segment you want to add customers to and you are good to go!
_targetWindow.document.querySelector(".button").addEventListener("click", function() {
_targetWindow.nostojs(function(api) {
// record segment code in the visit
api.addSegmentCodeToVisit("code")
// trigger request to nosto to get segment code applied
api.loadRecommendation()
// reload the page with new experience applied
_targetWindow.location.reload()
})
})
If you want to double check if you are correctly segmented as a user, you can take advantage of the Nosto Debug Toolbar and use the segment-specific panel under Features. You must be logged in to the Nosto Debug Toolbar to access the segment-specific panel.
Click here for full screen.