带您走入“Google Analytics（分析）”的世界

由于大陆对于谷歌的一些限制，谷歌的很多产品在大陆都无法使用，如果想使用，就得翻墙了，所以有很多谷歌产品，慢慢淡出大家的视线了。但是您公司的业务如果发展到国外了，那就不能忽视了，比如今天我想提到的Google Analytics（分析）统计。

Google Analytics，个人认为是目前世界上最强大的统计产品了，比如cnzz、百度统计，51la等都不是它的对手。Google Analytics的强大，在于它的大数据分析能力，你想统计到的，基本都能实现，只有你想不到，没有它做不到的，可以这样说。所以它在国内外的知名度相当高，市场人员和技术人员必须要熟练掌握。当然今天只是针对技术这块，来解析下如何用。

了解 Google Analytics（分析）

开发者可通过丰富的界面、客户端库和 API 与数据处理过程互动并对其施加影响，这些界面、库和 API 可分为 4 个主要组件：数据收集、配置、数据处理和报告。

• 数据收集

• 收集用户互动数据。

• 配置

• 可让您管理数据的处理方式。

• 数据处理

• 根据配置数据来对用户互动数据进行处理。

• 报告

• 提供所有处理后的数据。

说明

由于时间有限，关于Google Analytics一些基础配置和账号管理，这里不一一去说明了，如果您有兴趣都可以加入QQ群咨询。我们今天主要想讲述如何在代码里添加Google Analytics，且以gtag为例。

Google Analytics在后续文章里，统一用GA代码命名。

原生HTML应用

在添加应用的第一步，得登录谷歌账号，进去获取GA代码，在后台点击管理》跟踪信息》代码获取。对于原生的HTML，投放很简单，只需要把代码放到页面中即可。

官方一般让你放到head部分，其实最好不要，放到底部即可。当你已经投放了上段代码，可以你验证下，如果成功了，就会显示页面数据分析了。当然如果您想更深入的统计，比如按钮点击等，您可以给按钮添加统计事件，废话不多说，直接上代码：

onclick="ga('send','event',$GA_NAME,'regist','content_second');"

一般我只要设置后面三个参数即可，前面2个保持不变。这样设置的话，我们可以统计加过此点击事件的元素触发次数。

vue里面应用GA统计

原生HTML里面使用GA很简单，在VUE里如何使用GA才是我们最重要的内容。

启用页面自动跟踪

跟踪应用程序最简单的方法是将VueRouter实例传递给插件，并让它为您处理一切。

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueAnalytics from 'vue-analytics'

const router = new VueRouter({
  router: // your routes
})

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  router
})

手动页面跟踪

标准方法只是传递当前页面路径

this.$ga.page('/')

作为对象文字传递

this.$ga.page({
  page: '/',
  title: 'Home page',
  location: window.location.href
})

或者甚至可以传递组件中作用域内的VueRouter实例，该插件将自动检测当前的路线名称，路径和位置：只需确保将name属性添加到您的路线对象中。

this.$ga.page(this.$router)

Google Analytics（分析）文档：页面跟踪

结合使用screenview和自动跟踪

通过将true传递给对象中的screenview属性，还可以使用自动跟踪和屏幕跟踪autoTracking

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  autoTracking: {
    screenview: true
  }
})

在页面加载时禁用综合浏览量

页面自动跟踪会在页面加载时发送一次综合浏览事件，但可以禁用该事件

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueAnalytics from 'vue-analytics'

const router = new VueRouter({
  router: // your routes
})

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  router,
  autoTracking: {
    pageviewOnLoad: false
  }
})

禁用页面自动跟踪

要禁用自动跟踪，我们只能删除VueRouter实例，但是如果您只需要在特定环境或情况下进行跟踪，则也可以像这样禁用页面自动跟踪

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  router,
  autoTracking: {
    page: false
  }
})

忽略页面自动跟踪中的路由

要禁用对特定路由的自动跟踪，您需要将字符串数组传递给插件选项。该字符串必须是route name或route path。

Vue.use(VueAnalytics, {
  router,
  ignoreRoutes: ['home', '/contacts']
})

自动跟踪自定义数据

如果可以进行自动跟踪，则可以传递具有自定义对象形状的函数以用作跟踪器。

在pageViewTemplate经过电流路径作为参数

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  router,
  autoTracking: {
    pageviewTemplate (route) {
      return {
        page: route.path,
        title: document.title,
        location: window.location.href
      }
    }
  }
})

也可以使用meta对象为每个路由添加自定义数据结构。

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import VueRouter from 'vue-router'

const router = new VueRouter({
  routes: [
    {
      name: 'home',
      path: '/',
      component: {...},
      meta: {
        analytics: {
          pageviewTemplate (route) {
            return {
              title: 'This is my custom title',
              page: route.path,
              location: 'www.mydomain.com'
            }
          }
        }
      }
    }
  ]
})

重要提示：路由pageviewTemplate始终优先于全局页面。

pageviewTemplate 可以返回一个伪造的值来跳过跟踪，这对于特定需求很有用：

• shouldRouterUpdate 下面介绍的文档更适用于基于路由的跟踪控制，但是当您需要在某些页面上禁用初始跟踪时，这还不够，因为它仅适用于初始页面加载后的导航。

• pageviewOnLoad: false 是全球性的，不能依赖当前路线。

避免将路由查询对象转换为querystring

可以避免使用transformQueryString属性将路线查询作为查询字符串发送

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  router,
  autoTracking: {
    transformQueryString: false
  }
})

删除vue-router基本选项

将基本路径添加到VueRouter实例后，该路径会在自动跟踪过程中合并到实际的路由器路径：但是，仍然可以通过修改prependBase配置对象中的属性来删除此行为

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  router,
  autoTracking: {
    prependBase: false
  }
})

自定义路由器更新

每次更改路线时，插件都会跟踪新路线：当我们更改哈希，查询字符串或其他参数时。

为了避免路由器在路径与上一条路径相同时更新和开始跟踪，可以skipSamePath在autoTracking对象中使用属性

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  router,
  autoTracking: {
    skipSamePath: true
  }
})

对于其他用例，也可以使用属性shouldRouterUpdate内部的插件配置对象中的可访问autoTracking。这些方法将先前和当前路线作为参数，并且需要返回真实或虚假值。

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X',
  router,
  autoTracking: {
    shouldRouterUpdate (to, from) {
      // Here I'm allowing tracking only when
      // next route path is not the same as the previous
      return to.path !== from.path
    }
  }
})

总结

由于GA的内容实在太多，这里只是抽出一部分来分享下，希望能帮助到大家，如果您想更深入学习或者有疑问都可以留言或者加入QQ群进行交流，一起进步哟！！！！