vue 项目添加百度统计及常见问题

2022-07-11 本文已影响0人 zZ_d205

参考网址：
https://tongji.baidu.com/holmes/Analytics/%E4%BA%A7%E5%93%81%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97/%E4%BD%BF%E7%94%A8%E8%AE%BE%E7%BD%AE/%E4%BB%A3%E7%A0%81%E7%AE%A1%E7%90%86/%E4%BB%A3%E7%A0%81%E8%8E%B7%E5%8F%96/%E4%BB%A3%E7%A0%81%E8%B7%9F%E8%B8%AA/%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96%E7%BB%9F%E8%AE%A1%E4%BB%A3%E7%A0%81

https://blog.csdn.net/lihefei_coder/article/details/115516096
https://www.jianshu.com/p/cf54bd78b7e5
https://www.bigtspace.com/7236.html

第一步：准备工作
1.使用百度账号登录百度统计平台(没有百度账号先注册一个)
https://tongji.baidu.com/web/welcome/login

image.png

2.登录后进入管理 >账户管理 > 网站列表 > 新增网站

image.png

3.录入网站信息后保存

image.png

4.代码管理 > 代码获取 > 复制代码

image.png

5.在代码管理 > 单页应用设置 > 启用 > 保存，启用单页应用数据统计模式

image.png

第二步：vue项目配置
1.打开public/index.html，把复制的代码粘贴到</body>前面，然后包裹一层环境判断代码，再在</head>前面加上一段script代码，同时也包裹一层环境判断代码

注：环境判断代码的作用是开发环境不注入统计代码，打包线上环境时才注入统计代码，如果想在开发环境测试统计可以先不加环境判断代码

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <title><%= htmlWebpackPlugin.options.title %></title>
        
        <% if (process.env.NODE_ENV === 'production' ) { %>
        <script>
            var _hmt = _hmt || [];
        </script>
        <% } %>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
        
        <% if (process.env.NODE_ENV === 'production' ) { %>
        <script>
            var _hmt = _hmt || [];
                        // window._hmt = _hmt; // 修改为window 全局变量
            (function() {
              var hm = document.createElement("script");
              hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";//此处请替换你的站点id
              var s = document.getElementsByTagName("script")[0]; 
              s.parentNode.insertBefore(hm, s);
            })();
        </script>
        <% } %>
    </body>
</html>

如果在百度管理平台没有启用单页面模式，需要配置路由切换时手动埋点，埋点方式如下：

打开路由文件router/index.js，在路由守卫beforeEach中设置如下代码

router.beforeEach(async (to, from, next) => {
    if (to.path) {
       if (window._hmt) {
            window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
        }
    }
    next(); 
});

2.代码添加完成后执行打包，并部署到服务器上