@adstage/web-sdk 2.4.12 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.4.12",
+  "version": "2.5.1",
   "description": "AdStage Web SDK - Production-ready marketing platform SDK with React Provider support for seamless integration",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/dummy/ads_dummy.json

@@ -0,0 +1,84 @@
+[
+    {
+        "_id": "68870e36bdfa1e6e54d108a5",
+        "title": "stageUp 입점 신청 - 수수료 할인 광고",
+        "description": "",
+        "adType": "BANNER",
+        "orgId": "c1cd5bb0-2f45-4e49-8e86-7ba653d3477c",
+        "textContent": "",
+        "imageUrl": "https://cmvn255e11092.edge.naverncp.com/d82ceba0-ce99-48e0-9a19-6a6c8792af31.png",
+        "videoUrl": "",
+        "linkUrl": "/partnership",
+        "startDate": "2025-07-28T00:00:00.000Z",
+        "endDate": "2025-12-31T00:00:00.000Z",
+        "status": "ACTIVE",
+        "order": 0,
+        "language": "ko",
+        "countries": [
+            "KR",
+            "US",
+            "JP",
+            "CN",
+            "DE",
+            "FR",
+            "GB",
+            "IT",
+            "ES",
+            "RU",
+            "ID",
+            "VN",
+            "TH",
+            "MY",
+            "SG",
+            "PH",
+            "IN",
+            "BR",
+            "CA",
+            "AU"
+        ],
+        "deviceType": "DESKTOP",
+        "createdAt": "2025-07-28T05:44:22.999Z",
+        "updatedAt": "2025-07-28T05:45:12.589Z"
+    },
+    {
+        "_id": "68870edbbdfa1e6e54d10901",
+        "title": "Join stageUp Today! - 간편한 통합 절차",
+        "description": "",
+        "adType": "BANNER",
+        "orgId": "c1cd5bb0-2f45-4e49-8e86-7ba653d3477c",
+        "textContent": "",
+        "imageUrl": "https://cmvn255e11092.edge.naverncp.com/550849fd-9c25-4e15-bd0f-a3efd7cff617.webp",
+        "videoUrl": "",
+        "linkUrl": "https://www.stageup.store/",
+        "startDate": "2025-07-28T00:00:00.000Z",
+        "endDate": "2025-12-31T00:00:00.000Z",
+        "status": "ACTIVE",
+        "order": 1,
+        "language": "ko",
+        "countries": [
+            "KR",
+            "US",
+            "JP",
+            "CN",
+            "DE",
+            "FR",
+            "GB",
+            "IT",
+            "ES",
+            "RU",
+            "ID",
+            "VN",
+            "TH",
+            "MY",
+            "SG",
+            "PH",
+            "IN",
+            "BR",
+            "CA",
+            "AU"
+        ],
+        "deviceType": "DESKTOP",
+        "createdAt": "2025-07-28T05:47:07.685Z",
+        "updatedAt": "2025-07-28T05:47:07.685Z"
+    }
+]

package/src/managers/ads/advertisement-event-tracker.ts

@@ -4,7 +4,7 @@ import { ViewableEventTracker } from './viewable-event-tracker';
 import { DeviceInfoCollector } from '../device-info-collector';
 import { DOMUtils } from '../../utils/dom-utils';
 import { ApiHeaders } from '../../utils/api-headers';
-import type { ViewabilityMetrics } from './viewability-tracker';
+import { getSDKVersion } from '../../utils/version';
 
 /**
  * 광고 이벤트 추적 관리 클래스
@@ -26,41 +26,44 @@ export class AdvertisementEventTracker {
   }
 
   /**
-   * 광고 이벤트 추적 - viewability 데이터 지원
+   * 광고 이벤트 추적 - 단순화된 viewable 처리
    */
   async trackAdvertisementEvent(
     adId: string, 
     slotId: string, 
-    eventType: AdEventType,
-    additionalData?: {
-      viewabilityMetrics?: ViewabilityMetrics;
-      fraudScore?: number;
-      fraudReasons?: string[];
-      riskLevel?: string;
-    }
+    eventType: AdEventType
   ): Promise<void> {
     try {
       if (this.debug) {
         console.log(`🚀 AdvertisementEventTracker: Processing ${eventType} event for ad ${adId} in slot ${slotId}`);
       }
       
+      // VIEWABLE 이벤트 중복 확인
+      if (eventType === AdEventType.VIEWABLE) {
+        if (ViewableEventTracker.isDuplicateViewable(adId, slotId, this.debug)) {
+          if (this.debug) {
+            console.log(`⏭️ Skipping duplicate viewable event for ad ${adId} in slot ${slotId}`);
+          }
+          return;
+        }
+      }
+      
       // 현재 슬롯 정보 가져오기
       const slot = this.slots.get(slotId);
       
       // 디바이스 정보 수집
       const deviceInfo = DeviceInfoCollector.collectDeviceInfo();
 
-        // 광고 이벤트 데이터 구성 (DTO 구조에 맞춤)
-        // 서버에서 자동 설정: orgId (API 키로부터), advertisementId, action (URL 파라미터로부터)
-        const eventData = {
-          // 필수 필드들 (DTO 검증용)
-          adType: slot?.adType || 'BANNER',
-          platform: deviceInfo.platform,
-          deviceId: deviceInfo.deviceId, // DTO 검증을 위해 deviceId 직접 전송
-          
-          // 디바이스 정보는 deviceInfo 객체로 래핑
-          deviceInfo: deviceInfo,
+      // 광고 이벤트 데이터 구성 (단순화됨)
+      const eventData = {
+        // 필수 필드들 (DTO 검증용)
+        adType: slot?.adType || 'BANNER',
+        platform: deviceInfo.platform,
+        deviceId: deviceInfo.deviceId,
         
+        // 디바이스 정보는 deviceInfo 객체로 래핑
+        deviceInfo: deviceInfo,
+      
         // 페이지 및 슬롯 정보
         pageUrl: DOMUtils.getPageInfo().url,
         pageTitle: DOMUtils.getPageInfo().title,
@@ -77,29 +80,17 @@ export class AdvertisementEventTracker {
         // 추가 메타데이터
         metadata: {
           eventType,
-          sdkVersion: '1.0.0',
+          sdkVersion: getSDKVersion(),
           timestamp: Date.now(),
         },
         
-        // viewable 관련 추가 데이터 (DTO 필드명과 매칭)
-        ...(additionalData?.viewabilityMetrics && {
-          isViewable: additionalData.viewabilityMetrics.isViewable,
-          exposureTime: additionalData.viewabilityMetrics.exposureTime,
-          maxVisibilityRatio: additionalData.viewabilityMetrics.maxVisibilityRatio,
-          firstViewableTime: additionalData.viewabilityMetrics.firstViewableTime,
-          // IAB 표준 준수 여부
-          iabCompliant: additionalData.viewabilityMetrics.isViewable,
-        }),
-        
-        // fraud 관련 데이터 (DTO 필드명과 매칭)
-        ...(additionalData?.fraudScore !== undefined && {
-          fraudScore: additionalData.fraudScore,
-          fraudReasons: additionalData.fraudReasons,
-          riskLevel: additionalData.riskLevel,
+        // VIEWABLE 이벤트의 경우 단순한 플래그만 설정
+        ...(eventType === AdEventType.VIEWABLE && {
+          isViewable: true,
+          iabCompliant: true, // 50% 노출 기준으로 단순 판정
         }),
       };
 
-
       const url = `${this.baseUrl}/advertisements/events/${adId}/${eventType}`;
       const headers = ApiHeaders.createForEvents(this.apiKey, eventData);
       

package/src/managers/ads/carousel-slider-manager.ts

@@ -217,10 +217,8 @@ export class CarouselSliderManager {
         });
       }
 
-      // 현재 슬라이드의 광고에 대해 노출 이벤트 추적
-      if (actualIndex > 0) { // 첫 번째는 이미 loadSlot에서 추적됨
-        trackEventCallback(advertisements[actualIndex]._id, slot.id, AdEventType.VIEWABLE);
-      }
+      // 현재 슬라이드의 광고에 대해 노출 이벤트 추적 (모든 슬라이드 포함)
+      trackEventCallback(advertisements[actualIndex]._id, slot.id, AdEventType.VIEWABLE);
     };
 
     // 무한 루프 처리 함수
@@ -270,8 +268,13 @@ export class CarouselSliderManager {
       sliderWrapper.appendChild(dotContainer);
     }
 
-    // 첫 번째 도트 활성화
+    // 첫 번째 도트 활성화 및 초기 VIEWABLE 이벤트 발생
     moveToSlide(0);
+    
+    // 슬라이더 DOM 추가 후 첫 번째 광고 VIEWABLE 이벤트 트리거 (500ms 후 실제 노출 확인)
+    setTimeout(() => {
+      trackEventCallback(advertisements[0]._id, slot.id, AdEventType.VIEWABLE);
+    }, 500);
 
     // 사용자가 크기를 지정하지 않은 경우, 첫 번째 슬라이드 크기에 맞춰 래퍼 크기 동적 조정
     if (!slot.width || slot.width === 0) {

package/src/managers/ads/viewability-tracker.ts

@@ -1,80 +1,21 @@
 /**
- * IAB 표준 준수 viewable impression 측정
+ * 단순한 광고 노출 추적 (50% 노출시 즉시 VIEWABLE 이벤트)
  */
 
-export interface ViewabilityConfig {
-  threshold: number;        // 노출 비율 (0.5 = 50%)
-  minDuration: number;      // 최소 지속 시간 (ms)
-  maxMeasureTime: number;   // 최대 측정 시간 (ms)
-}
-
-export interface ViewabilityMetrics {
-  isViewable: boolean;
-  exposureTime: number;
-  maxVisibilityRatio: number;
-  firstViewableTime: number | null;
-  measureStartTime: number;
-}
-
-// 광고 타입별 IAB 표준 설정
-export const VIEWABILITY_STANDARDS: Record<string, ViewabilityConfig> = {
-  BANNER: { 
-    threshold: 0.5, 
-    minDuration: 1000,
-    maxMeasureTime: 30000
-  },
-  VIDEO: { 
-    threshold: 0.5, 
-    minDuration: 2000,
-    maxMeasureTime: 60000
-  },
-  NATIVE: { 
-    threshold: 0.5, 
-    minDuration: 1000,
-    maxMeasureTime: 30000
-  },
-  INTERSTITIAL: { 
-    threshold: 0.5, 
-    minDuration: 1000,
-    maxMeasureTime: 10000
-  },
-  TEXT: { 
-    threshold: 0.5, 
-    minDuration: 1000,
-    maxMeasureTime: 30000
-  },
-  POPUP: { 
-    threshold: 0.5, 
-    minDuration: 1000,
-    maxMeasureTime: 10000
-  }
-};
-
-export class ViewabilityTracker {
-  private config: ViewabilityConfig;
+export class SimpleViewabilityTracker {
   private element: HTMLElement;
   private observer: IntersectionObserver | null = null;
-  private viewabilityTimer: NodeJS.Timeout | null = null;
-  private maxVisibilityTimer: NodeJS.Timeout | null = null;
-  private startTime: number = 0;
-  private maxVisibilityRatio: number = 0;
-  private firstViewableTime: number | null = null;
-  private isViewableAchieved: boolean = false;
-  
-  private onViewableCallback?: (metrics: ViewabilityMetrics) => void;
+  private isViewableTriggered: boolean = false;
+  private onViewableCallback?: () => void;
   
   constructor(
     element: HTMLElement, 
-    adType: string,
-    onViewable?: (metrics: ViewabilityMetrics) => void
+    onViewable?: () => void
   ) {
     this.element = element;
-    this.config = VIEWABILITY_STANDARDS[adType] || VIEWABILITY_STANDARDS.BANNER;
     this.onViewableCallback = onViewable;
     
-    this.startTime = performance.now();
     this.initIntersectionObserver();
-    this.initMaxMeasureTimer();
   }
   
   private initIntersectionObserver(): void {
@@ -87,7 +28,7 @@ export class ViewabilityTracker {
     this.observer = new IntersectionObserver(
       (entries) => this.handleIntersection(entries),
       {
-        threshold: [0, 0.1, 0.25, 0.5, 0.75, 1.0],
+        threshold: 0.5, // 50% 노출
         rootMargin: '0px'
       }
     );
@@ -97,90 +38,25 @@ export class ViewabilityTracker {
   
   private handleIntersection(entries: IntersectionObserverEntry[]): void {
     entries.forEach(entry => {
-      const visibilityRatio = entry.intersectionRatio;
-      const isVisible = this.isDocumentVisible();
-      
-      // 최대 가시성 비율 추적
-      this.maxVisibilityRatio = Math.max(this.maxVisibilityRatio, visibilityRatio);
-      
-      // Viewable 조건 확인 (50% 이상 + 문서 가시성)
-      if (visibilityRatio >= this.config.threshold && isVisible) {
-        this.startViewabilityTimer();
-      } else {
-        this.stopViewabilityTimer();
+      // 50% 이상 노출되고 문서가 가시상태이며 아직 트리거되지 않은 경우
+      if (entry.intersectionRatio >= 0.5 && 
+          this.isDocumentVisible() && 
+          !this.isViewableTriggered) {
+        
+        this.isViewableTriggered = true;
+        
+        if (this.onViewableCallback) {
+          this.onViewableCallback();
+        }
       }
     });
   }
   
   private isDocumentVisible(): boolean {
-    // 단순한 문서 가시성 확인
     return !document.hidden && document.visibilityState === 'visible';
   }
   
-  private startViewabilityTimer(): void {
-    if (this.viewabilityTimer || this.isViewableAchieved) return;
-    
-    if (this.firstViewableTime === null) {
-      this.firstViewableTime = performance.now();
-    }
-    
-    this.viewabilityTimer = setTimeout(() => {
-      this.onViewabilityAchieved();
-    }, this.config.minDuration);
-  }
-  
-  private stopViewabilityTimer(): void {
-    if (this.viewabilityTimer) {
-      clearTimeout(this.viewabilityTimer);
-      this.viewabilityTimer = null;
-    }
-  }
-  
-  private initMaxMeasureTimer(): void {
-    // 최대 측정 시간 후 자동 종료
-    this.maxVisibilityTimer = setTimeout(() => {
-      this.destroy();
-    }, this.config.maxMeasureTime);
-  }
-  
-  private onViewabilityAchieved(): void {
-    if (this.isViewableAchieved) return;
-    
-    this.isViewableAchieved = true;
-    const metrics = this.calculateMetrics();
-    
-    if (this.onViewableCallback) {
-      this.onViewableCallback(metrics);
-    }
-  }
-  
-  private calculateMetrics(): ViewabilityMetrics {
-    const currentTime = performance.now();
-    const exposureTime = this.firstViewableTime 
-      ? currentTime - this.firstViewableTime 
-      : 0;
-    
-    return {
-      isViewable: this.isViewableAchieved,
-      exposureTime,
-      maxVisibilityRatio: this.maxVisibilityRatio,
-      firstViewableTime: this.firstViewableTime,
-      measureStartTime: this.startTime,
-    };
-  }
-  
-  public getMetrics(): ViewabilityMetrics {
-    return this.calculateMetrics();
-  }
-  
   public destroy(): void {
-    this.stopViewabilityTimer();
-    
-    if (this.maxVisibilityTimer) {
-      clearTimeout(this.maxVisibilityTimer);
-      this.maxVisibilityTimer = null;
-    }
-    
     if (this.observer) {
       this.observer.disconnect();
       this.observer = null;

package/src/managers/ads/viewable-event-tracker.ts

@@ -1,110 +1,40 @@
 /**
- * VIEWABLE 이벤트 추적 및 중복 방지 관리 클래스
- * - 메모리 기반 중복 확인
- * - 세션 스토리지 기반 영구 추적
- * - 자동 정리 기능
- * - ViewabilityTracker와 함께 사용하여 중복 viewable 이벤트 방지
+ * 단순한 VIEWABLE 이벤트 중복 방지 관리 클래스
+ * - 세션당 동일 광고 1회만 VIEWABLE 이벤트 허용
+ * - 메모리 기반 추적으로 단순화
  */
 export class ViewableEventTracker {
-  private static viewableTracker = new Map<string, number>();
-  private static readonly VIEWABLE_COOLDOWN_PRODUCTION = 300000; // 5분 쿨다운 (프로덕션)
-  private static readonly VIEWABLE_COOLDOWN_DEBUG = 30000; // 30초 쿨다운 (디버그)
+  private static viewableTracker = new Set<string>();
 
   /**
    * 중복 viewable 이벤트 여부 확인
    */
   static isDuplicateViewable(adId: string, slotId: string, debug = false): boolean {
     const key = `${adId}_${slotId}`;
-    const now = Date.now();
     
-    // 디버그 모드에 따른 쿨다운 시간 결정
-    const cooldownTime = debug ? 
-      ViewableEventTracker.VIEWABLE_COOLDOWN_DEBUG : 
-      ViewableEventTracker.VIEWABLE_COOLDOWN_PRODUCTION;
-    
-    // 메모리 기반 중복 확인 (새로고침 시 초기화됨)
-    const lastViewable = ViewableEventTracker.viewableTracker.get(key);
-    if (lastViewable && (now - lastViewable) < cooldownTime) {
+    // 이미 VIEWABLE 이벤트가 발생한 광고인지 확인
+    if (ViewableEventTracker.viewableTracker.has(key)) {
       if (debug) {
-        console.log(`Duplicate viewable blocked for ad ${adId} in slot ${slotId}. Cooldown: ${Math.round((cooldownTime - (now - lastViewable)) / 1000)}s remaining (${debug ? 'debug' : 'production'} mode)`);
+        console.log(`Duplicate viewable blocked for ad ${adId} in slot ${slotId}`);
       }
       return true;
     }
     
-    // 세션 스토리지 기반 중복 확인 (새로고침 시에도 유지)
-    const sessionKey = `adstage_viewable_${key}`;
-    const sessionViewable = sessionStorage.getItem(sessionKey);
-    if (sessionViewable) {
-      const sessionTime = parseInt(sessionViewable, 10);
-      if (!isNaN(sessionTime) && (now - sessionTime) < cooldownTime) {
-        if (debug) {
-          console.log(`Session-based duplicate viewable blocked for ad ${adId} in slot ${slotId}. Cooldown: ${Math.round((cooldownTime - (now - sessionTime)) / 1000)}s remaining (${debug ? 'debug' : 'production'} mode)`);
-        }
-        // 메모리에도 기록하여 이후 요청 최적화
-        ViewableEventTracker.viewableTracker.set(key, sessionTime);
-        return true;
-      }
-    }
-    
-    // viewable 이벤트 시점 기록 (메모리 + 세션 스토리지)
-    ViewableEventTracker.viewableTracker.set(key, now);
-    sessionStorage.setItem(sessionKey, now.toString());
-    
-    // 오래된 세션 스토리지 데이터 정리 (선택적)
-    ViewableEventTracker.cleanupOldViewables();
+    // 새로운 VIEWABLE 이벤트 기록
+    ViewableEventTracker.viewableTracker.add(key);
     
     if (debug) {
-      console.log(`✅ New viewable recorded for ad ${adId} in slot ${slotId} (${debug ? 'debug' : 'production'} mode)`);
+      console.log(`✅ New viewable recorded for ad ${adId} in slot ${slotId}`);
     }
     
     return false;
   }
 
-  /**
-   * 오래된 viewable 추적 데이터 정리
-   */
-  private static cleanupOldViewables(): void {
-    const now = Date.now();
-    // 프로덕션 쿨다운의 2배 시간이 지난 데이터 정리
-    const cleanupThreshold = ViewableEventTracker.VIEWABLE_COOLDOWN_PRODUCTION * 2;
-    
-    // 세션 스토리지 정리
-    for (let i = 0; i < sessionStorage.length; i++) {
-      const key = sessionStorage.key(i);
-      if (key && key.startsWith('adstage_viewable_')) {
-        const timestamp = sessionStorage.getItem(key);
-        if (timestamp) {
-          const time = parseInt(timestamp, 10);
-          if (!isNaN(time) && (now - time) > cleanupThreshold) {
-            sessionStorage.removeItem(key);
-            i--; // 인덱스 조정
-          }
-        }
-      }
-    }
-    
-    // 메모리 정리
-    for (const [key, timestamp] of ViewableEventTracker.viewableTracker.entries()) {
-      if ((now - timestamp) > cleanupThreshold) {
-        ViewableEventTracker.viewableTracker.delete(key);
-      }
-    }
-  }
-
   /**
    * 모든 추적 데이터 정리 (디버그용)
    */
   static clear(): void {
     ViewableEventTracker.viewableTracker.clear();
-    // 세션 스토리지에서도 adstage_viewable_ 키들 제거
-    const keysToRemove: string[] = [];
-    for (let i = 0; i < sessionStorage.length; i++) {
-      const key = sessionStorage.key(i);
-      if (key && key.startsWith('adstage_viewable_')) {
-        keysToRemove.push(key);
-      }
-    }
-    keysToRemove.forEach(key => sessionStorage.removeItem(key));
   }
 
   /**
@@ -113,7 +43,5 @@ export class ViewableEventTracker {
   static clearAdViewable(adId: string, slotId: string): void {
     const key = `${adId}_${slotId}`;
     ViewableEventTracker.viewableTracker.delete(key);
-    const sessionKey = `adstage_viewable_${key}`;
-    sessionStorage.removeItem(sessionKey);
   }
 }

package/src/modules/ads/AdRenderer.ts

@@ -253,7 +253,7 @@ export class AdRenderer {
           if (this.debug) {
             console.log(`🔄 Starting advertisement event tracking: ${eventType} for ad ${adId} in slot ${slotId}`);
           }
-          await this.advertisementEventTracker.trackAdvertisementEvent(adId, slotId, eventType, {});
+          await this.advertisementEventTracker.trackAdvertisementEvent(adId, slotId, eventType);
           if (this.debug) {
             console.log(`📊 Advertisement event tracked: ${eventType} for ad ${adId} in slot ${slotId}`);
           }