前端js 如何统计pv uv

前端JS统计PV和UV的方法有：使用浏览器Cookie、利用localStorage、结合服务器日志。其中，利用浏览器Cookie是一种非常常见且简单有效的方法。通过设置和读取Cookie，前端JS可以轻松实现PV（页面浏览量）和UV（独立访客）的统计。具体实现方法如下：

一、使用浏览器Cookie统计PV和UV

使用Cookie来统计PV和UV是一种非常常见的做法。Cookie是存储在用户浏览器中的小数据文件，可以在用户访问不同页面时保持数据的持久性。通过设置和读取Cookie，我们可以跟踪用户的访问行为。

1、设置和读取Cookie

要使用Cookie，首先需要设置Cookie。可以通过JavaScript的document.cookie属性来实现。下面是一个简单的例子：

function setCookie(name, value, days) {

    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
function eraseCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999;';
}

2、统计PV（Page Views）

PV统计比较简单，每次页面加载时，增加一个计数器即可。可以使用Cookie来存储PV的计数值：

function trackPageView() {

    var pv = getCookie('page_view');
    if (pv) {
        pv = parseInt(pv) + 1;
    } else {
        pv = 1;
    }
    setCookie('page_view', pv, 365);
    console.log('Page Views: ' + pv);
}
window.onload = trackPageView;

3、统计UV（Unique Visitors）

UV统计涉及到识别独立访客，可以通过给每个访客设置一个唯一标识符（UUID），然后在Cookie中存储这个标识符。每次访问时检查这个Cookie，如果不存在则创建一个新的UUID并存储：

function generateUUID() {

    var d = new Date().getTime();
    if (window.performance && typeof window.performance.now === "function") {
        d += performance.now(); // use high-precision timer if available
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
}
function trackUniqueVisitor() {
    var uv = getCookie('unique_visitor');
    if (!uv) {
        uv = generateUUID();
        setCookie('unique_visitor', uv, 365);
        console.log('New Unique Visitor: ' + uv);
    } else {
        console.log('Returning Visitor: ' + uv);
    }
}
window.onload = trackUniqueVisitor;

二、利用localStorage统计PV和UV

localStorage是一种HTML5提供的浏览器存储机制，它的特点是存储的数据没有过期时间，直到用户手动删除。与Cookie相比，localStorage的存储空间更大，且不会随每个HTTP请求发送。

1、统计PV（Page Views）

使用localStorage统计PV，思路与使用Cookie类似：

function trackPageView() {

    var pv = localStorage.getItem('page_view');
    if (pv) {
        pv = parseInt(pv) + 1;
    } else {
        pv = 1;
    }
    localStorage.setItem('page_view', pv);
    console.log('Page Views: ' + pv);
}
window.onload = trackPageView;

2、统计UV（Unique Visitors）

使用localStorage统计UV的方法也与Cookie类似：

function generateUUID() {

    var d = new Date().getTime();
    if (window.performance && typeof window.performance.now === "function") {
        d += performance.now(); // use high-precision timer if available
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
}
function trackUniqueVisitor() {
    var uv = localStorage.getItem('unique_visitor');
    if (!uv) {
        uv = generateUUID();
        localStorage.setItem('unique_visitor', uv);
        console.log('New Unique Visitor: ' + uv);
    } else {
        console.log('Returning Visitor: ' + uv);
    }
}
window.onload = trackUniqueVisitor;

三、结合服务器日志统计PV和UV

前端统计PV和UV的方法虽然简单，但有时候不够准确，因为用户可以清理Cookie或localStorage，导致统计数据丢失。结合服务器日志进行统计，可以提高统计的准确性。

1、前端发送数据到服务器

当用户访问页面时，前端可以通过AJAX请求将PV和UV数据发送到服务器，服务器记录这些数据：

function sendAnalyticsData(data) {

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/track", true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.send(JSON.stringify(data));
}
function trackPageView() {
    var pv = getCookie('page_view');
    if (pv) {
        pv = parseInt(pv) + 1;
    } else {
        pv = 1;
    }
    setCookie('page_view', pv, 365);
    sendAnalyticsData({ type: 'page_view', count: pv });
}
function trackUniqueVisitor() {
    var uv = getCookie('unique_visitor');
    if (!uv) {
        uv = generateUUID();
        setCookie('unique_visitor', uv, 365);
        sendAnalyticsData({ type: 'unique_visitor', id: uv });
    }
}
window.onload = function() {
    trackPageView();
    trackUniqueVisitor();
};

2、服务器端记录数据

服务器端接收到前端发送的数据后，可以将其记录到数据库或日志文件中。以下是一个Node.js的示例：

const express = require('express');

const bodyParser = require('body-parser');
const fs = require('fs');
const app = express();
app.use(bodyParser.json());
app.post('/track', (req, res) => {
    const data = req.body;
    fs.appendFile('analytics.log', JSON.stringify(data) + 'n', (err) => {
        if (err) throw err;
    });
    res.sendStatus(200);
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

通过结合服务器日志统计PV和UV，可以避免用户清理Cookie或localStorage导致的数据丢失问题，从而提高统计的准确性。

四、结合第三方统计工具

虽然自己实现PV和UV统计是可行的，但使用第三方统计工具可以大大简化开发工作。这些工具通常提供丰富的功能和详细的报告。

1、Google Analytics

Google Analytics是最常用的网页分析工具之一，它提供了详细的访问量、访客行为等统计数据。使用Google Analytics非常简单，只需在网页中嵌入一段脚本即可：

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>

<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-XXXXXXXXX-X');
</script>

2、百度统计

百度统计是国内常用的统计工具，提供了类似Google Analytics的功能。使用百度统计也非常简单，只需在网页中嵌入一段脚本：

<script>

    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

五、结合前端框架实现PV和UV统计

如果你的项目使用了前端框架（如React、Vue、Angular等），可以利用框架的特性来实现PV和UV统计。

1、React框架

在React中，可以使用组件生命周期方法来统计PV和UV。以下是一个示例：

import React, { useEffect } from 'react';

function generateUUID() {
    var d = new Date().getTime();
    if (window.performance && typeof window.performance.now === "function") {
        d += performance.now(); // use high-precision timer if available
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
}
function trackPageView() {
    var pv = localStorage.getItem('page_view');
    if (pv) {
        pv = parseInt(pv) + 1;
    } else {
        pv = 1;
    }
    localStorage.setItem('page_view', pv);
    console.log('Page Views: ' + pv);
}
function trackUniqueVisitor() {
    var uv = localStorage.getItem('unique_visitor');
    if (!uv) {
        uv = generateUUID();
        localStorage.setItem('unique_visitor', uv);
        console.log('New Unique Visitor: ' + uv);
    } else {
        console.log('Returning Visitor: ' + uv);
    }
}
const Analytics = () => {
    useEffect(() => {
        trackPageView();
        trackUniqueVisitor();
    }, []);
    return null;
};
export default Analytics;

然后在你的主组件中引入这个Analytics组件：

import React from 'react';

import Analytics from './Analytics';
const App = () => {
    return (
        <div>
            <Analytics />
            <h1>Hello, world!</h1>
        </div>
    );
};
export default App;

2、Vue框架

在Vue中，可以使用生命周期钩子来统计PV和UV。以下是一个示例：

<template>

  <div>
    <h1>Hello, world!</h1>
  </div>
</template>
<script>
export default {
  name: 'App',
  mounted() {
    this.trackPageView();
    this.trackUniqueVisitor();
  },
  methods: {
    generateUUID() {
      var d = new Date().getTime();
      if (window.performance && typeof window.performance.now === "function") {
        d += performance.now(); // use high-precision timer if available
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
      });
      return uuid;
    },
    trackPageView() {
      var pv = localStorage.getItem('page_view');
      if (pv) {
        pv = parseInt(pv) + 1;
      } else {
        pv = 1;
      }
      localStorage.setItem('page_view', pv);
      console.log('Page Views: ' + pv);
    },
    trackUniqueVisitor() {
      var uv = localStorage.getItem('unique_visitor');
      if (!uv) {
        uv = this.generateUUID();
        localStorage.setItem('unique_visitor', uv);
        console.log('New Unique Visitor: ' + uv);
      } else {
        console.log('Returning Visitor: ' + uv);
      }
    }
  }
}
</script>

通过这些方法，可以有效地统计页面的PV和UV，了解用户的访问行为，从而优化网站的用户体验和内容。选择合适的方法和工具，可以根据项目的需求和实际情况进行调整。无论是使用Cookie、localStorage还是结合服务器日志，甚至是使用第三方工具，都可以实现PV和UV的准确统计。

相关问答FAQs：

1. 如何使用前端JS统计网页的PV（页面访问量）？
通过前端JS代码，可以使用如下方式统计网页的PV（页面访问量）：

• 在网页的每个页面加载时，使用JS代码记录一次PV，可以通过在页面的头部或尾部插入代码实现。
• 使用JS的localStorage或sessionStorage存储访问次数，每次页面加载时，读取存储的次数并加一，然后再存储回去。
• 将统计的PV数据发送到后端服务器，后端服务器再进行存储和处理。

2. 如何使用前端JS统计网页的UV（独立访客数量）？
要使用前端JS统计网页的UV（独立访客数量），可以考虑以下方法：

• 使用JS的localStorage或sessionStorage存储一个唯一的标识符，代表用户的访问信息。每次访问时，检查是否已存在该标识符，如果不存在则说明是新的访客，进行UV统计。
• 通过使用第三方统计工具，如Google Analytics等，这些工具通常会提供统计UV的功能，只需在页面中插入相应的代码，并按照工具的要求设置参数即可。

3. 如何使用前端JS统计网页的平均停留时间？
要统计网页的平均停留时间，可以使用前端JS实现以下方法：

• 在网页加载时，使用JS代码记录当前时间戳。
• 在用户离开页面时，再次获取当前时间戳，并计算两个时间戳之间的差值，即用户在该页面停留的时间。
• 将每个用户的停留时间记录下来，并计算所有用户停留时间的平均值，即为网页的平均停留时间。

通过以上方法，可以使用前端JS统计网页的PV、UV和平均停留时间，从而更好地了解用户对网页的访问情况。