前言

最方便的方法,莫过于使用vue-analyticshttps://github.com/MatteoGabriele/vue-analytics。

包是有了,可是真正使用起来会发现Google Analytics(下称GA)可能没检测到或者出现漏统计的问题。本文的主题,就是讨论几个基本的检查点和说明下GA的基本用法,确保GA正常工作。

本文分为以下几部分:

  • 如何正确地初始化GA
  • GA基本用法:页面跟踪与事件跟踪
  • 如何检查GA是否正常工作
  • vue-cli工程添加GA的详细步骤
  • 推荐阅读材料

如何正确地初始化GA

必须按照Google官方要求,将以下代码放到html文件,并且应该放在</head>之前:

  1. <script>
  2. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  3. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  4. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  5. })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  6. ga('create', 'UA-XXX', 'auto'); // 将`UA-XXX`换成自己的ID
  7. ga('send', 'pageview');
  8. </script>

其他方式可以让GA代码运行起来,但是会引入一些问题。比如我们使用了vue的情况下,很自然地会想能不能直接在vue完成初始化,不想要去修改html。但是实测会出现2个问题。

  • 第1个是GA的后台检测不到,类似如下的提示:

  • 第2个是Google其他的产品,比如Ad Words,与GA配合,也会要求GA代码放在</head>之前才能工作。

综上,在初始化上目前只能老实按照Google的方法。

GA基本用法:页面跟踪与事件跟踪

事件跟踪与事件跟踪是GA最基本最主要的用法。

页面跟踪

一般的网站,只需要在html中加个GA的代码就能完成页面跟踪了,但是对于SPA来说并不行,因为路由之间的跳转并没有刷新页面,GA感知不到,因此需要手动触发。在vue-cli的工程中,可使用如下代码简单处理:

  1. router.afterEach((to, from) => {
  2. ga('set', 'page', to.path)
  3. ga('send', 'pageview')
  4. })

推荐使用vue-analytics,按照官方指导处理,可省很多事,否则需要自己手动再处理首次进入重复计数和GA不存在等异常情况。

  1. import Vue from 'vue'
  2. import router from './router'
  3. import VueAnalytics from 'vue-analytics'
  4. Vue.use(VueAnalytics, {
  5. id: 'UA-XXX-X',
  6. router,
  7. autoTracking: {
  8. pageviewOnLoad: false
  9. }
  10. })

链接:https://github.com/MatteoGabriele/vue-analytics/blob/master/docs/page-tracking.md

事件跟踪

原生的代码是

  1. ga.event('category', 'action', 'label', 123)

如果用vue-analytics则是:

  1. this.$ga.event('category', 'action', 'label', 123)

链接:https://github.com/MatteoGabriele/vue-analytics/blob/master/docs/event-tracking.md

值得一提的是事件四个参数的设置:

  • category: 一般为一个大类,比如品牌brand,视频video等等
  • action: 一般为一个具体的操作,比如download, play, click等等
  • label: 一般为额外的一些信息,比如具体的品牌ID,视频的title等等
  • value: 任意的度量值,必须为正的整数,比如表示品牌的价值,视频的时长等等

如何检查GA是否正常工作?

通常来说,需要检查几个点以确认GA有正常工作:

  • GA有正常初始化
  • 页面加载时PageView有发出,并且只发了一次;
  • 路由切换时PageView有发出,并且只发了一次;
  • 事件可以正常发出;

要检查这几点,最方便的是使用Chrome的Tag Assistant插件。下面分步骤说明如何用该插件做检查。

1.下载Chrome插件:Tag Assistant(https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk)

2.如何检查初始化:点击下面的Record,然后刷新页面,然后即可看到当前加载的TAG。Google Analytics只是其中一种,其他还有像Remarketing Tag(再营销代码)等等,如下图所示,这里我们只关心Google Analytics。如果是绿色的表示正常,否则就要根据提示排查下问题。

3.如何检查PageView和Event:点击Goole Analytics那个选项,可看到GA的详细信息。如果有发送PageView或者Event,在下面可看到统计。

3.1 Pageview的具体信息:如下图所示,发出了一个/login页面的PageView,如果有多个不同的PageView,点左右可一一切换。我一般使用这个面板确认是否页面加载后发出了多个相同的PageView,以及路由切换时是否有发出PageView。

3.2 event的具体信息:event的查看方法与pageview类似,就是内容变成event的category, action, label, value等信息而已。我主要用它来确认事件是否有发出以及参数是否正确。

vue-cli的工程添加GA代码的详细步骤

1.config/prod.env.js,添加GA代码ID:

  1. 'use strict'
  2. module.exports = {
  3. NODE_ENV: '"production"',
  4. GA: `"UA-113937480-1"`
  5. }

2. build/webpack.prod.conf.js找到HtmlWebpackPlugin,最后添加了ga选项:

  1. new HtmlWebpackPlugin({
  2. filename: process.env.NODE_ENV === 'testing'
  3. ? 'index.html'
  4. : config.build.index,
  5. template: 'index.html',
  6. inject: true,
  7. minify: {
  8. removeComments: true,
  9. collapseWhitespace: true,
  10. removeAttributeQuotes: true
  11. // more options:
  12. // https://github.com/kangax/html-minifier#options-quick-reference
  13. },
  14. // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  15. chunksSortMode: 'dependency',
  16. favicon: './static/bitbug_favicon.ico',
  17. ga: env.GA // 添加ga选项,以便在index.html中可以引用
  18. }),

3.index.html,在</head>之前添加,特别注意它的GA的ID是从配置中读取而不是写死的

  1. <script>
  2. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  3. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  4. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  5. })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  6. ga('create', <%= htmlWebpackPlugin.options.ga %>, 'auto');
  7. ga('send', 'pageview');
  8. </script>

4.src/main.js引入vue-analytics,参考源码

  1. import App from './App'
  2. import router from './router'
  3. import VueAnalytics from 'vue-analytics'
  4. // GA初始化
  5. if (process.env.GA) {
  6. Vue.use(VueAnalytics, {
  7. id: process.env.GA, // 从配置中读取
  8. disableScriptLoader: true, // 必须在html中完成初始化,这里显式禁止去下载ga脚本
  9. router, // 确保路由切换时可以自动统计
  10. autoTracking: {
  11. pageviewOnLoad: false // 当通过网址进来时已经GA在初始化时就发起一次pageview的统计,这里不要重复统计
  12. }
  13. })
  14. }

推荐阅读资料

Google Analytics事件简介

vue-cli的工程如何正确使用Google Analytics?的更多相关文章

  1. 安装vue CLI后, 出现安装权限问题

    问题:安装vue CLI后,出现:npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/usr/l ...

  2. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  3. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  4. 【1】vue/cli 3.0 脚手架 及cube-ui 安装

    安装 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 检查node版本: $ ...

  5. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  6. 亲测有效的解决在vue cli@3 create 命令执行后 node-sass无法安装上的问题

    在使用Vue cli@3 搭建工程手脚架的过程中.当我们选择了采用 sass 处理 css 编译.在使用vue create test 命令行执行到最后.会到以下这步:然后开始报错: Download ...

  7. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  8. Vue技术点整理-Vue CLI安装详解

     一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...

  9. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

随机推荐

  1. Redis Sentinel基本介绍(翻译以及总结)

    目录 Redis Sentinel介绍 分布式的Redis Sentinel 快速开始 获取Sentinel 启动Sentinel 部署Sentinel的基本要求 配置Sentinel 其他的Sent ...

  2. clob 转 String

    import javax.sql.rowset.serial.SerialClob; import java.io.BufferedReader; import java.io.IOException ...

  3. asp.net core 使用identityServer4的密码模式来进行身份认证(一)

    IdentityServer4是ASP.NET Core的一个包含OpenID和OAuth 2.0协议的框架.具体Oauth 2.0和openId请百度. 前言本博文适用于前后端分离或者为移动产品来后 ...

  4. Monotone and Sorted Matrix Search ( Arithmetic and Algebra) CGAL 4.13 -User Manual

    monotone_matrix_search() and sorted_matrix_search() are techniques that deal with the problem of eff ...

  5. uiautomator2

    uiautomator2    该项目正在火热的开发中 uiautomator2 是一个可以使用Python对Android设备进行UI自动化的库.其底层基于Google uiautomator,Go ...

  6. linux中 ll 和ls 区别

    ll 列出来的结果详细,有时间,是否可读写等信息 ,象windows里的 详细信息ls 只列出文件名或目录名 就象windows里的  列表 ll -t 是降序,  ll -t | tac 是升序 l ...

  7. 【xsy1144】选物品 主席树

    题目大意:$N$ 件物品摆成一排,给每个物品定义两个属性 $A$ 和$ B$,两件物品的 差异度 定义为它们两种属性的差的绝对值中较大的一个.如果要求出一些物品的差异度,我们先定义一个 理想物品,使它 ...

  8. POJ 2385

    #include <algorithm> #include <cstdlib> #include <numeric> #include <iostream&g ...

  9. Delphi获取IdHTTP1.Get(url)的返回参数

    var   ss: TStringStream; begin   ss := TStringStream.Create('');   idHTTP1.get(url, ss);   ss.Positi ...

  10. OpenRefine导入CSV文件,数据清理后导出JSON格式

    第一步:选择要转换的CSV文件. 第二步:选择以逗号分割,并创建项目. 第三步:编辑,去掉特殊字符 Edit Cells > Transform... 第四步:导出文件,选择“Templatin ...