Skip to main content
Client Side SDK
Charley Bader avatar
Written by Charley Bader
Updated over 3 months ago

⚒️ This page is under active development.

The Intent Client Side SDK allows you to work with Intent data in real time.

Intent Event Bus

Registering events on the event bus allows you to receive events and dispatch them to one or more destinations in real time.

Subscribe

Executes a callback function when Intent makes a prediction based on the event type you subscribe to.

Example

intent.bus.subscribe('event', ({
inferenceData,
sessionMatchedSegments,
eventMatchingSegments
}) => {
console.log(
inferenceData,
sessionMatchedSegments,
eventMatchingSegments
);
});

Description

intent.bus.subscribe(
<event-type>,
<function(inferenceData, sessionMatchedSegments, eventMatchingSegments)>
)

Parameters

Description

<event-type>

The type of event that was dispatched based on user activity on site.

Expected Values:

interaction - (dispatched on every page view, add to cart, conversion, click)

event - as interaction, but including beacon events dispatched during periods of site inactivity

click - dispatched on every click

page_view - dispatched on every page view

add_to_cart - dispatched on every add to cart

conversion - dispatched on every conversion

<function.inferenceData>

The response data returned from Intent's modelling service

<function.sessionMatchedSegments>

An array of all segments that have matched in the user's current session.

<function.eventMatchingSegments>

An array of all segments that matched for this event, i.e. right now.

Example: Matching Multiple Segments

Let's say you want to run some code when the two segments with IDs "focussed-browsers:mwi_v2" and "unengaged-browsers:mwi_v2" have matched at any point in the current user's session, and you want to run this code every time a user interacts with the page:

intent.bus.subscribe('interaction', ({
inferenceData,
sessionMatchedSegments,
eventMatchingSegments
}) => {
if(
sessionMatchedSegments.includes("focussed-browsers:mwi_v2") ||
sessionMatchedSegments.includes("unengaged-browsers:mwi_v2"))
{
console.log('at least one of them matches or matched in the past...');
}
});

Previewing Segments

Append the following query string to your site:

?intent=1&qa=1&segment=SEGMENT_ID1&segment=SEGMENT_ID2&segment=SEGMENT_ID3

This will force matching the segments with IDs you specify (replace SEGMENT_IDs with the IDs of the segments you want to match).

You should clear local storage to exit preview.

Using the Made with Intent script’s listen function

Similar to the Segment Match scripts, the listen function runs every few seconds based on the when the Made with Intent data updates in real time. The listen function allows campaigns to be triggered based on other criteria besides segments. In the example below, the campaign will trigger if the customer’s current buying stage is either Deciding or Committing.

window.intent.inference.listen((data) => {
if (
data?.buying_stage?.label === 'Deciding' ||
data?.buying_stage?.label === 'Committing'
) {
// Trigger your campaign for customers who are Deciding or Committing
}
});

How to view the Intent data in real time in the browser

You can view the real-time Intent data from any web browser’s developer console. To do this in Chrome, go to View -> Developer -> Developer tools.

In the Console tab of the developer tools, paste in this code:

JSON.parse(localStorage.getItem('intent.inference.last')).data;

This will return a snapshot of the data, including the various properties that could be used in combination with the listen function to build an experience.

How to trigger a campaign only once per browser session

Both Segment Match scripts and the Intent listen function will run every few seconds as the data updates. However, it’s common requirement that a campaign should fire only once per visit to your site in order to avoid a frustrating user experience.

To achieve this you can set variables in the browser’s Session Storage to ensure that the customer only experiences your campaign once during their browsing session.

Here is an example of how to do that in combination with a Segment Match script:

// Early Session Hoppers
document.addEventListener(
'intent.segmentation.match.' + 'early-session-hoppers',
function(e) {
if (!sessionStorage.getItem('campaign-triggered')) {
sessionStorage.setItem('campaign-triggered', 'true');

// Trigger your campaign here ...
}
}
);

In the example above, every time the Segment Match condition is met (ie. the customer is an Early Session Hopper) the code will check to see if there is an item in the browser’s Session Storage called campaign-triggered. If the item is NOT present, the code will create that item and trigger your campaign. The next time the Segment Match is triggered, it will see that the campaign-triggered item already exists, and will not trigger the campaign again.

Note that a Session Storage item can have any name, but it is public-facing and visible to anyone who opens the browser’s developer console.

Did this answer your question?