TruConversion on Single Page Apps

From last decade websites in JavaScript frameworks has seen a rapid increase and the rise in the single page apps. Single pages apps once were an outlier but they are now the new normal.

We TruConversion are happy to announce the support for single-page apps (SPA) in Heatmaps, Session Recordings, Funnel Analytics, Microsurveys and Customer Surveys (Soon this support will also available for Form Analytics). With our SPA support, now developers of single page apps can configure any of our tools to their site.

Tracking URL changes

By default, TruConversion will work automatically with websites built with single page app technology. In single page app technology, website visitors browse through different pages on site without having to reload the page completely. In some cases, an SPA website will still change the URL that appears in the browser, even though the page itself is not being reloaded.

Single-page apps (SPA) settings are available while adding new website screen:

Let see in details above available settings for user to switch between default and single-page apps (SPA):

Track changes automatically, including fragments

TruConversion will automatically track all URL changes including fragments. A smaller portion of SPA frameworks only change the fragment of the URL in the browser when switching to a new page. The fragment is the part of the URL that starts with a “#”. Switch to this setting if your website uses this method.

Examples of page changes that will be automatically tracked:www.example.com/page/ -> www.example.com/another-page/
www.example.com/#page -> www.example.com/#/anotherpage

Track changes automatically, excluding fragments (Default)

TruConversion will automatically track all URL path changes, meaning changes to a fragment (the part of the URL which starts with a # symbol) will be ignored. This will work perfectly for websites which do NOT use SPA technology as well as websites which make use of a modern SPA framework which automatically changes the URL which appears in your browser window without actually reloading the page.

Example of page changes that will be automatically tracked:
www.example.com/page/ -> www.example.com/another-page/
Examples of page changes that will NOT be automatically tracked:
www.example.com/#page -> www.example.com/#/anotherpage

Track changes manually

If this option is chosen, TruConversion will only track URL changes if the page is completely reloaded or if you use the JavaScript code below. This option is available in case you need, or wish, to set up tracking of page changes manually within your app’s router.

JavaScript:tcjs(“trigger”, “viewChange”, “http://example.com/changed/url”)

Example:

(function (){
    angular.module("yourModuleName", []).run(themeRun);
    
    function themeRun($rootScope, $location){
        
        ....
        
        //code snippet to report url change to TruConversion
        $rootScope.$on("$stateChangeSuccess", function(){        
            tcjs("trigger", "viewChange", $location.$absUrl);
        });
        
        ....
    }
})();

Knowledge base