Vue项目和Tauri接入Google Analytics谷歌统计流程

谁借莪１个温暖的怀抱￠ 2023-10-04 23:48 23阅读 0赞

Google Analytics官网：[https://analytics.google.com/][https_analytics.google.com]

vue-gtag官网：[Get started - vue-gtag][]

先要在Google Analytics上注册一个账号，先创建一个账号，然后在该账号下创建一个应用

![18170da342a643bb9499cafefbce4f8d.png][]

设置类型为网站：

![3a38aa394e644aae8bb2d33b5eeac7d2.png][]

然后在数据流中进入网站，获取衡量 ID：

![8d0069ffb7f3461fa06bbbefee4d425c.png][]

### 在Vue中集成插件：vue-gtag ###

安装：

npm add vue-gtag

在main.js加入如下：

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

然后如果你是Vue2，就在组件里面加入：

export default {
      name: 'MyComponent',
    
      methods: {
        login () {
          this.$gtag.event('login', { method: 'Google' })
        }
      }
    }

如果是Vue3，setup格式就这样写：

import { event } from 'vue-gtag'
    
    export default {
      name: 'MyComponent',
    
      setup() {
        const login = () => {
          event('login', { method: 'Google' })
        }
        
        return {
          login
        }
      }
    }

然后保存之后，打开浏览器看结果：

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

![c636f2228e794fc187f0f54ddaa8ce0a.png][]

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

![format_png][]

如果想接入百度统计：

### 百度统计 ###

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

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

结果：

![edfdbed1a75dc7f189f61795f9828c90.png][]

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

![f5ef64ff5d377605d2be651a343efb6c.png][]

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

![83650aa4e78f086149498e95ef06ad72.png][]

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

![format_png 1][]

### 4、其他 ###

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

#### 1、百度统计页面热力图 ####

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

![format_png 2][]

注：

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

![e53baaecf7a7cd5c187616a6b2be42ae.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、热力图一般需要隔一天才能查看 ####

![03498a6405aa08dd6963230a4d77d9f1.png][]

若隔一天仍然看不到，请参考[\[13\]][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>

[https_analytics.google.com]: https://analytics.google.com/
[Get started - vue-gtag]: https://matteo-gabriele.gitbook.io/vue-gtag/
[18170da342a643bb9499cafefbce4f8d.png]: https://img-blog.csdnimg.cn/18170da342a643bb9499cafefbce4f8d.png
[3a38aa394e644aae8bb2d33b5eeac7d2.png]: https://img-blog.csdnimg.cn/3a38aa394e644aae8bb2d33b5eeac7d2.png
[8d0069ffb7f3461fa06bbbefee4d425c.png]: https://img-blog.csdnimg.cn/8d0069ffb7f3461fa06bbbefee4d425c.png
[c636f2228e794fc187f0f54ddaa8ce0a.png]: https://img-blog.csdnimg.cn/c636f2228e794fc187f0f54ddaa8ce0a.png
[format_png]: https://img-blog.csdnimg.cn/img_convert/a0094e0e74998b05503b11cfbb0df991.webp?x-oss-process=image/format,png
[Link 1]: https://link.zhihu.com/?target=https%3A//tongji.baidu.com/
[9]: https://link.zhihu.com/?target=https%3A//github.com/minlingchao1/vue-ba
[edfdbed1a75dc7f189f61795f9828c90.png]: https://img-blog.csdnimg.cn/img_convert/edfdbed1a75dc7f189f61795f9828c90.png
[f5ef64ff5d377605d2be651a343efb6c.png]: https://img-blog.csdnimg.cn/img_convert/f5ef64ff5d377605d2be651a343efb6c.png
[83650aa4e78f086149498e95ef06ad72.png]: https://img-blog.csdnimg.cn/img_convert/83650aa4e78f086149498e95ef06ad72.png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/0c1c1d811324f9300a40244358a9cf50.webp?x-oss-process=image/format,png
[12]: https://link.zhihu.com/?target=https%3A//tongji.baidu.com/web/help/article%3Fid%3D246%26type%3D0
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/d0f64cefb3d85189f67bb3f34b5eae42.webp?x-oss-process=image/format,png
[e53baaecf7a7cd5c187616a6b2be42ae.png]: https://img-blog.csdnimg.cn/img_convert/e53baaecf7a7cd5c187616a6b2be42ae.png
[03498a6405aa08dd6963230a4d77d9f1.png]: https://img-blog.csdnimg.cn/img_convert/03498a6405aa08dd6963230a4d77d9f1.png
[13]: https://link.zhihu.com/?target=https%3A//tongji.baidu.com/web/help/article%3Fid%3D207%26type%3D0