ionic 1 在特定屏幕中集成特定的谷歌分析

Question

我想知道如何将ionic v1 与google analytics 集成在一起 并跟踪特定屏幕。

例如，我想拥有谷歌分析代码 UA-XXX 并跟踪特定导航（tab1、tab2 等）

Answer 1

这个问题太广了，所以我不会介绍每一个细节，但这里是如何将 Google Analytics 集成到 ionic v1 应用的屏幕/选项卡的方法。

因为这两件事很重要，第一是life cycle events of Ionic Views，第二是谷歌分析的cordova-plugin-google-analytics。

对于每个选项卡应该有一个控制器，并根据您的跟踪要求在该控制器中添加离子视图的生命周期事件。以下是可用的事件：

首次视图初始化

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

从一个视图到另一个视图的转换

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

但我认为您可能只遇到以下两个事件，enter 和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);
});

参考资料：

• 查看此链接了解有关使用 Google 的详细信息 分析 API： https://www.npmjs.com/package/cordova-plugin-google-analytics#javascript-usage
• Ionic View 生命周期事件的工作示例： https://codepen.io/anon/pen/eKBgVg
• 简单的文章解释离子视图生命周期事件： https://www.gajotres.net/understanding-ionic-view-lifecycle/