Odoo与网站数据分析平台会碰撞出什么火花？
20 2023-09-07
Odoo
神州数码云基地
在 Odoo 上的尝试、调研与分享
本期内容
Odoo集成Plausible
Plausible是一个轻量级且开源的网络分析平台，可以用于分析用户行为和系统中的高访问页面。
目前各个系统已经开始逐步集成Plausible，Odoo当然也不例外！本期，我们来看看在Odoo框架中是如何集成Plausible埋码监控平台的吧！
Plausible埋码
新建plausible.js
! function() { "use strict"; var a = window.location, r = window.document, o = r.currentScript, l = o.getAttribute("data-api") || 'https://服务器地址' + "/api/event"; function s(t) { console.warn("Ignoring Event: " + t) } function t(t, e) { if (/^localhost$|^127(\.[0-9]+){0,2}\.[0-9]+$|^\[::1?\]$/.test(a.hostname) || "file:" === a.protocol) return s("localhost"); if (a.hostname != '正式环境地址域名') return s("nonproduction"); if (!(window._phantom || window.__nightmare || window.navigator.webdriver || window.Cypress)) { try { if ("true" == window.localStorage.plausible_ignore) return s("localStorage flag") } catch (t) {} var i = {}; i.n = t, i.u = a.href, i.d = '正式环境地址域名', i.r = r.referrer || null, i.w = window.innerWidth, e && e.meta && (i.m = JSON.stringify(e.meta)), e && e.props && (i.p = JSON.stringify(e.props)), i.h = 1; var n = new XMLHttpRequest; n.open("POST", l, !0), n.setRequestHeader("Content-Type", "text/plain"), n.send(JSON.stringify(i)), n.onreadystatechange = function() { 4 == n.readyState && e && e.callback && e.callback() } } } var e = window.plausible && window.plausible.q || []; window.plausible = t; for (var i, n = 0; n < e.length; n++) t.apply(this, e[n]); function w() { i = a.pathname, t("pageview") } window.addEventListener("hashchange", w), "prerender" === r.visibilityState ? r.addEventListener("visibilitychange", function() { i || "visible" !== r.visibilityState || w() }) : w()}();
修改域名
将上面的js域名处按照如下图所示进行修改。
引入上述js文件
在系统公共html处引入上述的js文件，此处也要将data-domain中的域名进行替换，src的路径按照各自的文件路径引入。
src="/web/static/src/js/plausible.js">
实际效果
js中有对环境进行判断，本地和测试环境不会对埋码数据有任何影响.我们可以在正式环境尝试切换菜单，就会触发plausible.js里的/api/event接口。
/ Payload里面相关的页面参数
数据看板
完成以上操作后，我们就可以登录Plausible平台查看我们的看板数据了!
用户行为监控
如果需要知道哪些用户一般进入哪些页面，那又该如何获取用户信息加以区分呢？让我们继续往下看吧！
选择模块进行设置
我们先选择一个模块进行如下设置，这里已经添加了一个叫PageView的事件监听name（名字可以随意）：
新增看板
我们进入对应模块的看板页，底部会新增一个看板：
/ 看板页面
注册全局事件
在之前引入plausible.js的文件后，注册全局事件：
src="/web/static/src/js/plausible.js">
新增文件及监听
新增self_menu.js文件，新增hashchange的事件监听，并将该文件引入对应模块的template中：
odoo.define('order_menu', function (require) { const session = require('web.session') window.addEventListener("hashchange", function (){ let userName = session.username let url = window.location.href plausible('PageView', {props: {method: 'HTTP', Region: 'China', userName, url}}); })})
查看已收集的信息
重启后，切换页面会调用/api/event接口，查看接口参数，就能看到我们上面收集的信息也传过去了（注：本地测试时，需注释plausible.js的环境校验部分代码）：
返回看板查看数据
回到Plausible平台监控看板上，就能看到用户的信息数据，此处也支持过滤筛选条件：
定向查看
点进某个userName，就能看到指定用户的页面访问数据：
Plausible平台自托管部署方式：
https://plausible.io/docs/self-hosting
Plausible平台页面埋点和
用户数据监控到此就完成了！
大家可以多用几个账户试试效果
如有更好的办法或疑问
⬇欢迎加入社群一起讨论哦⬇
⬇
本期作者
前端开发工程师 丁涛
