谷歌統計的使用

功能

當您在網站中添加了上述任何一種跟蹤代碼段以後，就會針對用戶訪問的每一個頁面發送網頁瀏覽數據。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