扫码阅读
手机扫码阅读

Odoo与网站数据分析平台会碰撞出什么火花?

284 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平台页面埋点和

用户数据监控到此就完成了!

大家可以多用几个账户试试效果

如有更好的办法或疑问

⬇欢迎加入社群一起讨论哦⬇

本期作者

前端开发工程师 丁涛



想要了解更多,点击 查看原文