让你的微信小程序支持谷歌统计(Google Analytics).zip

# 谷歌统计 (Google Analytics) SDK 微信小程序专用 Google Analytics SDK for Wechat's Mini Program 完整实现了 [Measurement Protocol](https://developers.google.com/analytics/devguides/collection/protocol/v1/reference)，并且API接口和 [Google Analytics for Android](https://developers.google.com/analytics/devguides/collection/android/v4/) 保持高度一致。 ## 快速入门 #### 1. Google Analytics 设置 <del>在账号下新建媒体资源，跟踪内容选 `移动应用` ,跟踪方法选 `Google Analytics（分析）服务 SDK`, 最后得到 `跟踪ID (Tracking ID)`</del> 新版已经不能直接创建`移动应用`类型的媒体资源了，因为选了`移动应用`就需要连接Firebase中的移动项目。 解决办法是创建媒体资源的时候，选择`网站`，等创建完成后，新建一个数据视图，这时候可以选择`移动应用`，然后删掉那个默认的视图。这样创建就不需要和Firebase的项目关联了。具体操作可以看 [Add Google Analytics to Android app without Firebase ](https://stackoverflow.com/questions/45853012/add-google-analytics-to-android-app-without-firebase) ，有详细操作步骤。 #### 2. 在你的微信小程序项目添加 `ga.js` 文件 如果你使用[WePY](https://github.com/Tencent/wepy)或者[mpvue](https://github.com/Meituan-Dianping/mpvue)框架来开发小程序，也可以通过npm安装 ```bash npm install git+https://github.com/rchunping/wxapp-google-analytics.git#v1.2.2 ``` #### 3. 在微信小程序后台设置request合法域名 <del>把 `www.google-analytics.com` 添加到request合法域名中。</del> 因为`www.google-analytics.com`域名未备案，无法添加到小程序的request合法域名中，需要自己准备一个已备案的域名做数据转发，比如`ga-proxy.example.com`。 如何配置转发见（[issue 4](https://github.com/rchunping/wxapp-google-analytics/issues/4)） > **提醒：** 合法域名每个月只能设置5次。如果只是本地开发测试，可以先不用设置，只要把开发工具里面`开发环境不校验请求域名以及 TLS 版本`勾选一下，等递交审核前再去设置合法域名。 #### 4. 框架 `app.js` 中修改 ```js var ga = require('path/to/ga.js'); var GoogleAnalytics = ga.GoogleAnalytics; App({ // ... tracker: null, getTracker: function () { if (!this.tracker) { // 初始化GoogleAnalytics Tracker this.tracker = GoogleAnalytics.getInstance(this) .setAppName('小程序名称') .setAppVersion('小程序版本号') .newTracker('UA-XXXXXX-X'); //用你的 Tracking ID 代替 //使用自己的合法域名做跟踪数据转发 this.tracker.setTrackerServer("https://ga-proxy.example.com"); } return this.tracker; }, // ... }) ``` #### 5. 找个`Page`来尝试一下简单的ScreenView统计 ```js var ga = require('path/to/ga.js'); var HitBuilders = ga.HitBuilders; Page({ // ... // 一般在onShow()里处理ScreenView onShow: function(){ // 获取那个Tracker实例 var t = getApp().getTracker(); t.setScreenName('这是我的首屏页'); t.send(new HitBuilders.ScreenViewBuilder().build()); }, // ... }) ``` #### 6. 去谷歌统计后台看一下 实时 > 概览 一切正常的话，几秒钟后就能看到数据了。 ## 代码示例 ### 跟踪器 Tracker 跟踪器用来收集数据并发送给谷歌统计服务器。跟踪器跟谷歌统计的媒体资源相对应，你可以创建多个跟踪器分别对应不同的媒体资源。 ```js var ga = require('path/to/ga.js'); var GoogleAnalytics = ga.GoogleAnalytics; var app = getApp(); //获取微信小程序的App实例 // 初始化GoogleAnalytics var gaInstance = GoogleAnalytics.getInstance(app); gaInstance.setAppName('小程序名称'); // 设置APP名称 gaInstance.setAppVersion('小程序版本号'); //设置APP版本号，[可选] // 创建一个跟踪器 Tracker var tracker = gaInstance.newTracker('UA-XXXXXX-X'); // 参数是谷歌统计媒体资源中的 跟踪ID (Tracking ID) //使用自己的合法域名做跟踪数据转发 tracker.setTrackerServer("https://ga-proxy.example.com"); ``` 多数情况下我们只需要用一个跟踪器，因此建议在 `app.js` 中全局共享一个跟踪器: ```js // app.js var ga = require('path/to/ga.js'); var GoogleAnalytics = ga.GoogleAnalytics; App({ // ... tracker: null, getTracker: function () { if (!this.tracker) { // 初始化GoogleAnalytics Tracker this.tracker = GoogleAnalytics.getInstance(this) .setAppName('小程序名称') .setAppVersion('小程序版本号') .newTracker('UA-XXXXXX-X'); //使用自己的合法域名做跟踪数据转发 this.tracker.setTrackerServer("https://ga-proxy.example.com") } return this.tracker; }, // ... }) ``` 跟踪器的使用（一般在`Page`逻辑中） ```js // /pages/index/index.js Page({ // ... onShow: function(){ // 获取全局跟踪器 var t = getApp().getTracker(); // 后续的所有匹配数据都会使用这个屏幕名称。 t.setScreenName('这是首页'); // t.send(Hit) 上报数据 }, // ... }) ``` ### 匹配构建 HitBuilder 用来构建一次匹配所需要的所有参数，`HitBuilder` 提供了所有匹配类型都需要的一些公共方法。 一般不需要直接使用 `HitBuilder` , 请根据实际匹配类型使用下面的 `ScreenViewBuilder`, `EventBuilder`, `ExceptionBuilder`, `TimingBuilder` ### 屏幕 ScreenView 屏幕表示用户在您的小程序内查看的内容。 ```js var ga = require('path/to/ga.js'); var HitBuilders = ga.HitBuilders; Page({ // ... // 一般在onShow()里处理ScreenView onShow: function(){ // 获取那个Tracker实例 var t = getApp().getTracker(); t.setScreenName('当前屏幕名称'); t.send(new HitBuilders.ScreenViewBuilder().build()); }, // ... }) ``` 支持自定义维度和指标（你需要在Google Analytics后台预先定义好） ```js t.send(new HitBuilders.ScreenViewBuilder() .setCustomDimension(1,"维度1") .setCustomDimension(2,"维度2") .setCustomMetric(1,100.35) .setCustomMetric(2,200).build()); ``` > **提醒：** 自定义维度和指标在所有 `HitBuilder` 上都能设置。 ### 事件 Event 事件可帮助你衡量用户与你的小程序中的互动式组件的互动情况，例如按钮点击等。 每个事件由 4 个字段组成: **类别**，**操作**，**标签**和**值**。其中**类别**和**操作**这两个参数是必须的。 ```js t.send(new HitBuilders.EventBuilder() .setCategory('视频') .setAction('点击') .setLabel('播放') // 可选 .setValue(1).build()); // 可选 ``` ### 崩溃和异常 Exception 你可以在小程序中把捕获到的异常信息进行统计。 ```js t.send(new HitBuilders.ExceptionBuilder() .setDescription('异常描述信息') .setFatal(false).build()); // 可选，是否严重错误，默认为 true ``` ### 用户计时 Timing 计时器有四个参数：**类别**，**值**，**名称**，**标签**。其中**类别**和**值**是必须的，**值**的单位是毫秒。 ```js t.send(new HitBuilders.TimingBuilder() .setCategory('计时器') .setValue(63000) .setVariable('用户注册') .setLabel('表单').build()); ``` ### 会话管理 默认的会话时长是30分钟，可以在谷歌分析媒体资源一级进行设置。你也可以在发送匹配时使用 `setNewSession` 方法来手动开始一个新会话。 ```js // Start a new session with the hit. t.send(new HitBuilders.ScreenViewBui