No tracking when starting offline

[fredmanders]

Hi!

I installed your plugin in my Ionic hybrid app. I've also added a send(screenview) on my $stateChangeSuccess to track screens. When the app starts with an internet connection, it perfectly tracks screens and events. When I go offline, it'll store it in the array. When I go back online, it'll send it to Google. Perfect!

But when the app opens without internet connection and THEN gets internet, it'll create the tag and start working perfectly again. But it has lost all the screens and events from before it had internet. Are there any plans to incorporate that? Or am I using it wrong?

My code:

.config(configure);

configure.$inject =  ['AnalyticsProvider'];

function configure (AnalyticsProvider) {
    AnalyticsProvider
      .setAccount([])
      .delayScriptTag(true)
      .setDomainName('none')
      .startOffline(true)
      .setHybridMobileSupport(true);
}

.run(runBlock);

runBlock.$inject = ['$rootScope', 'Analytics'];
function runBlock($rootScope, Analytics) {

$rootScope.$on('$cordovaNetwork:offline', handleOffline);
$rootScope.$on('$cordovaNetwork:online', handleOnline);
$rootScope.$on('$stateChangeSuccess', handleStateChange);

function handleOffline() {
  Analytics.offline(true);
};

function handleOnline() {
  Analytics.createAnalyticsScriptTag();
  Analytics.offline(false);
};

function handleStateChange(ev, to, toParams, from, fromParams) {
  // Google Analytics screen tracking
  Analytics.send('screenview', {
      screenName: to.name,
      appName: $rootScope.appName,
      appVersion: $rootScope.appVersion
  });
};

// My login controllers authenticate success callback

function cbAuthenticateSucces(response) {   
  // Get app information and set in Analytics
  $cordovaAppVersion.getVersionNumber().then(function (version) {
    $cordovaAppVersion.getAppName().then(function (name) {

      // Create Analytics tag
      var gaOptions = {
        tracker: 'UA-00000000-0',
        trackEvent: true
      };

      $rootScope.appName = name;
      $rootScope.appVersion = version;

      var clientId = localStorage.getItem('GA_LOCAL_STORAGE_KEY');
      if(!clientId){
        clientId = $cordovaDevice.getUUID();
        localStorage.setItem('GA_LOCAL_STORAGE_KEY', clientId);
      }

      gaOptions.fields = {
        storage: 'none',
        clientId: clientId,
        userId: response.ResourceId
      };

      Analytics.configuration.accounts.push(gaOptions);

      if($cordovaNetwork.isOnline()) {
        Analytics.createAnalyticsScriptTag();
        Analytics.offline(false);
      }
      $state.go('dashboard');
    });
  });
}

Would it also be possible to keep the screens and events when the app closes completly, by storing them in localstorage?

Thank you for your feedback.

[justinsa]

What is happening here is that you are starting the script in offline mode and then collecting a bunch of screen and event calls. Then you tell it to inject the GA script and register it. Then you go online. When the script goes online it then re-plays everything in the queue, in order. Do you see how that isn't correct? Your registration happens after all of the events, so they aren't tracked by GA because analytics hasn't been setup properly until the tracker registration happens.

This should be quite easy to fix on your end. Your configuration is fine. You just need to:

1. Replace 'Analytics.createAnalyticsScriptTag();' with Analytics.registerScriptTag(); inthe 'handleOnline' method.
2. Add the following line to the start of the 'angular.run' method:

Analytics.registerTrackers();

Because you are in offline mode the tracker registration will be added to the queue of commands to run once you go online. You want that to be the first thing in the queue.

Note: The Analytics.createAnalyticsScriptTag is deprecated because it is not able to support advanced scenarios.