Integrating Angulartics with Ionic Framework

Question

I am trying to use Angulartics with Ionic Framework. However, nothing is tracking on google analytics. Here is how a set it up.

1. index.html.slim file

   <script src="lib/angulartics/src/angulartics.js">
   <script src="lib/angulartics/src/angulartics-ga-cordova.js">
   

   javascript:

   (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');
   ga('create', '#{ENV['GOOGLE_ANALYTICS_ID']', { 'cookieDomain': 'none' });` 
   

2. Added it to my angular module

   angular.module('app', ['angularMoment', 'angulartics', 'angulartics.google.analytics.cordova', 'ngCordova'])`
   

3. Adde $analyticsProvider to my config in routes

   .config ($analyticsProvider, $stateProvider, $urlRouterProvider) ->
   

I am not getting any data on my google analytics Dashboard. Can someone please explain how to install Angulartics in my ionic project.

Answer 1

Please take a look at the angulartics-ga-cordova script file here: https://github.com/luisfarzati/angulartics/blob/master/src/angulartics-ga-cordova.js

On line 48, it is expecting the GAPlugin.

var analytics = window.plugins && window.plugins.gaPlugin;

You will need to add this script to your main index file. https://github.com/phonegap-build/GAPlugin

Then you can add your google tracking info like this.

myApp.config ($analyticsProvider, googleAnalyticsCordovaProvider) ->
    $analyticsProvider.firstPageview(true)
    googleAnalyticsCordovaProvider.trackingId = GOOGLE_ANALYTICS_ID

Also, if you are using phonegap build, you will need to add the following line to your config.xml file.

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