谷歌统计的使用

功能

当您在网站中添加了上述任何一种跟踪代码段以后，就会针对用户访问的每一个页面发送网页浏览数据。Google Analytics（分析）经过处理此数据能够推导出大量信息，其中包括：

• 用户总共在您网站上停留了多少时间。
• 用户在每一个网页上停留的时间以及用户查看这些网页的次序。
• 用户点击了哪些内部连接（根据下一个网页浏览的网址获得）。

此外，IP 地址、用户代理字符串以及 analytics.js 在建立新跟踪器时查看的初始网页可用于肯定如下这类信息：

• 用户的地理位置。
• 用户使用的浏览器和操做系统。
• 屏幕尺寸以及是否安装了 Flash 或 Java。
• 引荐网站。

初始化项目

使用 vue-cli

vue create projectName
复制代码

注册帐号

注册指南

注册完后会给个跟踪 ID : UA-XXXXXX;

还有响应的全局网站代码 (gtag.js),复制到 head 标签首位

添加须要依赖

npm install vue-router
npm install vue-analytics
复制代码

• vue-router
• vue-analytics

在 vue.config.js 中添加代码

module.exports = {
  ......
  chainWebpack: config => {
    config.plugin("html").tap(args => {
      args[0].ga = process.env.BASE_GA;
      return args;
    });
  }
  ......
};
复制代码

在 main.js 中引入

import VueAnalytics from "vue-analytics";

Vue.use(VueAnalytics, {
  id: process.env.BASE_GA || "UA-148352580-1",
  disableScriptLoader: true,
  router,
  autoTracking: {
    pageviewOnLoad: false
  }
});
复制代码

.env.production 新建并添加代码

BASE_GA = ''UA-148352580-1''
复制代码

检查 GA 是否正常工做

首先下载谷歌插件Tag Assistant (by Google),而后进行相应页面,点击 record,刷新页面,若是是绿色就表明工做正常

点击 VIEW RECORDINGS

我刷新页面 3 次就统计 3 pages tracked

......
{
    name: "girl",
    path: "/girl",
    component: () => import("@/views/girl"),
    meta: {
      name: "girl",
      analytics: {
        pageviewTemplate(route) {
          return {
            title: "遥看瀑布挂前川",
            page: route.path,
            location: "www.ohmalimalihong.com"
          };
        }
      }
    }
  },
......
复制代码

执行一些其余的操做,在 home 和 girl 组件中添加一个按钮点击事件

tryClick() {
    this.$ga.event("click", "今天是个好日子,上街去玩耍", "00687824");

    setTimeout(() => {
      this.$ga.exception("我就是出错了,怎么了?");
    }, 1000);
  }
复制代码

打开分析页面,事件和错误信息都已经统计到

• GA 有正常初始化
• 页面加载时 PageView 有发出，而且只发了一次；
• 路由切换时 PageView 有发出，而且只发了一次；
• 事件能够正常发出;

指标名称

• VV(Video View，播放数)，是指在一个统计周期内，视频被打开的次数之和。
• CV(Content Views，内容播放数)，是指在一个统计周期内，视频被打开，且视频正片内容（除广告）被成功播放的次数之和。
• PV(Page View，浏览量)，是指在一个统计周期内，浏览页面的数之和。
• UV(Unique Visitor，访客数)，是指在一个统计周期内，访问网站的人数之和。

谷歌追踪文档

在单页面应用中,须要本身触发方便 google 追踪

• vue-analytics/docs vue-analytics 文档
• google analyticsjs google analyticsjs 官网

参考

Vue 赶上 Analytics

github