Single Page Application website

In the current documentation we will call a Single Page Application (SPA) a website that is composed of only one page, which dynamically load the content of all other screens by doing ajax calls to the backend. Websites built with AngularJs, Angular, React, VueJS etc… usually are Single Page Application Websites. In a SPA, when the user browses the website, the header of the html page is never reloaded (and this is why we need a dedicated script that do not need to be reloaded everytime the user start a new use case.

Script integration

The script shall be included without any parameters in header of the html page (the sooner, the better):

...
   <script src="<%= signalCollectorUrl %>/api/v2/tenants/<%= tenantId %>/scripts"></script>
...

First View of a Use Case

When the customer starts a new Use Case, a new visitId shall be generated. As there is no specific stuff to perform, the shortcut ifp_initUseCaseAndView can be used:

...
   ifp_initUseCaseAndView(conf, function(visitId){doSomethingWithTheVisitId(visitId);});
...

Then, just before the user leaves a view, the following method has to be called. This method sends the latest information about this page to the signal collector:

...
   ifp_finalizeView(visitId, function(){loadTheNextView();});
...

All other views of the Use Case

When the browser displays a new View to the customer, the following method has to be called to initialize the profiling and to send the first profiling data to signal collector:

   ...
   ifp_initView(visitId, conf);
   ...

Then, just before the user leaves a view, the following method has to be called. This method sends the latest information about this page to the signal collector:

   ...
   ifp_finalizeView(visitId, function(){loadTheNextView();});
   ...