前端数据采集

定义数据字段

1. 用户 ip 地址 - ip
2. 用户大概位置 - location
3. 当前页面地址 - url
4. 当前页面标题 - pageTitle
5. 用户设备类型 - deviceType

采集字段

ip

使用 Fetch API 获取用户的公网 IP 地址。示例代码：

fetch("https://api.ipify.org?format=json")
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Failed to fetch public IP address");
    }
  })
  .then((data) => {
    const publicIP = data.ip;
    console.log("用户的公网IP地址是：", publicIP);
  })
  .catch((error) => {
    console.error("Error: ", error);
  });

在上述代码中，我们使用 Fetch API 向 https://api.ipify.org?format=json 发送 GET 请求来获取用户的公网 IP 地址。然后我们解析返回的 JSON 数据，并取得 IP 地址信息。

这种方法更简洁、现代化，并且符合当前的 Web 发展趋势。

location

很多第三方服务提供 IP 地址到地理位置的映射，如 MaxMind、ipapi、ipstack 等。这些服务提供 API，可以通过发送 HTTP 请求并传递用户的公网 IP 地址来获取地理位置信息。以下使用 ipapi 服务：

fetch("https://ipapi.co/json/")
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Failed to fetch geolocation data");
    }
  })
  .then((data) => {
    const city = data.city;
    const region = data.region;
    const country = data.country_name;

    console.log("用户的位置：", city, region, country);
  })
  .catch((error) => {
    console.error("Error: ", error);
  });

上述代码向 ipapi 服务发送 GET 请求，该服务会基于 IP 地址返回包含用户位置信息的 JSON 数据。我们从返回的数据中提取了城市、地区和国家名称，并在控制台进行了输出。

这种方式获取的地理位置信息并不 100%准确，可能会存在误差。

url

要获取当前页面的 URL（即当前页面地址），可以使用 window.location.href 属性。这个属性会返回当前页面的完整 URL，包括协议、主机名、端口号、路径和查询参数等信息。

以下是获取当前页面地址的简单示例代码：

const currentPageUrl = window.location.href;
console.log("当前页面地址是：", currentPageUrl);

pageTitle

要获取当前页面的标题，可以使用 document.title 属性。这个属性会返回当前页面的标题，即浏览器标签页上显示的内容。

以下是获取当前页面标题的简单示例代码：

const currentPageTitle = document.title;
console.log("当前页面标题是：", currentPageTitle);

deviceType

要在网页中获取当前设备信息，可以使用 JavaScript 来实现。以下是一种常用的方法：

// 判断用户设备是否是 Windows 电脑
const isWindows = navigator.userAgent.includes("Windows");
if (isWindows) {
  console.log("用户设备是 Windows 电脑");
}

// 判断用户设备是否是 Android 手机
const isAndroid = navigator.userAgent.includes("Android");
if (isAndroid) {
  console.log("用户设备是 Android 手机");
}

// 判断用户设备是否是苹果电脑
const isMac = navigator.userAgent.includes("Mac");
if (isMac) {
  console.log("用户设备是苹果电脑");
}

// 判断用户设备是否是 iOS 手机
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (isIOS) {
  console.log("用户设备是 iOS 手机");
}

通过检查用户代理字符串（navigator.userAgent）来判断用户设备类型，并根据设备类型进行相应的操作。

实现方式

var publicIP = await fetch("https://api.ipify.org?format=json").then(
  (response) => response.ok && response.json()
);
var ipInfo = await fetch("https://ipapi.co/json/").then(
  (response) => response.ok && response.json()
);
ipInfo = ipInfo || { ip: "", city: "", region: "", country_name: "" };
var params = {
  ip: publicIP.ip,
  ipInfo,
  location: `${ipInfo.country_name},${ipInfo.region},${ipInfo.city},`,
  url: location.href,
  pageTitle: document.title,
  deviceType: navigator.platform,
};
console.log("采集到的数据...", params);

数据发送

下一章数据发送之前先介绍下 fetch 用法