Client Side SDK | Made With Intent Help Center

⚒️ 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.

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.