The PredictScript Developer Hub

Welcome to the PredictScript developer hub. You'll find comprehensive guides and documentation to help you start working with PredictScript as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Example: Creating a Cat Mailing List

An Example showing how to use PredictScript to not annoy your users

Suppose you run CatPics.com- a website devoted to that evergreen internet meme, cats doing cute things. On your site, you prompt users to signup for a daily email. However, like most signup prompts, this annoys users, many of whom leave.

This example shows how to use PredictScript to selectively show a signup prompt only for users who are likely to signup. It assumes you've loaded predictscript.js as detailed in Getting Started.

1. Collect features

To make predictions, you need to have features- that is properties about the user or problem that PredictScript can use to make a prediction. For instance a simple feature is "number of user page views". For our cat site, the number of times a user clicks is probably related to how much they want to get our emails. Here's some example code that uses HTML5 Local Storage to collect user features:

/**
 * Call this once per page load to update stats about user.
 * We use these stats in the model, things like total # of page views,
 * original site referrer, etc...
 */
function updateUserStats() {
  if (typeof (Storage) === 'undefined') {
    // Sorry! No Web Storage support..
    return;
  }

  if (localStorage.clickCount) {
    localStorage.clickCount = Number(localStorage.clickCount) + 1;
  } else {
    // First click- let's get some more user info
    localStorage.clickCount = 1;

    // Record first time we saw user
    localStorage.userStartTime = new Date().getTime();

    // How did user find our site?
    localStorage.referrer = document.referrer;
  }
}

2. Call predict() and label()

The page is loaded and the user is viewing. Now let's call predict() and see if the model thinks the user will signup for our email list. First we need to load the features we saved above into an object we can send to PredictScript.

function getFeatures() {
  if (typeof (Storage) === 'undefined') {
    // Sorry! No Web Storage support..
    return {};
  }
  // Load stats from localStorage into Object
  const timeSinceFirstUserClick =
    (new Date().getTime() - Number(localStorage.userStartTime)) / 1000;
  return {
    clicks: Number(localStorage.clickCount),
    userAgeSeconds: timeSinceFirstUserClick,
    originalReferrer: localStorage.referrer,
    // We can add other features too:
    pathname: window.location.pathname,
  };
}

Now we can send these feature to PredictScript by calling predict():

features = getFeatures();
// Call our "WillUserSignup" model to make a prediction about whether the user
// will signup for daily cat pictures delivered to their Inbox.  Of course this
// is silly since EVERYONE on the Internet wants cat pictures, but hey
// some creative license for an example.
predictscript.predict('WillUserSignup', features, {})
  .then((prediction) => {
    processPrediction(prediction);
  });

Now that we've made a prediction, let's see how to use and label it:

function processPrediction(prediction) {
  // Save prediction so we can label it later
  window.lastPrediction = prediction;
  // Show modal is prediction.probability > 0.5 (50%).
  // If prediction.auc is still low, then model is not yet
  // trained so do what we always do, and annoy user with
  // modal window!
  if (prediction.auc < 0.7 || prediction.probability > 0.5) {
    // This bit is tricky.  If user is annoyed, they might
    // immediately close browser and we can't set the label to false.
    // Instead, always assume user does not signup, then
    // update label to true when they do signup.
    predictscript.label(prediction.predictionId, false);

    // Let's show the signup modal!
    // This User wants cat pics delivered to their inbox for sure!
    SHOW_SIGNUP_MODAL();
  } else {
    // We're not showing the signup modal.
    // In this case we DO NOT label the prediction.  Because we
    // are not showing the signup modal, the user never has a chance
    // to signup.  PredictScript made a prediction, but we cannot
    // label the prediction because the event we want to predict
    // never happened.  This is a fairly common use case.
    // Predictions that are not labelled will simply be ignored for
    // training purposes.
  }
}

This shows how to use the prediction probability to drive your site's behavior. It also explains how to think about labelling. In this example, when we show a modal signup, we assume the user won't signup. We update the label if the user actually does sign up. That's one more bit of code. We assume this code is called the "signup" logic after the user clicks "SignUp":

/**
 * Callback called by SHOW_SIGNUP_MODAL when the user actually signs up.
 * We mark the prediction as true since the user did sign up
 */
function onSignupSuccess() {
  predictscript.label(window.lastPrediction.predictionId, true);
}

3. Check your Work

That's it from the JavaScript side. Now we can go to your PredictScript Dashboard. As you interact with your site you'll see predictions and labels start to show up here.

If everything looks good then just sit back because you're ready to go. Models will train and update automatically as users interact with your site.

4. Further Reading

Ready to dig in? Sign up and you'll be on your way.

Questions about the API? Check out the latest jsdocs for all the details.

Want to see one more example first? Continue on to Ranking Products.