Follow user interactions with evrythng.js v5.5.0

A common use of actions and action types involves recording different types of user interaction with an app or web page. In such a use case, different action types are used to represent different types of interaction.

When deployed, the customizable Dashboard widgets are tailored to these action types in order to show insights into user behavior. For example, how many times a video was watched, or if an upsell engagement was shown to the user.

Until recently, this type of implementation involved either the manual creation of the component parts (project, application, Application User, etc.) or using a pre-prepared snippet pasted into each page. However, this process has been improved with the release of evrythng.js SDK version 5.5.0 which includes a new kind of scope - ActionApp with features and behavior specialised for this common scenario.

Using ActionApp

Similar to the Application SDK scope, and ActionApp scope is created using only an Application API Key from some application created inside a project. This needs be done once only, after loading the SDK itself:

<!-- evrythng.js SDK -->
<script src="https://d10ka0m22z5ju5.cloudfront.net/js/evrythng/5.5.0/evrythng-5.5.0.js"></script>

<!-- Actions snippet -->
<script type="text/javascript">
  // Create ActionApp scope using Application API Key
  const APPLICATION_API_KEY = '';
  var actionApp = new evrythng.ActionApp(APPLICATION_API_KEY);
</script>

Page Visits

The ActionApp scope has two methods used to easily implement this use case. The pageVisited() method creates an action of type _PageVisited including the URL in the action's customFields. You should make sure this action type exists and is in the same project scope before calling, usually directly after creating the scope, and on each other page that requires instrumentation:

<script>
  // Record that a page has been visited and its URL
  actionApp.pageVisited();
</script>

## Other Interactions

The other method is createAction() and provides a convenient way to use the managed anonymous Application User to create any other kinds of actions required for specific interactions. As with _PageVisited, you should make sure these additional action types exist and are in project scope.

An example usage of createAction() is shown below, including that custom data can be included in the action using the second parameter:

<script>
  const infoTab = document.getElementById('tab_info');

  infoTab.addEventListener('click', (e) => {
    const userId = localStorage.getItem('input_userId');

    // Create an action including the user ID who logged in
    actionApp.createAction('_InfoTabPressed', { userId });  
  });
</script>

Summary

The new version of evrythng.js includes a new scope that makes it easy to implement this kind of common use-case to gain insights into user behavior. Using this new scope removes the need for manually creating the anonymous Application User and remembering their ID and credentials, as well as creating a global helper function for action creation. Going forward, we hope to add more new features like this to make implementing common scenarios even easier for our developers.