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_KEYwith 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
_PageVisitedis created, with the currentwindow.location.hrefincluded incustomFields. - A function
createAction()is available from theactionAppobject 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
_PageVisitedaction 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:
Updated about a year ago