如何获取操作来源端
要判断点击链接的来源端是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中的关键词(如 Mobile、iPhone、Android、Windows、iPad、MiniProgram),即可精准区分设备类型。
二、前端实现:封装设备类型判断函数
在之前的前端代码中,新增一个解析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;
}
三、特殊场景补充
- 鸿蒙设备:UA中含
harmonyos或huawei,需单独判断(避免误判为Android); - 平板vs手机:Android平板的UA不含
mobile,而手机含mobile;iPad的UA含ipad,需优先判断; - 微信环境:
- 微信小程序:UA含
miniprogram; - 微信H5(公众号/朋友圈):UA含
micromessenger但无miniprogram;
- 微信小程序:UA含
- UA伪造:极少数场景下UA可能被篡改,可结合「屏幕尺寸」辅助判断(如移动端屏幕宽度通常<768px),示例:
// 辅助判断:屏幕宽度 < 768px 大概率是移动端 function isMobileByScreen() { return window.innerWidth < 768; } // 在getDeviceInfo中补充: if (deviceInfo.device_type === 'unknown' && isMobileByScreen()) { deviceInfo.device_type = 'mobile'; }
四、关键注意事项
- 优先前端解析:前端直接解析UA并上报设备类型,后端可二次校验(避免前端伪造,但前端解析更高效);
- 兼容新设备:UA的关键词可能随系统/浏览器版本更新,需定期维护
getDeviceInfo函数(比如新增鸿蒙、折叠屏等标识); - 不要过度依赖屏幕尺寸:部分PC用户会缩小窗口,部分移动端会横屏,屏幕尺寸仅作辅助;
- 合规性:设备类型属于非敏感信息,无需脱敏,但需在隐私政策中说明“采集设备类型用于行为分析”。
通过这套方案,你可以在点击日志中精准区分「PC/移动端/平板/微信小程序」等来源端,完全满足“知道用户用什么设备点击链接”的需求,且可无缝整合到之前的日志体系中。