vue项目添加百度统计

最新推荐文章于 2024-08-06 10:52:02 发布

原创最新推荐文章于 2024-08-06 10:52:02 发布 · 6.2k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#vue #百度统计

vue 专栏收录该内容

53 篇文章

订阅专栏

本文详细指导如何在Vue项目中集成百度统计，包括准备、配置代码、部署及检查，确保网站流量数据实时监控

第一步：准备工作

1.使用百度账号登录百度统计平台(没有百度账号先注册一个)
https://tongji.baidu.com/web/welcome/login
在这里插入图片描述
2.登录后进入管理 >账户管理 > 网站列表 > 新增网站

3.录入网站信息后保存

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

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

在这里插入图片描述

第二步：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 || [];
			(function() {
			  var hm = document.createElement("script");
			  hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";
			  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(); 
}); 