@adstage/web-sdk 2.6.1 → 2.6.3

package/src/example/events/nextjs/pages/index.js

@@ -0,0 +1,139 @@
+import { useState, useEffect } from 'react';
+import { track, pageView } from '@adstage/web-sdk';
+
+export default function Home() {
+  const [result, setResult] = useState('이벤트 결과가 여기에 표시됩니다.');
+
+  const showResult = (eventName, params, success = true) => {
+    const timestamp = new Date().toLocaleString();
+    setResult(`[${timestamp}] ${eventName} 이벤트 ${success ? '전송됨' : '실패'}\n\n파라미터:\n${JSON.stringify(params, null, 2)}`);
+  };
+
+  // 장바구니 추가 이벤트
+  const handleAddToCart = () => {
+    const params = {
+      item_id: `prod_${Math.floor(Math.random() * 9999) + 1000}`,
+      quantity: Math.floor(Math.random() * 3) + 1,
+      cart_value: Math.floor(Math.random() * 200000) + 50000,
+      category: 'home',
+      brand: 'IKEA',
+      source: 'product_page'
+    };
+
+    try {
+      track('add_to_cart', params);
+      showResult('add_to_cart', params);
+    } catch (error) {
+      showResult('add_to_cart', params, false);
+      console.error('AddToCart event failed:', error);
+    }
+  };
+
+  // 앱 설치 이벤트
+  const handleAppInstall = () => {
+    const params = {
+      install_source: 'google_play',
+      campaign: 'summer_2024',
+      days_since_click: Math.floor(Math.random() * 7),
+      organic: false,
+      referrer: 'google_ads'
+    };
+
+    try {
+      track('first_open', params);
+      showResult('first_open', params);
+    } catch (error) {
+      showResult('first_open', params, false);
+      console.error('FirstOpen event failed:', error);
+    }
+  };
+
+  // 검색 이벤트
+  const handleSearch = () => {
+    const searchTerms = ['iPhone', 'Samsung Galaxy', 'MacBook', 'AirPods', 'iPad'];
+    const params = {
+      search_term: searchTerms[Math.floor(Math.random() * searchTerms.length)],
+      results_count: Math.floor(Math.random() * 50) + 10,
+      category: 'electronics',
+      filters_applied: Math.random() > 0.5,
+      sort_by: ['price', 'popularity', 'rating', 'newest'][Math.floor(Math.random() * 4)]
+    };
+
+    try {
+      track('search', params);
+      showResult('search', params);
+    } catch (error) {
+      showResult('search', params, false);
+      console.error('Search event failed:', error);
+    }
+  };
+
+  // 페이지 로드 시 자동 페이지뷰
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const params = {
+        page: '/',
+        title: 'AdStage Next.js Example',
+        referrer: typeof window !== 'undefined' ? document.referrer || 'direct' : 'ssr',
+        utm_source: 'direct'
+      };
+      pageView(params);
+      showResult('page_view', params);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+      <h1>AdStage SDK - Next.js 이벤트 추적 예시</h1>
+      
+      <div>
+        <button 
+          onClick={handleAddToCart}
+          style={buttonStyle}
+        >
+          장바구니 추가 이벤트
+        </button>
+        
+        <button 
+          onClick={handleAppInstall}
+          style={buttonStyle}
+        >
+          앱 설치 이벤트
+        </button>
+        
+        <button 
+          onClick={handleSearch}
+          style={buttonStyle}
+        >
+          검색 이벤트
+        </button>
+      </div>
+      
+      <div style={resultStyle}>
+        {result}
+      </div>
+    </div>
+  );
+}
+
+const buttonStyle = {
+  padding: '12px 24px',
+  margin: '10px',
+  fontSize: '16px',
+  border: '1px solid #ccc',
+  borderRadius: '4px',
+  backgroundColor: '#f8f9fa',
+  cursor: 'pointer'
+};
+
+const resultStyle = {
+  marginTop: '20px',
+  padding: '15px',
+  border: '1px solid #ddd',
+  borderRadius: '4px',
+  backgroundColor: '#f8f9fa',
+  whiteSpace: 'pre-wrap',
+  fontFamily: 'monospace'
+};

package/src/example/events/react/README.md

@@ -0,0 +1,57 @@
+# AdStage SDK - React 이벤트 추적 예시
+
+## 설치 및 실행
+
+```bash
+cd /Users/gunny/Documents/workspace/adstage/sdk/src/example/events/react
+npm install  # @adstage/web-sdk@^2.6.1 설치됨
+npm start
+```
+
+## 기능
+
+- 구매 이벤트 전송
+- 회원가입 이벤트 전송  
+- 상품조회 이벤트 전송
+- 자동 페이지뷰 추적
+
+## 이벤트 파라미터 예시
+
+### 구매 이벤트 (purchase)
+```javascript
+{
+  transaction_id: "tx_1725123456789",
+  value: 158000,
+  currency: "KRW",
+  payment_method: "card",
+  items: 3,
+  category: "fashion",
+  brand: "Nike"
+}
+```
+
+### 회원가입 이벤트 (signup_complete)
+```javascript
+{
+  user_id: "user_1725123456789",
+  signup_method: "google",
+  email_verified: false,
+  time_to_complete: 85,
+  form_version: "v3",
+  utm_source: "facebook_ads",
+  utm_medium: "social"
+}
+```
+
+### 상품조회 이벤트 (view_item)
+```javascript
+{
+  item_id: "prod_1234",
+  category: "electronics", 
+  brand: "Apple",
+  price: 1290000,
+  currency: "KRW",
+  referrer: "search",
+  search_term: "iPhone 15 Pro"
+}
+```

package/src/example/events/react/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "adstage-events-react-example",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@adstage/web-sdk": "^2.6.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/src/example/events/react/public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>AdStage Events React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/src/example/events/react/src/App.js

@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from 'react';
+import { AdStageProvider, useAdStageInstance, track, pageView } from '@adstage/web-sdk';
+
+// 이벤트 컴포넌트
+function EventButtons() {
+  const adstage = useAdStageInstance();
+  const [result, setResult] = useState('이벤트 결과가 여기에 표시됩니다.');
+
+  const showResult = (eventName, params, success = true) => {
+    const timestamp = new Date().toLocaleString();
+    setResult(`[${timestamp}] ${eventName} 이벤트 ${success ? '전송됨' : '실패'}\n\n파라미터:\n${JSON.stringify(params, null, 2)}`);
+  };
+
+  // 구매 이벤트
+  const handlePurchase = () => {
+    const params = {
+      transaction_id: `tx_${Date.now()}`,
+      value: 158000,
+      currency: 'KRW',
+      payment_method: 'card',
+      items: 3,
+      category: 'fashion',
+      brand: 'Nike'
+    };
+
+    try {
+      track('purchase', params);
+      showResult('purchase', params);
+    } catch (error) {
+      showResult('purchase', params, false);
+      console.error('Purchase event failed:', error);
+    }
+  };
+
+  // 회원가입 이벤트
+  const handleSignup = () => {
+    const params = {
+      user_id: `user_${Date.now()}`,
+      signup_method: 'google',
+      email_verified: false,
+      time_to_complete: 85,
+      form_version: 'v3',
+      utm_source: 'facebook_ads',
+      utm_medium: 'social'
+    };
+
+    try {
+      track('signup_complete', params);
+      showResult('signup_complete', params);
+    } catch (error) {
+      showResult('signup_complete', params, false);
+      console.error('Signup event failed:', error);
+    }
+  };
+
+  // 아이템 조회 이벤트
+  const handleViewItem = () => {
+    const params = {
+      item_id: `prod_${Math.floor(Math.random() * 9999) + 1000}`,
+      category: 'electronics',
+      brand: 'Apple',
+      price: 1290000,
+      currency: 'KRW',
+      referrer: 'search',
+      search_term: 'iPhone 15 Pro'
+    };
+
+    try {
+      track('view_item', params);
+      showResult('view_item', params);
+    } catch (error) {
+      showResult('view_item', params, false);
+      console.error('ViewItem event failed:', error);
+    }
+  };
+
+  // 페이지 로드 시 자동 페이지뷰
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const params = {
+        page: '/',
+        title: 'AdStage React Example',
+        referrer: 'direct',
+        utm_source: 'direct'
+      };
+      pageView(params);
+      showResult('page_view', params);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+      <h1>AdStage SDK - React 이벤트 추적 예시</h1>
+      
+      <div>
+        <button 
+          onClick={handlePurchase}
+          style={buttonStyle}
+        >
+          구매 이벤트 전송
+        </button>
+        
+        <button 
+          onClick={handleSignup}
+          style={buttonStyle}
+        >
+          회원가입 이벤트 전송
+        </button>
+        
+        <button 
+          onClick={handleViewItem}
+          style={buttonStyle}
+        >
+          상품조회 이벤트 전송
+        </button>
+      </div>
+      
+      <div style={resultStyle}>
+        {result}
+      </div>
+    </div>
+  );
+}
+
+const buttonStyle = {
+  padding: '12px 24px',
+  margin: '10px',
+  fontSize: '16px',
+  border: '1px solid #ccc',
+  borderRadius: '4px',
+  backgroundColor: '#f8f9fa',
+  cursor: 'pointer'
+};
+
+const resultStyle = {
+  marginTop: '20px',
+  padding: '15px',
+  border: '1px solid #ddd',
+  borderRadius: '4px',
+  backgroundColor: '#f8f9fa',
+  whiteSpace: 'pre-wrap',
+  fontFamily: 'monospace'
+};
+
+// 메인 앱 컴포넌트
+function App() {
+  return (
+    <AdStageProvider
+      config={{
+        apiKey: '7dfddcfda637fbb73225bac3731688b80b90675942fe9f2057a88e2379aba2a4',
+        debug: true,
+        appVersion: '2.1.0'
+      }}
+    >
+      <EventButtons />
+    </AdStageProvider>
+  );
+}
+
+export default App;

package/src/example/events/react/src/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);

package/src/index.ts

@@ -7,6 +7,9 @@
 export { default as AdStage } from './core/adstage';
 import AdStageCore from './core/adstage';
 
+// 전역 이벤트 함수들 (Firebase 스타일)
+export { track, pageView, setUserId, getUserId } from './events/global-events';
+
 // React 통합
 export { AdStageProvider, useAdStageContext, useAdStageInstance } from './react';
 

package/src/managers/device-info-collector.ts

@@ -1,4 +1,6 @@
 import { DOMUtils } from '../utils/dom-utils';
+import { getSDKVersion } from '../utils/version';
+import { ConfigUtils } from '../utils/config-utils';
 
 /**
  * 디바이스 정보 수집 클래스
@@ -36,16 +38,19 @@ export class DeviceInfoCollector {
   }
 
   /**
-   * 모바일 디바이스 여부 확인
+   * 모바일 디바이스 여부 확인 (SSR 안전)
    */
   static isMobile(): boolean {
+    if (!DOMUtils.isBrowser()) return false;
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
   }
 
   /**
-   * 플랫폼 타입 반환 (서버 enum에 맞춤)
+   * 플랫폼 타입 반환 (서버 enum에 맞춤, SSR 안전)
    */
   static getPlatform(): 'ios' | 'android' | 'web' | 'desktop' {
+    if (!DOMUtils.isBrowser()) return 'web';
+    
     const userAgent = navigator.userAgent.toLowerCase();
     
     if (/iphone|ipad|ipod/.test(userAgent)) {
@@ -94,8 +99,8 @@ export class DeviceInfoCollector {
       sessionId: DeviceInfoCollector.generateSessionId(),
       osVersion: DOMUtils.isBrowser() ? navigator.platform : 'SSR',
       deviceModel: DOMUtils.isBrowser() ? navigator.platform : 'SSR',
-      appVersion: '1.0.0',
-      sdkVersion: '1.0.0',
+      appVersion: ConfigUtils.getAppVersion(), // AdStage.init()에서 설정 또는 기본값 '1.0.0'
+      sdkVersion: getSDKVersion(), // package.json에서 동적 로드
       language: DOMUtils.isBrowser() ? (navigator.language || 'ko') : 'ko',
       country: 'KR', // 기본값
       ipAddress: '', // 서버에서 자동으로 설정됨

package/src/managers/events/event-device-collector.ts

@@ -0,0 +1,106 @@
+/**
+ * AdStage SDK - 이벤트용 디바이스 정보 수집기
+ * Events API 스키마에 최적화된 디바이스 정보 수집
+ * DeviceInfoCollector를 재사용하여 중복 제거
+ */
+
+import { DOMUtils } from '../../utils/dom-utils';
+import { DeviceInfoCollector } from '../device-info-collector';
+import { getSDKVersion } from '../../utils/version';
+import { ConfigUtils } from '../../utils/config-utils';
+
+export class EventDeviceCollector {
+  /**
+   * Events API용 디바이스 정보 반환
+   * TrackEventDto.DeviceInfoInput 형태에 맞춤
+   */
+  static getDeviceInfo(): {
+    category: 'mobile' | 'desktop' | 'tablet' | 'other';
+    platform?: string;
+    model?: string;
+    appVersion?: string;
+    osVersion?: string;
+  } {
+    if (!DOMUtils.isBrowser()) {
+      return {
+        category: 'other',
+        platform: 'SSR',
+        model: 'SSR',
+        appVersion: ConfigUtils.getAppVersion(), // AdStage.init()에서 설정 또는 기본값 '1.0.0'
+        osVersion: 'SSR'
+      };
+    }
+
+    const userAgent = navigator.userAgent.toLowerCase();
+    let category: 'mobile' | 'desktop' | 'tablet' | 'other' = 'desktop';
+    
+    // 디바이스 카테고리 판별 (DeviceInfoCollector 재사용)
+    if (/tablet|ipad/.test(userAgent)) {
+      category = 'tablet';
+    } else if (DeviceInfoCollector.isMobile()) {
+      category = 'mobile';
+    }
+
+    // 플랫폼 정보 매핑 (Events API용)
+    const platformType = DeviceInfoCollector.getPlatform();
+    const platformString = EventDeviceCollector.mapPlatformForEvents(platformType);
+
+    return {
+      category,
+      platform: platformString,
+      model: navigator.platform,
+      appVersion: ConfigUtils.getAppVersion(), // AdStage.init()에서 설정 또는 기본값 '1.0.0'
+      osVersion: navigator.platform
+    };
+  }
+
+  /**
+   * 플랫폼 타입을 Events API용 문자열로 매핑
+   */
+  private static mapPlatformForEvents(platformType: 'ios' | 'android' | 'web' | 'desktop'): string {
+    switch (platformType) {
+      case 'ios': return 'ios';
+      case 'android': return 'android';
+      case 'web': return 'mobile-web';
+      case 'desktop': return 'desktop-web';
+      default: return 'unknown';
+    }
+  }
+
+  /**
+   * 디바이스 상세 정보 (디버깅용)
+   */
+  static getDetailedInfo(): {
+    userAgent: string;
+    language: string;
+    platform: string;
+    cookieEnabled: boolean;
+    onLine: boolean;
+    screenResolution: string;
+    viewportSize: string;
+  } {
+    if (!DOMUtils.isBrowser()) {
+      return {
+        userAgent: 'SSR',
+        language: 'ko-KR',
+        platform: 'SSR',
+        cookieEnabled: false,
+        onLine: true,
+        screenResolution: '0x0',
+        viewportSize: '0x0'
+      };
+    }
+
+    const viewportInfo = DOMUtils.getViewportInfo();
+    
+    return {
+      userAgent: navigator.userAgent,
+      language: navigator.language || 'ko-KR',
+      platform: navigator.platform,
+      cookieEnabled: navigator.cookieEnabled,
+      onLine: navigator.onLine,
+      screenResolution: `${screen.width}x${screen.height}`,
+      viewportSize: `${viewportInfo.width}x${viewportInfo.height}`
+    };
+  }
+}