django+vue+nginx+frp搭建漫画网站之接入谷歌统计和百度统计（三）

地址：http://www.iewoai.com/

在这里插入图片描述

1、背景

书接上文，打算监控网站的流量等访问情况，一开始打算用matomo，但是看了视频后发现直接接入谷歌统计和百度统计是一种更方便省事的手段。（那我还获取个锤子的访客真实ip）

https://www.bilibili.com/video/BV1pE411g7tN

2、谷歌统计

找到谷歌统计官网，登录账号，新增网站。参考[1]中所说，建议使用vue-analytics，但是安装包时

npm i vue-analytics --save

出现：npm WARN deprecated vue-analytics@5.22.1: Sorry but vue-analytics is no longer maintained. I would suggest you switch to vue-gtag, with love, the guy who made the package.

网上搜寻该包的github主页发现，这个包已经不再维护了，其在主页上建议使用vue-gtag。谷歌统计上的建议是使用全局代码：

image.png

但是用于目前vue项目使用的是单页面模式，不同路由之间需要手动配置一下~~，麻烦~~。

因此决定使用vue-gtag，由于项目使用vue的版本的是2.9.6，因此参考vue-gtag1.0版本的文档[3]。

安装：

npm add vue-gtag

在main.js加入如下：

// 引入 vue-gtag
import VueGtag from 'vue-gtag'
Vue.use(VueGtag, {
  config: { id: "G-1234567" } 
}, router);

结果：

浏览器打开F12检查可看到：

image_1.png

谷歌统计平台上可看到（一般会有延迟）：

image_2.png

3、百度统计

一样的找到百度统计官网、登录、新增网站。与谷歌统计一样，百度统计也有组件vue-ba可以用[9]，

// 引入 vue-ba
import ba from 'vue-ba'
Vue.use(ba, 'ac892a04b10230b4a6f23f6000d874ee');

结果：

image_3.png

使用百度统计的代码安装检查：

image_4.png

使用百度统计推荐的检查工具手动检查：

image_5.png

百度统计平台上可以看到：

image_6.png

4、其他

关于一些事件统计等操作，这里暂时用不到，等用到的时候再整理。

1、百度统计页面热力图

百度统计可使用通配符[12]（类似于正则表达式）来对设置的页面进行热力图统计，初步设置如下：

image_7.png

注：

1、url里包含中文需要编码，否则会出现：

image_8.png

url中文编码可参考python里的quote和unquote：

from urllib.parse import quote,unquote

quote("鬼灭之刃") 
# '%E9%AC%BC%E7%81%AD%E4%B9%8B%E5%88%83'

unquote("%E9%AC%BC%E7%81%AD%E4%B9%8B%E5%88%83")
# '鬼灭之刃'
2、热力图一般需要隔一天才能查看

image_9.png

若隔一天仍然看不到，请参考[13]

2、电脑端Django项目引入谷歌和百度统计

2021-07-21新增

想了想还是决定将电脑端的页面也计入统计范畴，直接在template文件夹下的模板文件头添加即可，最好是有全局模板文件，如类似base.html等，这样就只需要在header标签内添加一次即可。另一种方式就是将js添加到外部js中，注意要去掉script标签：

  • 百度
// baidu.js（js名称仅做参考）
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?你的id";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();

// base.html（模板名称仅做参考）
<script type="text/javascript" src="你的js路径/baidu.js"></script>
  • 谷歌
// google.js（js名称仅做参考）
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxx');

// base.html（模板名称仅做参考）
<script async src="https://www.googletagmanager.com/gtag/js?id=你的id"></script>
<script type="text/javascript" src="你的js路径/google.js"></script>

参考链接：

  1. vue-cli的工程如何正确使用Google Analytics？ https://www.cnblogs.com/pheye/p/9014797.html

  2. vue-analytics https://github.com/MatteoGabriele/vue-analytics/blob/master/README.md

  3. Get started https://matteo-gabriele.gitbook.io/vue-gtag/

  4. vue-gtag https://github.com/MatteoGabriele/vue-gtag

  5. 网站分析平台：是选择百度统计，还是 Google Analytics 呢？ https://www.cnblogs.com/zhenqichai/p/baidu-tongji-google-analytics.html

  6. 开始使用 Analytics（分析） https://support.google.com/analytics/answer/9306384?hl=zh-Hans&ref_topic=9303319

  7. 页面添加GA代码，10个GA基础应用 https://blog.csdn.net/chinaplan/article/details/16986923

  8. gTag使用实录 https://blog.csdn.net/wwz123124/article/details/93919216

  9. vue-ba https://github.com/minlingchao1/vue-ba

  10. 手动检查代码的方法 https://tongji.baidu.com/web/help/article?id=93&type=0

  11. 单页面vue引入百度统计的使用方法！ https://www.cnblogs.com/zengfp/p/9778119.html

  12. 通配符与正则表达式 https://tongji.baidu.com/web/help/article?id=246&type=0

  13. 为什么看不到热力图
    https://tongji.baidu.com/web/help/article?id=207&type=0