Single Page App and people tracking - Angular, React, Ember,...

Single page applications (SPA) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app without a page refresh.

Bare.js player

First, include the Inline Manual JS library file (or replace the previous standard player) in your HTML head element. We will be using the "bare" player, which is the player without init.

<script>
!function(){
var e=document.createElement("script"),t=document.getElementsByTagName("script")[0];
e.async=1,e.src="https://inlinemanual.com/embed/player.[api_key].bare.js",e.charset="UTF-8",t.parentNode.insertBefore(e,t)}();
</script>

Set the people tracking

Once the user is logged in you can prepare the inlineManualTracking object as:

<script>
  window.inlineManualTracking = {
    uid: "1",
    email: "john@doe.com",
    username: "johndoe",
    name: "John Doe",
    created: 1360610467,
    updated: 1433168312,
    roles: ["admin", "editor"],
    group: "Doe & Partners Inc.",
    plan: "Gold"
  }
</script>

To initialize the Player for the very first time, call:

createInlineManualPlayer(window.inlineManualPlayerData);

window.inlineManualPlayerData is already part of the bare.js player, no need to define it.

On state change

When the application moves to a different page (or there is a state change) where you want to re-check the metadata and automation, you will need to call the update method.

inline_manual_player.update();

This will check for the latest profile with stats about plays and then it will trigger re-running the autolaunchers against latest data.

Further help

If you need to wait for createInlineManualPlayer and you don't have any functionalities within your current framework, you can use the script below. Or get in touch to verify your installation.

var retries = 0;
var timer = setInterval(function () {
if (typeof window.createInlineManualPlayer !== 'undefined') {
   createInlineManualPlayer(window.inlineManualPlayerData);
   clearInterval(timer);
 } else if (retries > 100) {
   clearInterval(timer);
 }
 retries++;
}, 50);