Google Analytics integration into Oracle JET using autotrack.js

ADF applications behave more like a SPA (Single Page Application), so unlike traditional websites, pageviews are not tracked correctly. Specifically, when navigating within taskflows.

To overcome this, you have to send a ‘fake’ page view, and manually set the page context (I plan to write a blog post on how to do this in ADF).

This same issue translates to Oracle JET applications (probably even more so). Luckily, Google have acknowledged this problem, and there is even a library that can take care of the heavy lifting for us.

Enter autotrack.js, which contains a plugin called ‘urlChangeTracker’. The plugin listens to changes to the URL via the History API and sends additional pageviews.

autotrack.js

To install autotrack, run the following npm command:

npm install autotrack --save

Then modify your oraclejet-build.js file, to move your new library into your staging directory upon build:

copyCustomLibsToStaging: {
     fileList: [
       {
            cwd: 'node_modules/autotrack/',
            src: ['*.js'],
            dest: 'web/js/libs/autotrack'
        },
            {
            cwd: 'node_modules/autotrack/lib/plugins/',
            src: ['*.js'],
            dest:'web/js/libs/autotrack/plugins'
        }
     ]
},

Require your new dependency in your main.js file:

require(['ojs/ojcore', 'knockout', 'appController', 'ojs/ojknockout', 'ojs/ojmodule', 'ojs/ojrouter', 'ojs/ojnavigationlist', 'ojs/ojbutton', 'ojs/ojtoolbar', 'autotrack'],

Add the following code snippet into the head section of your index.html file, replacing [tracking code here] with your Google Analytics tracking code.

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', '[tracking code here]', 'auto');
ga('require', 'urlChangeTracker');
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

Google Analytics working in a JET SPA with autotrack.js

You can find more information about autotrack.js here, its a brilliant tool which lets you do more than just track SPA pageviews. It could come in useful when you come to track more user interaction with events.

— DC