StageUp
Web SDKEvents

Device Information Management

Collecting structured device data enables better experience optimization and more accurate analysis.

πŸ“± Overview

Supported Device Fields

// Device info structure
{
  category: 'mobile' | 'desktop' | 'tablet' | 'other',
  platform: string,
  model: string,
  appVersion: string,
  osVersion: string
}

Hybrid Collection Model

The SDK combines automatic detection with manual overrides:

  • Auto detection (User-Agent + navigator)
    • category: Derived from UA (mobile/desktop/tablet/other)
    • platform: Mapped via internal DeviceInfoCollector (iOS, Android, Desktop Web, etc.)
    • model: navigator.platform
    • osVersion: navigator.platform
  • Manual overrides (developer-provided) for accuracy

πŸ”§ Setting Device Info

Bulk Set

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

PWA example:

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

Set Individual Properties

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');

Platform Examples

// 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' });

πŸ“Š Reading Device Info

Final Effective Data

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

User‑Provided Only

const userProvided = AdStage.events.getUserDeviceInfo();
console.log('User override:', userProvided);

Debugging View

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

πŸ”„ Auto Detection vs Manual Override

Auto Detection Logic

// 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');

🎯 Platform Guides

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 });
  }
}

πŸ”§ Management

Reset

AdStage.events.clearDeviceInfo(); // Clears user overrides only
AdStage.events.setDeviceProperty('appVersion', undefined);

App Update Flow

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

Conditional Setup

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

πŸ“ˆ Analytics Integration

Events automatically include device context:

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

Use device info for feature branching:

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 });
  }
}

πŸ› οΈ Debug & Validation

if (process.env.NODE_ENV === 'development') {
  const info = AdStage.events.getDeviceInfo();
  console.log('Device info:', info);
  if (!info.appVersion) console.warn('Missing appVersion');
}
 
function validateDeviceInfo() {
  const info = AdStage.events.getDeviceInfo();
  if (info.platform === 'iOS' && info.category === 'desktop') {
    console.warn('Mismatch: iOS with desktop category');
  }
  if (info.appVersion && !/^\d+\.\d+\.\d+/.test(info.appVersion)) {
    console.warn('Invalid version format:', info.appVersion);
  }
}

πŸš€ Next Steps

Table of Contents