SPA 광고 중복 제어와 복원

광고 중복 제어

여러 개의 광고 슬롯에 대해 동일한 광고의 노출을 피하기 위해서는 광고 중복 제어를 적용합니다.

React에서도 SPA 광고 적용 (React) 문서에서 정의한 Hook들과 컴포넌트를 이용해 아래 예제와 같이 광고 중복 제어를 적용할 수 있습니다.

MyComponent.tsx

import { useEffect } from 'react';
import { NaverAd } from './NaverAd';
import { useAdSlot } from './use-ad-slot';
import { useGladSdk } from './use-glad-sdk';

const dedupReqId = 'deduplicationReuqestId'

const adSlotInfo1 = {
  adUnitId: 'ad_unit_id_1',
  adSlotElementId: 'slot_1',
  uct: 'KR',
  customParam: {
    category: 'entertainment',
    hobby: ['music', 'sports'],
  },
};

const adSlotInfo2 = {
  adUnitId: 'ad_unit_id_2',
  adSlotElementId: 'slot_2',
};

const MyComponent = () => {
  const gladSdk = useGladSdk();
  const adDedupManager = gladSdk.setAdDeduplication(dedupReqId, 1);

  const adSlot1 = useAdSlot(adSlotInfo1);
  const adSlot2 = useAdSlot(adSlotInfo2);

  useEffect(() => {
    adDedupManager.displayAds([adSlot1, adSlot2]);
  }, [adDedupManager, adSlot1, adSlot2]);

  return (
    <>
      <NaverAd adSlot={adSlot1} />
      <NaverAd adSlot={adSlot2} />
    </>
  );
}

중복 제어 광고 복원

중복 제어로 노출했던 광고를 복원하려는 경우, restoreAds 메소드를 사용하면 광고를 복원할 수 있습니다.

아래 예제에서는 광고 복원 필요 유무를 판단하는 비즈니스 로직을 sessionStorage를 이용한 경우를 가정해 구현합니다.

MyComponent.tsx

import { useEffect } from 'react';
import { NaverAd } from './NaverAd';
import { useAdSlot } from './use-ad-slot';
import { useGladSdk } from './use-glad-sdk';

const dedupReqId = 'deduplicationReuqestId'

const adSlotInfo1 = {
  adUnitId: 'ad_unit_id_1',
  adSlotElementId: 'slot_1',
  uct: 'KR',
  customParam: {
    category: 'entertainment',
    hobby: ['music', 'sports'],
  },
};

const adSlotInfo2 = {
  adUnitId: 'ad_unit_id_2',
  adSlotElementId: 'slot_2',
};

const MyComponent = () => {
  const gladSdk = useGladSdk();
  const adDedupManager = gladSdk.setAdDeduplication(dedupReqId, 1);
  
  const adSlot1 = useAdSlot(adSlotInfo1);
  const adSlot2 = useAdSlot(adSlotInfo2);

  useEffect(() => {
    const shouldRestore = window.sessionStorage.getItem(dedupReqId);
    if (shouldRestore) {
      adDedupManager.restoreAds([adSlot1, adSlot2]);
    } else {
      adDedupManager.displayAds([adSlot1, adSlot2]);
      window.sessionStorage.setItem(dedupReqId, 'true');
    }
  }, [adDedupManager, adSlot1, adSlot2]);

  return (
    <>
      <NaverAd adSlot={adSlot1} />
      <NaverAd adSlot={adSlot2} />
    </>
  );
}