Instrument with Actions

The actions API allows the creation of discrete notifications or events that are attributed to action types that impart meaning upon them. By creating actions of different action types it becomes possible to draw on some insights from the analytics provided in the EVRYTHNG Dashboard. In addition, actions have customFields, allowing you to add any additional data about the user's behaviour, page location, or errors encountered that may also be required.

This walkthrough will demonstrate a simple use-case of actions and action types - instrumenting a web page or web application to record the frequency of different kinds of user interaction:

When a page is loaded.
When a button is pressed (that does not cause the browser to navigate away)
When an error occurs.
Some other kind of page interaction not concerned with navigation.

To help implement this kind of application of actions as quickly as possible, we provide a special feature of the evrythng.js SDK for you to add to the web page or application to be instrumented.

Getting Started

The instrumentation consists of the following process:

Create an anonymous Application User to represent the visitor.
Record an action of type _PageVisited, including the domain URL visited.
Make available a function createAction() that can be used to create an action at any other point.

In order to create an Application User, you must first create a project and application using either the Dashboard or API. Once this is done, make a note of the Application API Key (not the Trusted Application API Key) for use later on.

Finally, create the _PageVisited action type if it does not already exist (using either the Dashboard or API), as well as any other types you will use in instrumenting your web page. For example: _VideoWatched, _UserLogin, or _BasketCleared. Make sure these action types are scoped to the same project that was just created, or they will not be available for the anonymous Application User to use.

## Code Example

The following snippet should be placed as-is in to the <body> of the web page(s) to be instrumented, with only the following minor modification:

Set a value for APPLICATION_API_KEY with the Application API Key you noted earlier.

<!-- 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);
  
  // Record that a page has been visited
  actionApp.pageVisited();
</script>

Once the browser loads this snippet, three things will occur:

An anonymous Application User is created, and their Application User API Key remembered for subsequent visits.
An action of type _PageVisited is created, with the current window.location.href included in customFields.
A function createAction() is available from the actionApp object for use anywhere required.

To create the additional actions to _PageVisited, such as the examples mentioned before, use the createAction() function at the appropriate time. For example, in a button's click handler:

🚧
Imporant
For each action type used, the corresponding action type resource must be created in the same project scope first, including the automatic _PageVisited action type.

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 });  
});

Results

In this way, many different types of user interaction or event can be tracked anonymously, and the data shown on appropriately configured Dashboard widgets. An example is shown below:

Getting Started

🚧Imporant

Results

🚧
Imporant