Vue-Analgtics 用户文档翻译（部分）

本博客旨在个人笔记记录。

一.1.开始 安装
     npm install vue-analytics --save
   2.开始使用你的Vue应用程序,在main.js中加入以下代码
     import Vue from 'vue'
     import VueAnalytics from 'vue-analytics'

     Vue.use(VueAnalytics, {
         id: 'UA-XXX-X' //你的跟踪id
      })
    3.可以通过两种不同的方式使用api：

        3.1.在组件范围内
         export default {
              name: 'MyComponent',
              methods: {
                track () {
                  this.$ga.page('/')
             }    
              }
          }
        3.2.单独导入方法
        import { page } from 'vue-analytics'
        export default {
          name: 'MyComponent',
          methods: {
            track () {
              page('/')
            }
          }
        }
    4.跟踪多个账户
      传递多个跟踪系统的字符串数组。 每次点击都会被触发两次：每次都有不同的跟踪器名称    
          import Vue from 'vue'
        import VueAnalytics from 'vue-analytics'

        Vue.use(VueAnalytics, {
          id: ['UA-XXX-A', 'UA-XXX-B'] //你的跟踪id
        })
二.1.如何加载Google Analytics脚本 （默认情况下，不需要任何东西：插件为您完成所有操作！）
       但是，在某些情况下，您可能希望避免自动加载analytics.js脚本，因为：
        1.也许你正在使用的框架已经为你做了
        2.你真的无法从你的项目中删除它
        3.我无法想出的其他问题
       因此，对于所有这些情况，可以让插件检测是否已在您的html中添加了分析脚本(checkDuplicatedScript)
        import Vue from 'vue'
        import VueAnalytics from 'vue-analytics'
        Vue.use(VueAnalytics, {
          id: 'UA-XXX-X',
          checkDuplicatedScript: true
        })
       或者只是禁用脚本加载器（disableScriptLoader）
           import Vue from 'vue'
        import VueAnalytics from 'vue-analytics'
        Vue.use(VueAnalytics, {
          id: 'UA-XXX-X',
          disableScriptLoader: true
        })
三.调试
   实现Google Analytics调试库。
   请记住它仅用于调试。 analytics_debug.js的文件大小比analytics.js大。
   Example:
    Vue.use(VueAnalytics, {
      id: 'UA-XXX-X',
      debug: {
        enabled: false, // default value
        trace: false, // default value
        sendHitTask: true // default value
      }
    })
四.网页跟踪
    网页跟踪是Google Analytics最重要的功能，您可以通过不同方式实现这一目标.    
   1.启用页面自动跟踪:
       跟踪应用程序最简单的方法是将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', //跟踪id
      router
    })

   2.手动页面跟踪:
       标准方法是传递当前页面路径: this.$ga.page('/')
       也可以作为对象文字传递：
       this.$ga.page({
          page: '/',
          title: 'Home page',
          location: window.location.href
        })
   3.使用屏幕视图进行自动跟踪
        通过将true传递给autoTracking对象中的screeview属性，也可以使用自动跟踪和屏幕跟踪    
        Vue.use(VueAnalytics, {
      id: 'UA-XXX-X',
      autoTracking: {
        screenview: true
      }
    })
   4.禁用页面加载时的网页浏览量
     页面自动跟踪在页面加载时发送网页浏览事件，但可以禁用它
        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
          }
        })
    5.禁用页面自动跟踪
      要禁用自动跟踪，我们只需删除VueRouter实例，但如果您只需要在特定环境或情况下进行跟踪，也可以禁用页面自动跟踪，如此:
      Vue.use(VueAnalytics, {
          id: 'UA-XXX-X',
          router,
          autoTracking: {
            page: false
          }
        })
    6.忽略页面自动跟踪上的路线
      要禁用特定路由的自动跟踪，您需要将一个字符串数组传递给插件选项。 字符串必须是路由名称或路由路径。
      Vue.use(VueAnalytics, {
              router,
              ignoreRoutes: ['home', '/contacts']
            })
    7.自动跟踪自定义数据
      当自动跟踪可以传递具有自定义对象形状的功能以用作跟踪器时。pageViewTemplate将当前路由作为参数传递
      Vue.use(VueAnalytics, {
              id: 'UA-XXX-X',
              router,
              autoTracking: {
                pageviewTemplate (route) {
                  return {
                    page: route.path,
                    title: document.title,
                    location: window.location.href
                  }
                }
              }
            })
      还可以使用元对象为每个路径添加自定义数据结构.(路由pageviewTemplate始终优先于全局路由)。
      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'
                    }
                  }
                }
              }
            }
          ]
        })
    其他的请参考官网

五.事件跟踪(具体使用请参考官网https://developers.google.com)
   可以按照Google规范以不同方式实现事件跟踪,以这个确切的顺序传递参数,如下:
   this.$ga.event('category', 'action', 'label', 123)
   另外对象文字也是可能的:
   this.$ga.event({
      eventCategory: 'category',
      eventAction: 'action',
      eventLabel: 'label',
      eventValue: 123
    })

六.1.屏幕跟踪    
    可以使用screenview方法发送屏幕匹配。
    通过传递一个字符串，它将通过发送一个screenview事件并将字符串作为screenName属性来跟踪页面。
    export default {
      name: 'MyComponent',

      methods: {
        track () {
          this.$ga.screenview('home')
        }
      }
    }
    2.屏幕自动跟踪
    通过将true传递给autoTracking对象中的screeview属性，也可以使用自动跟踪和屏幕跟踪
    Vue.use(VueAnalytics, {
      id: 'UA-XXX-X',
      autoTracking: {
        screenview: true
      }
    })
七.跨域跟踪
  要启用跨域跟踪，您需要在配置对象的链接器数组中添加链接。
      Vue.use(VueAnalytics, {
      id: 'UA-XXX-X',
      linkers: ['example1.com', 'example2.com']
     })
八.异常跟踪
    1.异常跟踪允许您测量应用程序中发生的崩溃或错误的数量和类型
    可以使用try catch跟踪单个异常    
    try {
      // some code that might crash
    } catch (error) {
      // handle your error here

      // track the error with analytics
      // depending on the error you might want to check
      // if a `message` property exists or not
      const exception = error.message || error
      this.$ga.exception(exception)
    }
    2.启用异常自动跟踪
     也可以只启用插件异常自动跟踪，插件将为您完成所有操作
     Vue.use(VueAnalytics, {
      id: 'UA-XXX-X',
      autoTracking: {
        exception: true
      }
    })
    3.错误日志
     当自动跟踪错误日志自动记录在控制台中时，如果要禁用它们，可以将此属性添加到配置中
     Vue.use(VueAnalytics, {
      id: 'UA-XXX-X',
      autoTracking: {
        exception: true,
        exceptionLogs: false
      }
    })

九.    Vuex and Google Analytics
    为了能够使用Vuex商店中的vue-analytics，只需导入所需的方法并直接从商店中激活它    

    1.第一步
      确保在开始在商店中使用vue-analytics软件包之前安装了vue-analytics软件包
    2.第二步
      开始在商店中使用vue-analytics API
      // store.js
        import Vue from 'vue'
        import Vuex from 'vuex'
        import { event } from 'vue-analytics'

        Vue.use(Vuex)

        export default new Vuex.Store({
          state: {
            counter: 0
          },
          actions: {
            increase ({ commit, state }) {
              commit('increase', state.counter + 1)
            }
          },
          mutations: {
            increase (state, payload) {
              state.counter = payload
              event('user-click', 'increase', 'counter', state.counter)
            }
          }
        })