GaPlugin with Ionic

ionic-v1
1

Hello,

I’m having problem with GaPlugin for phonegap build on Ionic app.
I have import the GaPlugin on config.xml file:

<gap:plugin name="com.adobe.plugins.gaplugin" />

I initialize the plugin on app.js afer the Platfom ready:

.run(function($ionicPlatform) {
   var gaPlugin; 
   $ionicPlatform.ready(function() {
   gaPlugin = window.plugins.gaPlugin;
   gaPlugin.init(successHandler, errorHandler, "UA-xxxxxx", 10);
   });
})

I’m not able to get data on my Google Analytics account.
Is this the right way to call plugins?

Thanks
P.S. I don’t prefer to use ng-cordova lib.

2

And you have defined successHandler, errorHandler in your run method? in other cases you will get javascript errors.

3

Thanks @bengtler for the reply,

I change my init function adding the function on success and error :

gaPlugin.init(function(msg) {
                console.log("ga loaded "+msg);
            },
            function(msg) {
                console.log("ga failed "+msg);
            }, "UA-2341193-8", 10);

Now i’m getting successful load but I can’t see any data on Google analytics, maybe it need some time for data propagation !?

4

I spent days trying to get that plugin to work. I waited 24 hours to see if the reports would work, changed the type from a mobile app to a website, tried using different plugins (no others were supported by PhoneGap build), tried Google’s universal analytics, etc. I never got it to work. I have the same set up as you: Ionic app using PhoneGap build, and I ran into the same problems.

My solution was to set analytics to a website and use the ga.js file with GALocalStorage.js. It isn’t the ideal solution, but it works for real time and reports.

Documentation for ga.js - ga.js file
GA Local Storage
Stackoverflow question explaining this

Following this in case someone knows why the GaPlugin isn’t working. :smile:

1 Like
5

Hello @brandyshea,
thanks for your comment.

I wait for 24h but the plugin don’t work and I can’t see any data on GA, then I try your solution, but this don’t function.

I tried the solution that you have post but it doesn’t work, I’m not able to view data on GA.

I have include on index.html

<script src="js/ga.js"></script>
<script type="text/javascript" src="js/GALocalStorage.js"></script>

Where I have modify ga.js
Then after on app.js after platform.Ready :

ga_storage._setAccount('UA-xxxxxx-8');  //Replace with your own

Pls can you tell me how do you have implement this.

Thanks

6

You are replacing the ‘UA-xxxxxx-8’ with your tracking code from google analytics, correct? Also, make sure it is set as a website in google analytics and not a mobile app.

In my app.js file after platform ready I set the account and track the page it starts on:

try {
    ga_storage._setAccount('UA-xxxxxx-8');
    ga_storage._trackPageview('/ticketSearch.html', 'Search Schedules');
 } catch (e) {
     console.log(e.message);
 }

Then each time the user changes to a different “page” (which is a state in my case) I call the trackPageview function again.

1 Like
7

Hello @brandyshea,
thanks for your reply.

I insert an old Tracking Code and now all seems to work well.
Thanks a lot.

1 Like
8

I found a way to use angulartics with the dan wilson google-analytics-plugin.

You can marge in your angulartics the pull request from my repository.

9

Hello,

Someone found a solution to integrate GaPlugin with ionic and PhoneGap Build ?

10

Jep works quite well.

Create ga account and property as mobile app.

in your config:

<gap:plugin name="com.adobe.plugins.gaplugin" />

in your .run block:

// add analytics for mobile tracking
        $ionicPlatform.ready(function () {
            if (window.cordova && window.plugins && window.plugins.gaPlugin) {
                window.plugins.gaPlugin.init(function () {
                    $rootScope.gaConnected = true;
                }, function () {
                    $rootScope.gaConnected = false;
                }, 'YOUR_GA_ID', 10);
            }
        });

In my base controller:

$rootScope.$on('$stateChangeSuccess', function () {
            if ($rootScope.gaConnected) {
                window.plugins.gaPlugin.trackPage(angular.noop, angular.noop, $location.path());
            }
        });

The listener comes from the ui-router (ionics state/rounting service) - >i check if analytics is initialized correctly -> i set a flag on the rootscope (see in my run-block).
i track the current path if a state-change succeeded.

hope that helps.

11

Thank you @bengtler

Meanwhile I look for another solution (with ga.js and GALocalStorage.js) and works for me.

But I would to integrate GAPlugin.
In your solution, I don’t understand the second part (“In my base controller”).
Do you have a simple code to only check if the application is used ? (one code in .run)

12

My apps have in most cases a “base” controller… that means like you have a site:

<html ng-app="app">
   <head>...</head>
   <body ng-controller="BaseCtrl">
        <ion-nav-view></ion-nav-view>
   </body>
</html>

my different views are loaded in the ion-nav-view.
But all around there is one controller which handles common stuff or shared stuff for all views, like tracking the views dymanically.
So you can write 1 code to track all views in that base controller instead of putting the tracking stuff in each view.

greets.

13

Hello @bengtler,

I put :

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="cordova.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/services.js"></script>
</head>
<body ng-app="myApp" ng-controller="BaseCtrl">
  <ion-nav-bar class="bar-calm" animation="nav-title-slide-ios7">
    <ion-nav-back-button class="button-icon icon  ion-arrow-left-b">
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view animation="slide-left-right">
  </ion-nav-view>    
</body>
</html>

and I put in : controllers.js

angular.module('myApp.controllers', [])
.controller('BaseCtrl', function($scope, $rootScope) {
    $rootScope.$on('$stateChangeSuccess', function () {
        if ($rootScope.gaConnected) {
            window.plugins.gaPlugin.trackPage(angular.noop, angular.noop, $location.path());
        }
    });
})

I create ga account and Create new account “mobile app”

But I don’t have statistics.

14

check if the tracking code is called:

if ($rootScope.gaConnected) {
    console.log($location.path());
    window.plugins.gaPlugin.trackPage(angular.noop, angular.noop, $location.path());
}

then you have to switch to Realtime view in google analytics and you have to wait a little bit until tracking works.

15

Incase this helps, I encountered non-connecting issues as well.

I am following bengtler’s posted recommendation and using $rootScope.

It was not until I moved the gaPlugin.init above all other code that it seemed to work fine. I’m now wondering if somehow there may be a code conflict with another plugin.

I am using “Mobile” for my GA account tracking.

The plugin.xml uses the js-module so you do not need to include any .js files within your index.html for this plugin to work.

I am using phonegap build successfully with this plugin.

16

thats the same thing i posted?

17

what is the name Website’s URL we have to give in google analytic’s when we choose website

18

Hi, im also having a problem just like ingalb, but my code is like this:

var gaPlugin; // Google analytics stuff

       if(( /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent) )) {
 alert('hello world! this is a device');
document.addEventListener('deviceready', initApp, false);

} else {
alert(‘hello world! this is NOT a device’);
initApp();
}

/**

  • Init game, init google analytics
    */
    function initApp() {
    game.state.add(‘StartMenu’, BubbleWave.StartMenu);

// Init google analytics
gaPlugin = window.plugins.gaPlugin;
gaPlugin.init(onGASuccess, onGAError, “UA-x-x”, 10); // replace UA-x-x with your Tracking ID
}

I am trying to add Google Analytics in my ionic project and i included the GAPlugin, but i get this error

Uncaught TypeError: Cannot read property 'exec' of undefined

Anyone have a clue what might be the problem?