navigator.analytics is undefined

[barriosnahuel]

Hi, I'm new using analytics from Cordova app and I can't get it work.
First of all I installed your plugin by:

cordova plugin add https://github.com/cmackay/google-analytics-plugin.git

After that, I imported analytics.js in my index.html like this:

<script type="text/javascript" charset="utf-8" src="plugins/com.cmackay.plugins.googleanalytics/www/analytics.js"></script>

and then in my scripts (imported after your analytics.js):

analytics = navigator.analytics;
console.log('analytics: ' + analytics); // prints undefined
analytics.setTrackingId(GOOGLE_ANALYTICS_TRACKING_ID); // fail 'cuz of undefined

Do you know how to solve it? Thanks a lot!

[cmackay]

Hi, you should't have to import the analytics.js script. As long as you are including the cordova.js script and you used the 'cordova plugin add ' command to install the plugin, it should work. In your project are you able to use other plugins successfully? Just to confirm the project is setup properly. Let me know if you continue to have a problem. Thanks!

[barriosnahuel]

Hey! Thank you very much for answer me so quickly.
I removed the imports and all other plugins are still working well. Thanks for that too.
But the error is the same, navigator.analytics is undefined.
What other information should I give you to help me?
Thanks!

[cmackay]

If you were to do the following does it work:

cordova create analytics-test
cd analytics-test
cordova platform add [platform]
cordova plugin add https://github.com/cmackay/google-analytics-plugin.git

then I added a line to default www/js/index.js

alert(navigator.analytics);

and ran cordova emaulate and after loading it showed that the navigator.analytics is defined.

If you were to do a quick test like that, does it work for you?

This may help in determining if it is a cordova version issue or a possible configuration issue in your project. Let me know if the above works for you.

[cmackay]

also just to clarify, the line I added to the default www/js/index.js was in the receivedEvent function. This way we know the device is ready.

Let me know if that works for you. Thanks!

[barriosnahuel]

It worked in the emulator as well as on my testing device (Android API 10), then I'll check my project configuration. Thanks a lot and excuse me for the lost time!

[cmackay]

No problem. I would probably compare the configuration to the default project and see whats missing. Good luck with it!

[aspirekaushal]

hi,
i have the same issue in iphone only(working in android). navigator.analytics is undefined in ready function
but it can be get in controller.
can you tell me what may be problem.

myApp.run(function($ionicPlatform,$ionicViewService,$ionicNavBarDelegate, $window, $rootScope,$state) {
$ionicPlatform.ready(function() {
console.log(' $ionicPlatform.ready $ionicPlatform.ready ');
//get device id
$rootScope.device_id = device.uuid;
$rootScope.analytics = navigator.analytics; //get undefined here.

// set the tracking id

$rootScope.analytics.setTrackingId('');
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}

});
});

[cmackay]

@aspirekaushal

To isolate the issue, maybe append the following javascript to the end of your scripts:

var onDeviceReady = function () {
  alert(navigator.analytics);
};
document.addEventListener('deviceready', onDeviceReady, false);

if the alert displays undefined, it is probably an project configuration issue.

if not, it is probably because in your code when the navaigator.analytics is accessed the device ready event has not yet occurred.

When I am using Ionic, I manually bootstrap the angular app using the following:

  function onWindowLoad() {

    if (!(!window.cordova && !window.PhoneGap && !window.phonegap)) {
      // when on device add document deviceready listener
      window.document.addEventListener('deviceready', onDeviceReady, false);

    } else {
      // when on browser trigger onDeviceReady
      onDeviceReady();
    }

    // remove window load listener
    window.removeEventListener('load', onWindowLoad, false);
  }

  // add window load listener
  window.addEventListener('load', onWindowLoad, false);

  function onDeviceReady() {

    // bootstrap angular app
    angular.element(window.document).ready(function () {
      angular.bootstrap(window.document, ['YOUR_MODULE_NAME']);
    });

    // remove document deviceready listener
    window.document.removeEventListener('deviceready', onDeviceReady, false);
  }

Also I recently made a little ionic starter app that uses browserify and other technologies. If you are interested in checking it out, it is at:

https://github.com/cmackay/ionic-todos/

So, hopefully the above will help you in troubleshooting your app. Let me know if you have any questions.

-Craig

[brnardo]

Hi Craig,

great work on this, it's the first GA plugin that I can install with no hassle. I'm currently getting same error described here while testing in the browser. You mention cordova.js has to be included but that returns a 404 while testing in the browser. Is this the same reason why setTrackingID is undefined?

[cmackay]

Hi @brnardo,

Thanks for your feedback. Most of the time when that error occurs it is often related to trying to access the plugin prior to the deviceready event being called. Also the plugin will not work when doing browser testing since it uses the native sdks. Are you running on the device/emulator and if so are you accessing the navigator.analytics after the deviceready event?

Thanks,

-Craig

[brnardo]

It works now, I added it to $ionicPlatform.ready. Thanks!

[rjdjohnston]

Hello. I'm having the exact same issue. Create an analytics test project as you suggested above. The alert prints undefined in the analytics test project. Running Cordova v 3.5.0-0.2.6. Any suggestions on how to get the plugin to load?

[cmackay]

Are you accessing the plugin after the the deviceready event?

var onDeviceReady = function () {
  alert(navigator.analytics);
};
document.addEventListener('deviceready', onDeviceReady, false);

[rjdjohnston]

I can get an alert to print Object object when setting up my index.html like:

<script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <script type="text/javascript">
      app.initialize();
  </script>
<script src="js/app.js"></script>

The index is setup like:

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        navigator.splashscreen.show();
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        console.log('Received Event: ' + id);

        var analytics = navigator.analytics;
        //alert(analytics);
        // set the tracking id
        analytics.setTrackingId('UA-30038254-1');
    }
};

When I alert(analytics) in index.js I can see in iOS debug the Google Analytics plugin load message. However, if i don't alert(analytics) no message is reporting successful load in iOS. I don't know if this provides useful information.

The problem is I can't access analytics or navigator.analytics from my app.js file. This is where i keep all my application logic. Whenever I tried to load, print, anything navigator.analytics or analytics it's errored out as undefined.

[cmackay]

If you create a new cordova project and try to use the plugin, does it work for you? This might help in determining what the problem is. Try something like the below and let me know if you see the alert that has an object defined.

cordova create analytics-test
cd analytics-test
cordova platform add ios
cordova plugin add com.cmackay.plugins.googleanalytics
echo "document.addEventListener('deviceready', function () { alert(navigator.analytics); }, false);" >> www/js/index.js
cordova run ios

[rjdjohnston]

Now it is printing there.. Didn't the first time I set it up. Forgot to say I'm running JQM 1.4.3 with JQuery 1.10.2 in my application.

[cmackay]

If it is working in a clean cordova project than it has to be an issue with how your application code is initialized. You should try to verify the deviceready event is triggered. After that point the navigator object should have a reference to analytics. One thing I noticed in the code you posted above is that the inline script block to call app.initialize() is before the app script, which seems like that would be one issue. If I was using jquery in a cordova app, I would probably create a function to be called on the jquery ready event that then sets up the deviceready event listener.

maybe something like:

$(function () {
  document.addEventListener('deviceready', function () { 
    alert(navigator.analytics); 
  }, false);
});

Some other suggestions for troubleshooting is to test in the ios simulator and use remote debugging in safari. As a quick test, after connecting to simulator app instance I cut and pasted the below code into the safari debug console and I immediately saw an alert with the initialized analytics object.

  document.addEventListener('deviceready', function () { 
    alert(navigator.analytics); 
  }, false);