如何获取操作来源端

如何获取操作来源端

_

如何获取操作来源端

要判断点击链接的来源端是PC、移动端(手机)、平板、微信小程序/公众号 等,核心是解析「User Agent(用户代理,简称UA)」字符串——UA是浏览器/客户端自动携带的标识,包含设备类型、操作系统、浏览器等关键信息。

以下是 精准判断设备类型 的完整方案,可直接整合到之前的点击日志体系中,让日志同时记录「谁、何时、点了什么链接、用什么设备」。

一、核心原理

UA字符串示例:

  • PC(Windows):Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ... Chrome/120.0.0.0
  • 移动端(Android手机):Mozilla/5.0 (Linux; Android 13; SM-G998B) AppleWebKit/537.36 ... Mobile ... Chrome/120.0.0.0
  • 移动端(iOS手机):Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 ... Mobile ... Safari/604.1
  • 平板(iPad):Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X) AppleWebKit/605.1.15 ... Safari/604.1
  • 微信小程序:Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 ... MicroMessenger/8.0.45 MiniProgram

通过匹配UA中的关键词(如 MobileiPhoneAndroidWindowsiPadMiniProgram),即可精准区分设备类型。

二、前端实现:封装设备类型判断函数

在之前的前端代码中,新增一个解析UA的函数,判断设备类型并加入日志数据中:

1. 核心判断函数(覆盖99%场景)

// 解析UA,判断设备类型
function getDeviceInfo() {
  const ua = navigator.userAgent.toLowerCase();
  const deviceInfo = {
    device_type: 'unknown', // 核心:设备类型(pc/mobile/tablet/wechat_mini/wechat_h5)
    os: 'unknown', // 操作系统(windows/macos/ios/android/harmonyos/unknown)
    browser: 'unknown' // 浏览器(chrome/safari/wechat/edge/firefox/unknown)
  };

  // 第一步:判断操作系统
  if (ua.includes('windows')) {
    deviceInfo.os = 'windows';
  } else if (ua.includes('mac os x') || ua.includes('macintosh')) {
    deviceInfo.os = 'macos';
  } else if (ua.includes('ios') || ua.includes('iphone') || ua.includes('ipad')) {
    deviceInfo.os = 'ios';
  } else if (ua.includes('android')) {
    deviceInfo.os = 'android';
  } else if (ua.includes('harmonyos') || ua.includes('huawei')) { // 鸿蒙
    deviceInfo.os = 'harmonyos';
  }

  // 第二步:判断设备类型(优先级:小程序 > 平板 > 移动端 > PC)
  // 微信小程序
  if (ua.includes('miniprogram') || ua.includes('mini program')) {
    deviceInfo.device_type = 'wechat_mini';
  }
  // 平板(iPad/安卓平板)
  else if (ua.includes('ipad') || (ua.includes('android') && !ua.includes('mobile'))) {
    deviceInfo.device_type = 'tablet';
  }
  // 移动端(手机:iOS/Android)
  else if (ua.includes('mobile') || ua.includes('iphone') || (ua.includes('android') && ua.includes('mobile'))) {
    deviceInfo.device_type = 'mobile';
  }
  // PC端(Windows/Mac)
  else if (ua.includes('windows') || ua.includes('macos') || ua.includes('linux')) {
    deviceInfo.device_type = 'pc';
  }
  // 微信H5(公众号/微信内置浏览器)
  if (ua.includes('micromessenger') && deviceInfo.device_type !== 'wechat_mini') {
    deviceInfo.device_type = 'wechat_h5';
  }

  // 第三步:判断浏览器
  if (ua.includes('chrome')) {
    deviceInfo.browser = 'chrome';
  } else if (ua.includes('safari') && !ua.includes('chrome')) {
    deviceInfo.browser = 'safari';
  } else if (ua.includes('micromessenger')) {
    deviceInfo.browser = 'wechat';
  } else if (ua.includes('edge')) {
    deviceInfo.browser = 'edge';
  } else if (ua.includes('firefox')) {
    deviceInfo.browser = 'firefox';
  }

  return deviceInfo;
}

三、特殊场景补充

  1. 鸿蒙设备:UA中含 harmonyoshuawei,需单独判断(避免误判为Android);
  2. 平板vs手机:Android平板的UA不含 mobile,而手机含 mobile;iPad的UA含 ipad,需优先判断;
  3. 微信环境
    • 微信小程序:UA含 miniprogram
    • 微信H5(公众号/朋友圈):UA含 micromessenger但无 miniprogram
  4. UA伪造:极少数场景下UA可能被篡改,可结合「屏幕尺寸」辅助判断(如移动端屏幕宽度通常<768px),示例:
    // 辅助判断:屏幕宽度 < 768px 大概率是移动端
    function isMobileByScreen() {
      return window.innerWidth < 768;
    }
    // 在getDeviceInfo中补充:
    if (deviceInfo.device_type === 'unknown' && isMobileByScreen()) {
      deviceInfo.device_type = 'mobile';
    }
    

四、关键注意事项

  1. 优先前端解析:前端直接解析UA并上报设备类型,后端可二次校验(避免前端伪造,但前端解析更高效);
  2. 兼容新设备:UA的关键词可能随系统/浏览器版本更新,需定期维护 getDeviceInfo函数(比如新增鸿蒙、折叠屏等标识);
  3. 不要过度依赖屏幕尺寸:部分PC用户会缩小窗口,部分移动端会横屏,屏幕尺寸仅作辅助;
  4. 合规性:设备类型属于非敏感信息,无需脱敏,但需在隐私政策中说明“采集设备类型用于行为分析”。

通过这套方案,你可以在点击日志中精准区分「PC/移动端/平板/微信小程序」等来源端,完全满足“知道用户用什么设备点击链接”的需求,且可无缝整合到之前的日志体系中。

如何获取操作人IP? 2025-12-15

评论区