Skip to main content
Custom JS Segment Executions
Charley Bader avatar
Written by Charley Bader
Updated over a week ago

Custom JS segment executions allow you to write your own code to handle segment matching.

In a nutshell, our services are continually modelling user behaviours througout their journey as inferences, and data is surfaced frequently to inform a user's current phase in relation to their Intent. This drives segmentation and you can piggy back onto inferences in realtime.

Event capturing using segment executions

  1. Create the segment execution in the segment execution modal

  2. Copy and paste the execution code shown to you in the segment execution modal. It looks like this:

    document.addEventListener(
    'intent.campaign.CAMPAIGNID',
    function(e) {
    // Run campaign code here
    }
    );

  3. Save the segment execution

  4. When the segment matches subject to the method and trigger conditions given to it, the 'intent.campaign.CAMPAIGNID' event is dispatched and the callback function invoked

Examples

Let's create a segment execution called Run Always Once Matched On Page Load.

We chose the persisted method - i.e. once the segment matches, it always matches for the remainder of a user's session; and the on page load trigger, meaning the custom JS functions are dispatched just once per page view, on page load.

function showPopup() {
document.body.insertAdjacentHTML('afterbegin', `
<div>10% off</div>
`);
}

document.addEventListener(
'intent.campaign.66d0214f0f9186116adfbb2b',
function(e) {
// Run Custom Code Here

showPopup();
}
);

In this super simplified example, the showPopup() function will be fired when the segment you attach this execution to matches, and it will be called just once, on page load. The function will continue to be called on every page view on page load for the remainder of the user's session as we chose the persisted method.

In-flight matching example

Let's say we create an in-flight execution that triggers on every interaction (click, add to cart, page view, conversion).

The JS callback function will be fired:

  • on every interaction

  • providing that the segment matches at that point in time

When a user is no longer matching the segment, the custom JS events are no longer dispatched.

function trackAnalytics() {
track('event', 'segment-x-is-matching');
}

document.addEventListener(
'intent.campaign.66d0214f0f9186116adfbb2b',
function(e) {
trackAnalytics();
}
);

In this example, the trackAnalytics function is called which in turn dispatches events into an analytics platform. It will be called every time a user views a page, clicks, adds to cart, or converts, providing the user is matching the segment at that point in time. As soon as the user is no longer matching the segment, the events are no longer dispatched into the analytics platform.

There are a number of cases where ephemeral campaigns may make sense for you - e.g. when the experiences you deliver are only pertinent to a user at a particular phase of intent; while in other use cases, retaining surfaced UI elements i.e. persisted matching, will be better to ensure a consistent user experience.

Previewing Segment Executions

  1. Open the preview link in the Edit Segment Execution modal - this will force bucket you into the segment we want to execute the experience for

  2. Run your Custom JS code - as we're force bucketing into a segment, this code should fire subject to the trigger you defined in the segment execution modal.


โ€‹

Did this answer your question?