@adstage/web-sdk/src/managers/ads/viewability-tracker.ts

AdStage Web SDK - Production-ready marketing platform SDK with React Provider support for seamless integration

/**
 * 단순한 광고 노출 추적 (50% 노출시 즉시 VIEWABLE 이벤트)
 */

export class SimpleViewabilityTracker {
  private element: HTMLElement;
  private observer: IntersectionObserver | null = null;
  private isViewableTriggered: boolean = false;
  private onViewableCallback?: () => void;
  
  constructor(
    element: HTMLElement, 
    onViewable?: () => void
  ) {
    this.element = element;
    this.onViewableCallback = onViewable;
    
    this.initIntersectionObserver();
  }
  
  private initIntersectionObserver(): void {
    // IntersectionObserver 지원 확인
    if (!('IntersectionObserver' in window)) {
      console.warn('IntersectionObserver not supported, viewability tracking disabled');
      return;
    }

    this.observer = new IntersectionObserver(
      (entries) => this.handleIntersection(entries),
      {
        threshold: 0.5, // 50% 노출
        rootMargin: '0px'
      }
    );
    
    this.observer.observe(this.element);
  }
  
  private handleIntersection(entries: IntersectionObserverEntry[]): void {
    entries.forEach(entry => {
      // 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';
  }
  
  public destroy(): void {
    if (this.observer) {
      this.observer.disconnect();
      this.observer = null;
    }
  }
}