@adstage/web-sdk 2.4.11 → 2.4.12

package/dist/index.cjs.js

@@ -2917,6 +2917,12 @@ class AdsModule {
             // 광고가 여러 개이거나 autoSlide 옵션이 있으면 슬라이더로 렌더링
             if (adstageData.length > 1 || slot.config?.autoSlide) {
                 await this.adRenderer?.renderAdSlider(slot, adstageData);
+                // 🔧 슬라이더의 첫 번째 광고도 자동 viewability 추적 시작
+                if (adstageData.length > 0) {
+                    setTimeout(() => {
+                        this.startBasicViewabilityTracking(slot, adstageData[0]);
+                    }, 100); // 슬라이더 렌더링 완료 후 추적 시작
+                }
             }
             else {
                 // 광고가 1개면 일반 렌더링
@@ -2940,24 +2946,38 @@ class AdsModule {
      */
     // optimizeContainerForBannerAds 제거: AdRenderer.optimizeContainerForBannerAds 사용
     /**
-     * 기본 viewability 추적 시작
+     * 기본 viewability 추적 시작 (재시도 로직 포함)
      */
     startBasicViewabilityTracking(slot, ad) {
-        const element = document.getElementById(slot.id);
-        if (!element)
-            return;
-        // 기본 fraud 검사
-        const fraudDetector = new BasicFraudDetector();
-        // viewability 추적
-        const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
-            await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
-        });
-        // 정리를 위해 저장
-        slot.viewabilityTracker = tracker;
-        slot.fraudDetector = fraudDetector;
-        if (this._config?.debug) {
-            console.log(`🎯 Viewability tracking started for slot: ${slot.id}`);
-        }
+        const tryStartTracking = (retryCount = 0) => {
+            const element = document.getElementById(slot.id);
+            if (!element) {
+                if (retryCount < 5) {
+                    // 최대 5번 재시도 (총 1.5초)
+                    setTimeout(() => tryStartTracking(retryCount + 1), 300);
+                    if (this._config?.debug) {
+                        console.log(`🔄 Retrying viewability tracking for slot: ${slot.id} (attempt ${retryCount + 1})`);
+                    }
+                }
+                else {
+                    console.warn(`❌ Failed to find element for viewability tracking: ${slot.id}`);
+                }
+                return;
+            }
+            // 기본 fraud 검사
+            const fraudDetector = new BasicFraudDetector();
+            // viewability 추적
+            const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
+                await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
+            });
+            // 정리를 위해 저장
+            slot.viewabilityTracker = tracker;
+            slot.fraudDetector = fraudDetector;
+            if (this._config?.debug) {
+                console.log(`🎯 Viewability tracking started for slot: ${slot.id} (element found)`);
+            }
+        };
+        tryStartTracking();
     }
     /**
      * Viewable 이벤트 처리

package/dist/index.d.ts

@@ -300,7 +300,7 @@ declare class AdsModule implements BaseModule {
      * 배너 광고를 위한 컨테이너 최적화
      */
     /**
-     * 기본 viewability 추적 시작
+     * 기본 viewability 추적 시작 (재시도 로직 포함)
      */
     private startBasicViewabilityTracking;
     /**

package/dist/index.esm.js

@@ -2915,6 +2915,12 @@ class AdsModule {
             // 광고가 여러 개이거나 autoSlide 옵션이 있으면 슬라이더로 렌더링
             if (adstageData.length > 1 || slot.config?.autoSlide) {
                 await this.adRenderer?.renderAdSlider(slot, adstageData);
+                // 🔧 슬라이더의 첫 번째 광고도 자동 viewability 추적 시작
+                if (adstageData.length > 0) {
+                    setTimeout(() => {
+                        this.startBasicViewabilityTracking(slot, adstageData[0]);
+                    }, 100); // 슬라이더 렌더링 완료 후 추적 시작
+                }
             }
             else {
                 // 광고가 1개면 일반 렌더링
@@ -2938,24 +2944,38 @@ class AdsModule {
      */
     // optimizeContainerForBannerAds 제거: AdRenderer.optimizeContainerForBannerAds 사용
     /**
-     * 기본 viewability 추적 시작
+     * 기본 viewability 추적 시작 (재시도 로직 포함)
      */
     startBasicViewabilityTracking(slot, ad) {
-        const element = document.getElementById(slot.id);
-        if (!element)
-            return;
-        // 기본 fraud 검사
-        const fraudDetector = new BasicFraudDetector();
-        // viewability 추적
-        const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
-            await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
-        });
-        // 정리를 위해 저장
-        slot.viewabilityTracker = tracker;
-        slot.fraudDetector = fraudDetector;
-        if (this._config?.debug) {
-            console.log(`🎯 Viewability tracking started for slot: ${slot.id}`);
-        }
+        const tryStartTracking = (retryCount = 0) => {
+            const element = document.getElementById(slot.id);
+            if (!element) {
+                if (retryCount < 5) {
+                    // 최대 5번 재시도 (총 1.5초)
+                    setTimeout(() => tryStartTracking(retryCount + 1), 300);
+                    if (this._config?.debug) {
+                        console.log(`🔄 Retrying viewability tracking for slot: ${slot.id} (attempt ${retryCount + 1})`);
+                    }
+                }
+                else {
+                    console.warn(`❌ Failed to find element for viewability tracking: ${slot.id}`);
+                }
+                return;
+            }
+            // 기본 fraud 검사
+            const fraudDetector = new BasicFraudDetector();
+            // viewability 추적
+            const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
+                await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
+            });
+            // 정리를 위해 저장
+            slot.viewabilityTracker = tracker;
+            slot.fraudDetector = fraudDetector;
+            if (this._config?.debug) {
+                console.log(`🎯 Viewability tracking started for slot: ${slot.id} (element found)`);
+            }
+        };
+        tryStartTracking();
     }
     /**
      * Viewable 이벤트 처리

package/dist/index.standalone.js

@@ -2912,6 +2912,12 @@ class AdsModule {
             // 광고가 여러 개이거나 autoSlide 옵션이 있으면 슬라이더로 렌더링
             if (adstageData.length > 1 || slot.config?.autoSlide) {
                 await this.adRenderer?.renderAdSlider(slot, adstageData);
+                // 🔧 슬라이더의 첫 번째 광고도 자동 viewability 추적 시작
+                if (adstageData.length > 0) {
+                    setTimeout(() => {
+                        this.startBasicViewabilityTracking(slot, adstageData[0]);
+                    }, 100); // 슬라이더 렌더링 완료 후 추적 시작
+                }
             }
             else {
                 // 광고가 1개면 일반 렌더링
@@ -2935,24 +2941,38 @@ class AdsModule {
      */
     // optimizeContainerForBannerAds 제거: AdRenderer.optimizeContainerForBannerAds 사용
     /**
-     * 기본 viewability 추적 시작
+     * 기본 viewability 추적 시작 (재시도 로직 포함)
      */
     startBasicViewabilityTracking(slot, ad) {
-        const element = document.getElementById(slot.id);
-        if (!element)
-            return;
-        // 기본 fraud 검사
-        const fraudDetector = new BasicFraudDetector();
-        // viewability 추적
-        const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
-            await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
-        });
-        // 정리를 위해 저장
-        slot.viewabilityTracker = tracker;
-        slot.fraudDetector = fraudDetector;
-        if (this._config?.debug) {
-            console.log(`🎯 Viewability tracking started for slot: ${slot.id}`);
-        }
+        const tryStartTracking = (retryCount = 0) => {
+            const element = document.getElementById(slot.id);
+            if (!element) {
+                if (retryCount < 5) {
+                    // 최대 5번 재시도 (총 1.5초)
+                    setTimeout(() => tryStartTracking(retryCount + 1), 300);
+                    if (this._config?.debug) {
+                        console.log(`🔄 Retrying viewability tracking for slot: ${slot.id} (attempt ${retryCount + 1})`);
+                    }
+                }
+                else {
+                    console.warn(`❌ Failed to find element for viewability tracking: ${slot.id}`);
+                }
+                return;
+            }
+            // 기본 fraud 검사
+            const fraudDetector = new BasicFraudDetector();
+            // viewability 추적
+            const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
+                await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
+            });
+            // 정리를 위해 저장
+            slot.viewabilityTracker = tracker;
+            slot.fraudDetector = fraudDetector;
+            if (this._config?.debug) {
+                console.log(`🎯 Viewability tracking started for slot: ${slot.id} (element found)`);
+            }
+        };
+        tryStartTracking();
     }
     /**
      * Viewable 이벤트 처리

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.4.11",
+  "version": "2.4.12",
   "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/modules/ads/AdsModule.ts

@@ -321,6 +321,13 @@ export class AdsModule implements BaseModule {
       // 광고가 여러 개이거나 autoSlide 옵션이 있으면 슬라이더로 렌더링
       if (adstageData.length > 1 || (slot.config as any)?.autoSlide) {
         await this.adRenderer?.renderAdSlider(slot, adstageData);
+        
+        // 🔧 슬라이더의 첫 번째 광고도 자동 viewability 추적 시작
+        if (adstageData.length > 0) {
+          setTimeout(() => {
+            this.startBasicViewabilityTracking(slot, adstageData[0]);
+          }, 100); // 슬라이더 렌더링 완료 후 추적 시작
+        }
       } else {
         // 광고가 1개면 일반 렌더링
         slot.advertisement = adstageData[0];
@@ -347,27 +354,43 @@ export class AdsModule implements BaseModule {
   // optimizeContainerForBannerAds 제거: AdRenderer.optimizeContainerForBannerAds 사용
 
   /**
-   * 기본 viewability 추적 시작
+   * 기본 viewability 추적 시작 (재시도 로직 포함)
    */
   private startBasicViewabilityTracking(slot: AdSlot, ad: Advertisement): void {
-    const element = document.getElementById(slot.id);
-    if (!element) return;
-    
-    // 기본 fraud 검사
-    const fraudDetector = new BasicFraudDetector();
-    
-    // viewability 추적
-    const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
-      await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
-    });
-    
-    // 정리를 위해 저장
-    (slot as any).viewabilityTracker = tracker;
-    (slot as any).fraudDetector = fraudDetector;
+    const tryStartTracking = (retryCount = 0) => {
+      const element = document.getElementById(slot.id);
+      
+      if (!element) {
+        if (retryCount < 5) {
+          // 최대 5번 재시도 (총 1.5초)
+          setTimeout(() => tryStartTracking(retryCount + 1), 300);
+          if (this._config?.debug) {
+            console.log(`🔄 Retrying viewability tracking for slot: ${slot.id} (attempt ${retryCount + 1})`);
+          }
+        } else {
+          console.warn(`❌ Failed to find element for viewability tracking: ${slot.id}`);
+        }
+        return;
+      }
+      
+      // 기본 fraud 검사
+      const fraudDetector = new BasicFraudDetector();
+      
+      // viewability 추적
+      const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
+        await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
+      });
+      
+      // 정리를 위해 저장
+      (slot as any).viewabilityTracker = tracker;
+      (slot as any).fraudDetector = fraudDetector;
 
-    if (this._config?.debug) {
-      console.log(`🎯 Viewability tracking started for slot: ${slot.id}`);
-    }
+      if (this._config?.debug) {
+        console.log(`🎯 Viewability tracking started for slot: ${slot.id} (element found)`);
+      }
+    };
+
+    tryStartTracking();
   }
 
   /**