adstage
Web SDKเหตุการณ์

การจัดการข้อมูลอุปกรณ์

การรวบรวมข้อมูลอุปกรณ์ที่มีโครงสร้างช่วยให้สามารถปรับปรุงประสบการณ์ได้ดีขึ้นและการวิเคราะห์ที่แม่นยำมากขึ้น

📱 ภาพรวม

ฟิลด์อุปกรณ์ที่รองรับ

// โครงสร้างข้อมูลอุปกรณ์
{
  category: 'mobile' | 'desktop' | 'tablet' | 'other',
  platform: string,
  model: string,
  appVersion: string,
  osVersion: string
}

โมเดลการรวบรวมแบบไฮบริด

SDK รวม การตรวจสอบอัตโนมัติ กับ การแทนที่ด้วยตนเอง:

  • การตรวจสอบอัตโนมัติ (User-Agent + navigator)
    • category: ได้มาจาก UA (mobile/desktop/tablet/other)
    • platform: แมปผ่าน DeviceInfoCollector ภายใน (iOS, Android, Desktop Web, ฯลฯ)
    • model: navigator.platform
    • osVersion: navigator.platform
  • การแทนที่ด้วยตนเอง (จัดเตรียมโดยนักพัฒนา) เพื่อความแม่นยำ

🔧 การตั้งค่าข้อมูลอุปกรณ์

การตั้งค่าแบบรวม

AdStage.events.setDeviceInfo({
  category: 'mobile',
  platform: 'iOS',
  model: 'iPhone 15 Pro',
  appVersion: '2.1.0',
  osVersion: '17.1.1'
});

ตัวอย่าง PWA:

AdStage.events.setDeviceInfo({
  category: 'mobile',
  platform: 'Mobile Web',
  model: 'PWA App',
  appVersion: '3.0.0',
  osVersion: 'iOS 17.1'
});

ตั้งค่าคุณสมบัติแต่ละรายการ

AdStage.events.setDeviceProperty('appVersion', '2.1.1');
AdStage.events.setDeviceProperty('model', 'Custom PWA');
AdStage.events.setDeviceProperty('platform', 'React Native');
AdStage.events.setDeviceProperty('osVersion', '14.0');
AdStage.events.setDeviceProperty('category', 'tablet');

ตัวอย่างแพลตฟอร์ม

// iOS
AdStage.events.setDeviceInfo({ category: 'mobile', platform: 'iOS', model: 'iPhone 15 Pro', appVersion: '2.1.0', osVersion: '17.1.1' });
// Android
AdStage.events.setDeviceInfo({ category: 'mobile', platform: 'Android', model: 'Galaxy S24', appVersion: '2.1.0', osVersion: '14' });
// Desktop Web
AdStage.events.setDeviceInfo({ category: 'desktop', platform: 'Windows', model: 'Chrome Browser', appVersion: '2.0.5', osVersion: '11' });
// Tablet
AdStage.events.setDeviceInfo({ category: 'tablet', platform: 'iPadOS', model: 'iPad Pro', appVersion: '2.1.0', osVersion: '17.1' });

📊 การอ่านข้อมูลอุปกรณ์

ข้อมูลจริงที่มีผล

const deviceInfo = AdStage.events.getDeviceInfo();
console.log(deviceInfo);
/* { category, platform, model, appVersion, osVersion } */

ที่ผู้ใช้ให้มาเท่านั้น

const userProvided = AdStage.events.getUserDeviceInfo();
console.log('การแทนที่ของผู้ใช้:', userProvided);

มุมมองการดีบัก

console.log('User Agent:', navigator.userAgent);
console.log('Platform:', navigator.platform);
console.log('Language:', navigator.language);

🔄 การตรวจสอบอัตโนมัติ เทียบกับ การแทนที่ด้วยตนเอง

ตรรกะการตรวจสอบอัตโนมัติ

// SSR: category 'other', platform/model/osVersion 'SSR'
// Browser: UA pattern → category; platform mapped; model/osVersion from navigator.platform
 
const autoDetected = AdStage.events.getDeviceInfo();

การแทนที่ด้วยตนเองที่แนะนำ

AdStage.events.setDeviceProperty('appVersion', '2.1.0');
AdStage.events.setDeviceProperty('model', 'iPhone 15 Pro');
AdStage.events.setDeviceProperty('osVersion', '17.1.1');
AdStage.events.setDeviceProperty('platform', 'React Native');

🎯 คู่มือแพลตฟอร์ม

React Native

import { Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';
 
async function setupDeviceInfo() {
  const info = {
    category: Platform.isPad ? 'tablet' : 'mobile',
    platform: Platform.OS === 'ios' ? 'iOS' : 'Android',
    model: await DeviceInfo.getModel(),
    appVersion: await DeviceInfo.getVersion(),
    osVersion: await DeviceInfo.getSystemVersion()
  };
  AdStage.events.setDeviceInfo(info);
}

PWA

function setupPWADeviceInfo() {
  AdStage.events.setDeviceInfo({
    category: 'mobile',
    platform: 'Mobile Web',
    model: 'PWA App',
    appVersion: '3.0.0',
    osVersion: 'Unknown'
  });
}
if (window.matchMedia('(display-mode: standalone)').matches) setupPWADeviceInfo();

Capacitor / Hybrid

import { Capacitor } from '@capacitor/core';
import { Device } from '@capacitor/device';
 
async function setupCapacitorDeviceInfo() {
  if (Capacitor.isNativePlatform()) {
    const info = await Device.getInfo();
    AdStage.events.setDeviceInfo({ osVersion: info.osVersion });
  }
}

🔧 การจัดการ

รีเซ็ต

AdStage.events.clearDeviceInfo(); // ล้างการแทนที่ของผู้ใช้เท่านั้น
AdStage.events.setDeviceProperty('appVersion', undefined);

ขั้นตอนการอัปเดตแอป

function handleAppUpdate(newVersion) {
  AdStage.events.setDeviceProperty('appVersion', newVersion);
  AdStage.events.track('app_updated', {
    previous_version: getCurrentVersion(),
    new_version: newVersion,
    update_type: 'automatic'
  });
}

การตั้งค่าแบบมีเงื่อนไข

function conditionalDeviceSetup() {
  if (window.cordova || window.PhoneGap) {
    AdStage.events.setDeviceInfo({ appVersion: getAppVersion() });
  }
  if ('serviceWorker' in navigator) {
    AdStage.events.setDeviceProperty('platform', 'PWA');
  }
}

📈 การรวมการวิเคราะห์

เหตุการณ์จะรวมบริบทอุปกรณ์โดยอัตโนมัติ:

AdStage.events.track('screen_view', {
  screen_name: 'product_detail',
  product_id: 'prod_123'
});

ใช้ข้อมูลอุปกรณ์สำหรับการแยกฟีเจอร์:

function handlePlatformSpecificFeature() {
  const info = AdStage.events.getDeviceInfo();
  if (info.category === 'mobile') {
    enableMobileGestures();
    AdStage.events.track('mobile_feature_enabled', { platform: info.platform });
  } else if (info.category === 'desktop') {
    enableKeyboardShortcuts();
    AdStage.events.track('desktop_feature_enabled', { platform: info.platform });
  }
}

🛠️ การดีบักและการตรวจสอบ

if (process.env.NODE_ENV === 'development') {
  const info = AdStage.events.getDeviceInfo();
  console.log('ข้อมูลอุปกรณ์:', info);
  if (!info.appVersion) console.warn('ขาด appVersion');
}
 
function validateDeviceInfo() {
  const info = AdStage.events.getDeviceInfo();
  if (info.platform === 'iOS' && info.category === 'desktop') {
    console.warn('ไม่ตรงกัน: iOS กับหมวด desktop');
  }
  if (info.appVersion && !/^\d+\.\d+\.\d+/.test(info.appVersion)) {
    console.warn('รูปแบบเวอร์ชันไม่ถูกต้อง:', info.appVersion);
  }
}

🚀 ขั้นตอนถัดไป

สารบัญ