Odoo integrated plausible embedded code monitoring platform

---

Preface

Plausible It is a lightweight and open source network analysis platform , It can be used to analyze user behavior and high access pages in the system , At this stage, various systems have begun to integrate gradually Plausible, So let's see what happens here Odoo How to use it in the framework ！

---

One 、Plausible Burying code

1、 newly build plausible.js

! function() {
    
    "use strict";
    var a = window.location,
        r = window.document,
        o = r.currentScript,
        l = o.getAttribute("data-api") || ' Server address ' + "/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 != ' Official environment address domain name ')
            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 = ' Official environment address domain name ',
            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()
}();

2、 Domain name modification

The above js Modify the domain name as shown in the figure below

3、 Introduce the above js file

Public in the system html The above js file , Here too data-domain Replace the domain name in ,src The paths of are introduced according to their respective file paths

<script data-domain=" Formal environment domain name " src="/web/static/src/js/plausible.js"></script>

4、 The actual effect

js There are judgments about the environment , The local and test environment will not have any impact on the embedded data , We can try switching menus in a formal environment , It will trigger plausible.js Inside /api/event Interface , as follows ,Payload There are relevant page parameters

5、 Data kanban

After finishing the above operation , We can log in Plausible The platform has checked our Kanban data !

---

Two 、 User behavior monitoring

If you need to know which users generally enter which pages , Then how to obtain user information to distinguish ？ Let's keep looking down

1、 Select the module to set

Let's first select a module and set it as follows , Here I have added a new one called PageView Event monitoring of name（ The name is optional ）：

2、 Add kanban

We enter the Kanban page of the corresponding module , A Kanban will be added at the bottom , as follows ：

3、 Register global events

We introduced before plausible.js After the document , Register global events ：

<script data-domain=" Formal environment domain name " src="/web/static/src/js/plausible.js"></script>
<script>window.plausible = window.plausible || function() {
     (window.plausible.q = window.plausible.q || []).push(arguments) }</script>

4、 Add files and monitor

newly added self_menu.js file , newly added hashchange Event monitoring of , And introduce the file into the corresponding module template in ：

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}});
    })
})

5、 View the collected information

After restart , Switching pages will call /api/event Interface , View interface parameters , You can see that the information we collected above has also passed （ notes ： When testing locally , Note required plausible.js Environment verification part of the code ）：

6、 Return to Kanban to view data

go back to Plausible On the platform monitoring board , You can see the user's information data , Filtering conditions are also supported here ：

7、 Directional view

Click in a userName, You can see the page access data of the specified user

---

Conclusion

Plausible Platform self managed deployment ：https://plausible.io/docs/self-hosting

Come here ,Plausible The platform page embedding point and user data monitoring are completed ！ You can use a few more accounts to try the effect , If you have better ideas or questions, please leave a message in the comment area below ！

Copyright notice : This article is organized and written by the team of Digital China cloud base , If reproduced, please indicate the source .
Official account search for digital cloud base in China , The background to reply Odoo, Join in Odoo Technology exchange group ！