How to use Google Analytics in a JavaScript Web Application that has file:/// URI

Question

I am developing a front-end only JavaScript web application (used technologies are HTML5, CSS and JavaScript). This application is injected into a mobile application, that takes my JS web app and displays it in a fancy way.

I would like to track user's activities in my app using Google Analytics, but the problem is that my JS application injected into the mobile app doesn't have a regular URL that is needed when using GA for websites / web apps, but it's also not a mobile application to try GA for mobile apps.. The result is a hybrid between mobile and web application and I can only edit my JS application.

I have made the following image to visualize my problem better.

Using jsconsole.com I can programatically access my app and also check its console even when it is uploaded in iPresent. There are no errors. If I alert the app's URL, I got file URI:

alert( $( location ).attr( 'href ') );

//returns file:///var/mobile/..../index.html

I have tried many solutions-wanna-be (i.e. this or this), none of them works. But I am a beginner at this field, just blindly attempting to solve this, so probably missed some important note. Cookies works fine in my apps in iPresent.

My last GA code I used:

    <script>

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    if(window.localStorage) {
        ga('create', 'UA-NUMBER-1', 'none', {
          'storage': 'none'
          , 'clientId': window.localStorage.getItem('ga_clientId')
        });
        ga(function(tracker) {
          window.localStorage.setItem('ga_clientId', tracker.get('clientId'));
        });
    }
    else {
        ga('create', 'UA-NUMBER-1', 'none');
    }
    ga('send', 'pageview');
    </script>

Is it possible to make GA work with this hybrid web application that doesn't have a regular URL, but file URI? If so, how?

Thank u!

Have you checked you GA-Account/Property if there really is nothing tracked? I mean, that the file:// URLs are not just tracked same way as http:// URLs? — fast, Oct 21 '15 at 15:06
If I add the file:///.... address in the service settings, it gives me an error due to an invalid URL address. — Very Curious, Oct 21 '15 at 15:21

score 1 · Accepted Answer · edited May 23 '17 at 12:29

I suggest you take a look at Analytics Measurement Protocol. It will allow you to track most, if not all, interactions that the Google Analtycis JavaScript does using HTTP requests to https://www.google-analytics.com/collect.

Here is a pure JavaScript example of how to make the request using GET:

var hit = 'https://www.google-analytics.com/collect?';
    hit += 'v=1';                 // Version.
    // Be sure to update the tid, Tracking ID, with your Google Analytics Tracking ID.
    hit += '&tid=UA-XXXXX-Y';     // Tracking ID / Property ID.
    hit += '&cid=555';            // Anonymous Client ID.
    hit += '&t=pageview';         // Pageview hit type.
    hit += '&dh=mydemo.com';      // Document hostname.
    hit += '&dp=/home';           // Page.
    hit += '&dt=homepage';        // Title.

httpGetRequest(hit);

function httpGetRequest(theUrl)
{
    var req = new XMLHttpRequest();
    req.open("GET", theUrl, true);
    req.send(null);
}

You should look at HTTP GET request in JavaScript? and Eloquent JavaScript Second Edition - Chapter 17 HTTP for more information about sending HTTP requests using JavaScript. If you have access to jQuery then you could also use jQuery.ajax().

Once your request has been made you can log in to your Google Analytics account and see the pageview within Reporting. You can either see it in your Real-Time >> Overview or in Behavior >> Site Content >> All Pages.

In the image above I went to Behavior >> Site Content >> All Pages, shown in red. Then I set my date range to October 21, 2015, shown in blue. The highlighted portion shows the Document hostname and Page that I set in the JavaScript hit variable. Note that I have a filter that updates the Page to also include the hostname so you might just see /home for your Page.

If you have any questions, just let me know.

I have already taken a look at AMP, but I am confused how to integrate it into my project. It a basic webpage using HTML5, CSS and JS. Could you please give me a hint? — Very Curious, Oct 21 '15 at 15:25
I edited my answer with a pure JavaScript example and some references to get you started down the right path. — Adam Huffman, Oct 21 '15 at 16:36
Thanks for a reply, Adam. I am trying this example and keep on getting req.status 0 and req.statusText empty. Was wondering - is the document host name, page and title in var hit to blame as I don't know the url? — Very Curious, Oct 22 '15 at 09:05
I believe that I should have just omitted the `console.log` from the JavaScript. The important thing is whether or not the Pageview hit registered within your Google Analytics. I forgot to point out that you will need to replace `UA-XXXXX-Y` with your Tracking ID. — Adam Huffman, Oct 22 '15 at 13:58
I made this work just by enhancing the url address a bit. https://ga-dev-tools.appspot.com/hit-builder/ helped me to create a valid hit. Thank you so much for your help! — Very Curious, Oct 27 '15 at 08:09

How to use Google Analytics in a JavaScript Web Application that has file:/// URI

1 Answers1