ionic 1 integrate specific google analytics in specific screens

Question

I would like to know how to integrate ionic v1 with google analytics and to track specific screens.

For example, I want to have google analytics code UA-XXX and to track specific navigation (tab1, tab2, etc)

Answer 1

This question is too vast so I am not going to cover each and every detail but here is how you can integrate Google Analytics to your ionic v1 app's Screens/Tabs.

For this two things are important, first is life cycle events of Ionic Views and second is Google Analytics's cordova-plugin-google-analytics.

For each Tab there should be one controller and in that controller add the Ion View's life cycle events as per your tracking requirement. Below are the available events:

FIRST TIME VIEW INITIALIZATION

View 1 – loaded
View 1 – beforeEnter
View 1 – enter
View 1 – afterEnter

TRANSITION FROM ONE VIEW TO ANOTHER

View 2 – loaded
View 2 – beforeEnter
View 1 – beforeLeave
View 2 – enter
View 1 – leave
View 2 – afterEnter
View 1 – afterLeave

But I think you may meed only below two events mainly, enter and leave:

$scope.$on('$ionicView.enter', function(){
  // Your Google Analytic event code of your choice
  window.ga.startTrackerWithId('UA-XXXX-YY', 30);
});

$scope.$on('$ionicView.leave', function(){
  // Your Google Analytic event code of your choice
  window.ga.startTrackerWithId('UA-XXXX-YY', 30);
});

References:

• Check this link for detailed information about usage of Google Analytic APIs: https://www.npmjs.com/package/cordova-plugin-google-analytics#javascript-usage
• Nice working example of Ionic View life cycle events: https://codepen.io/anon/pen/eKBgVg
• Simple article to explain ionic views life cycle events: https://www.gajotres.net/understanding-ionic-view-lifecycle/