使用 vanilla JS 进行分析：页面浏览量

如何获取基本页面浏览量统计数据？

这是 Vanilla JS 分析系列的第二篇文章。动机在这里。

今天我们将研究分析页面浏览量的 vanila JS 分析工具的实现。

为了举例说明，我们需要为我们的跟踪器（文件example_page.html）添加一些简单的 HTML 代码。您可以将任何内容添加到 HTML 文件中：



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/page_view_tracker.js"></script>
</head>
<body>
    <a href="https://www.google.com" class="external">Leave page by going to Google</a>
</body>
</html>

其余代码将在中page_view_tracker.js。首先，让我们定义一个函数，该函数允许我们将POST所有收集到的数据作为字符串发送到特定的 URL：



function post_data(data, url) {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send(data);
}

字符串中的数据采用 JSON 格式。您可以根据需要选择任何服务器：node.js，，，... 如果您不想使用后端，甚至可以选择将数据发布到 Google Docs 电子表格中Django。flask

使用以下命令发布数据：



post_data(JSON.stringify(data), "http://0.0.0.0:5000/analytics");

我们将数据对象定义为：



const data = {
    "current_page_name": current_page_name
};

现在让我们添加其余数据。

追踪

每页浏览量：这个很简单。每次用户访问我们的网站时，post_data都会触发该函数，因此我们需要将其添加current_page_name到数据对象中。它的定义如下：



let current_page_name = window.location.href;

原则上，我们可以从后端的请求中获取当前页面的 URL，但我更喜欢将所有数据都放在JSON对象中。

用户来源：我们想知道用户来自哪个网站。这些信息非常重要，因为它使我们能够追踪网站流量的来源。我们是否获取了：

直接流量（用户在浏览器中输入 URL），
通过推荐（链接到我们的网站）获得的流量，或者
通过有机搜索（用户通过 Google、Bing、百度等搜索引擎找到我们）。

在除 Internet Explorer 之外的所有浏览器中，以下内容将为我们提供用户来源：



let page_source = document.referrer;

如果流量是直接的或者用户使用的 Internet Explorerpage_source将为空，因此我们设置：



if (page_source === "") {
    // could be direct traffic or Internet explorer
    page_source = "empty";
}

现在我们可以通过类似这样的方法检测用户使用的浏览器，但这并不能帮助我们确定用户的来源。如果您知道解决方法，请告诉我如何在 IE 中获取用户来源。

设备屏幕：我们想知道大多数用户使用什么设备。我们通过以下方式获取设备屏幕尺寸：



let screen_width = window.screen.width;
let screen_height = window.screen.height;

以及我们可以绘制的屏幕尺寸：



let screen_available_width = window.screen.availWidth;
let screen_available_height = window.screen.availHeight;

浏览器类型、语言、时区：要获取浏览器类型，我们执行以下操作：



let browser_type = navigator.userAgent;

语言：



let language = navigator.language;

和时区：



let time_zone_offset = Intl.DateTimeFormat().resolvedOptions().timeZone;

跟踪参数：如果您发布的网址带有附加参数，则可以增强分析能力。例如，您可以使用 Urchin 跟踪模块（简称 UTM），这是 Google 用于跟踪您唯一网址的一种格式：



http://www.example.com/?utm_source=JohnDoe&utm_medium=mail

通过为您分享的链接添加参数，您可以在分析过程中更好地细分流量。例如：您发布的链接、其他人分享的链接、社交媒体来源……

页面性能：我们想知道网页加载需要多长时间。为此，我们需要了解一些关于 Web 浏览器事件的知识：

1.) 首先，浏览器向服务器发送请求以获取页面文件。
2.) 页面文件被发送到我们的设备。
3.)然后浏览器需要渲染网页。
4.) 一旦网页呈现，onload/load事件就会被触发。
5.) 用户查看页面。
6.)当用户关闭网页时，会发生onload/事件。onunload

页面加载和渲染应该在几毫秒内完成。如果不是这样，要么是我们的网速太差，要么是我们发送了太多文件。无论哪种情况，跟踪页面加载都是有益的。根据Mozilla 文档，我们可以从以下位置获取页面加载数据：



let performance_data = window.performance.timing;

然后得到：



let page_load_time = performance_data.loadEventEnd - performance_data.navigationStart;
let request_response_time = performance_data.responseEnd - performance_data.requestStart;
let render_time = performance_data.domComplete - performance_data.domLoading;

我们需要在页面加载完成后触发页面性能监控代码。完整的页面性能监控代码片段如下：



window.addEventListener("load", function () {
    let performance_data = window.performance.timing;

    // calculate request response time: network latency
    let request_response_time = ...

    // calculate page render time
    let render_time = ...


    // page load time: wait until load event is finished with setTimeout
    setTimeout(function () {
        let page_load_time = ...

        // Post data to the server
        ...
    }, 0);
});

setTimeOut是必要的，因为我们需要等待load事件完成才能测量页面加载时间。

敬请关注

完整代码可以在我的博客页面浏览量中找到。在那里，您可以找到HTML, JS, python运行整个程序所需的文件。

如果您还有什么想法我们可以跟踪或如何跟踪，请在下面的评论部分告诉我。

我并非非常熟练的JavaScript开发人员，所以某些部分可能有更好的方法。欢迎任何评论和解决方案。敬请期待更多内容。下周我们将探讨页面浏览时长跟踪。为什么要为此写一整篇文章呢？因为网页关闭时有一些特殊情况可能会使事情变得复杂。

鏂囩珷鏉ユ簮锛�https://dev.to/zigabrencic/analytics-with-vanilla-js-page-views-47pb