Personalise your site for user segments with our JavaScript SDK

There are three functions in our JavaScript SDK that allow you to personalise the content of a page based on your users traits and behaviours. events, query and trigger.

In this article we'll build a site personalisation using the query function. You can read more about all of the functions in our JavaScript SDK.

Introduction to permutive.query

Queries and Segments are two of the core concepts of Permutive, they're used to answer questions on your users based on their behaviours.

permutive.query allows you to get the result of a query, or the state of a Segment for the current user, and react accordingly. In our demo, we will use it to show a special discount in our fictional 'Permutive Store' cart. It will be offered to customers who have added items to their cart.

Adding items to cart is a user event. It is tracked in Permutive with permutive.track. If you'd like to know more about tracking events in Permutive have a look at our SDK documentation.

Creating the Segment

The first step is to build the query in the Permutive Segment Builder. You can see our criteria defined below.

Now we've got this Segment built, we can reference it in the Javsascript SDK.

Creating the Trigger

The final step is to add the function to your site. Here's the code we'll use to add our special offer.

Permutive.query is used to check the state of queries and segments.

permutive.query("QueryButtonClicked", function(result){  
    if (result.result) {
    // The user meets the NeverPurchased criteria
    document.getElementById("specialOffer").style.visibility = "visible";
  } else {
    // The user does not meet the criteria
    document.getElementById("specialOffer").style.visibility = "hidden";
  }
});

Try it yourself

We run Permutive on our blog, and we've added the function above to our page. Try clicking the button below, then refreshing this page.

If we wanted the page to update instantly we could use permutive.trigger. In our hypothetical shop though, changing on refresh is okay.

After you've clicked the button, the offer will remain on this article for all future visits. You now meet the criteria of our segment.

Special offer for you!
20% off your order with code "TRYUS"

Christiaan Hendriksen

Writing guides and tutorials to help you get the most out of Permutive. Get in touch at christiaan@permutive.com.

London

Subscribe to Permutive Blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!