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

Question

我想知道如何与特定屏幕集成ionic v1和google analytics 跟踪。

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

Answer 1

这个问题太大了，所以我不会涵盖每一个细节，但这里是您如何将 Google Analytics 集成到您的 ionic v1 应用程序的屏幕/选项卡中。

因为这两件事很重要，首先是Ionic Views 的生命周期事件，其次是 Google Analytics 的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 Analytic 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/