Ad Duplication Control and Restoration in React

Ad Duplication Control

Ad Duplication Control is used to avoid displaying the same ad across multiple ad slots.

In React, you can apply ad duplication control using the Hooks and components defined in Sample Code with React, as shown in the example below.

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} />
    </>
  );
}

Restoring deduplicated ads

If you want to restore ads that were displayed with duplication control, you can use the restoreAds method.

In the example below, we assume the business logic uses sessionStorage to determine whether ad restoration is necessary and implement it accordingly.

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} />
    </>
  );
}