중복 제어와 Persist 광고 복원

광고 중복 제어와 Persist 모드를 적용하여 랜딩 이후 복귀 시 광고를 복원하는 예시입니다.

정보

SPA(React) 환경에서의 중복 제어와 복원 예시는 Examples - SPA 광고 중복 제어와 복원을 참고해주세요.

SDK를 초기화하고 Persist모드를 설정합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello NAM</title>
    <script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
    <script>
      window.gladsdk = window.gladsdk || { cmd: [] };
      window.gladsdk.cmd.push(function () {
        // Persist 모드 설정
        window.gladsdk.setGlobalConfig({
          enablePersistAd: true,
        });
      });
    </script>
  </head>
</html>

광고들이 렌더링될 container와 동작에 필요한 버튼들을 추가한 뒤, 중복 제어 매니저를 생성합니다.

<body>
  <!-- 광고들 렌더링될 div들의 container -->
  <div id="ad-container"></div>
  <div>
    <button id="load-ad">load ad</button><br />
    <a href="https://www.naver.com">다른 페이지 랜딩</a><br />
    <button id="restore">restore</button>
  </div>

  <script>
    var deduplicationId = 'dedup-id';
    var deduplicationCount = 5;

    // 중복 제어 매니저 생성
    window.gladsdk.cmd.push(function () {
      window.gladsdk.setAdDeduplication(deduplicationId, deduplicationCount);
    });
  </script>
</body>

몇개의 광고가 렌더링 되었는지 저장하는 로직을 추가합니다.

광고 렌더링 개수는 매체에서 직접 관리가 필요합니다. 해당 예시에서는 sessionStorage 사용합니다.

<body>
  <script>
    // ... 생략 ...
    var adSlotCount = 0;
    function saveAdSlotCount(count) {
      window.sessionStorage.setItem('adSlotCount', count);
    }

    function getAdSlotCount(count) {
      return parseInt(window.sessionStorage.getItem('adSlotCount'));
    }
  </script>
</body>

중복 제어 매니저를 통해 하나의 광고를 추가하는 함수를 추가합니다.

광고를 추가한 이후 지금까지 추가한 광고 슬롯 개수를 업데이트합니다.
load-ad 버튼에 함수를 이벤트로 등록합니다.

<body>
  <script>
    // ... 생략 ...

    // 광고가 렌더링 될 div를 container에 추가
    function insertDivision(divId) {
      var elDiv = document.createElement('div');
      elDiv.id = divId;
      document.getElementById('ad-container').appendChild(elDiv);
    }

    var adSlotInfo = {
      adUnitId: 'WEB_nw_banner-N345765840',
    };

    function loadOneAd() {
      window.gladsdk.cmd.push(function () {
        // 광고 슬롯 생성
        var adSlot = window.gladsdk.defineAdSlot(adSlotInfo);
        // 광고 슬롯에 설정된 adSlotElementId 조회
        var adSlotElementId = adSlot.getAdSlotElementId();

        // 광고 슬롯이 랜더링될 div 추가
        insertDivision(adSlotElementId);

        // 중복 제어 매니저를 사용하여 광고 렌더링
        var adDedupManager = window.gladsdk.findAdDedupManager(deduplicationId);
        adDedupManager.displayAds([adSlot]);

        // 생성된 광고 슬롯 개수 저장
        adSlotCount++;
        saveAdSlotCount(adSlotCount);
      });
    }
    document.getElementById('load-ad').addEventListener('click', loadOneAd);
  </script>
</body>

광고 복원 로직을 추가합니다.

저장된 광고 슬롯 개수를 읽어옵니다.
기존에 생성했던 광고 슬롯의 개수와 동일한 광고 슬롯을 생성하고 광고가 렌더링될 div를 추가합니다. 기존에 생성되었던 광고 슬롯과 adSlotElementId가 동일해야 합니다.
중복 제어 매니저를 통해 광고 슬롯을 복원합니다.

<body>
  <script>
    // ... 생략 ...
    function restoreAd() {
      window.gladsdk.cmd.push(function () {
        // 랜딩 이전에 생성된 광고 슬롯 개수 조회
        adSlotCount = getAdSlotCount();
        // 복원할 광고 슬롯의 배열
        var adSlots = [];

        // 랜딩 이전에 생성된 슬롯의 개수만큼 광고 슬롯을 생성
        for (var i = 0; i < adSlotCount; i++) {
          var adSlot = window.gladsdk.defineAdSlot(adSlotInfo);
          var adSlotElementId = adSlot.getAdSlotElementId();

          // 광고 슬롯이 랜더링될 div 추가
          insertDivision(adSlotElementId);
          adSlots.push(adSlot);
        }

        // 중복 제어 매니저를 통해 랜딩 이전에 생성된 광고 슬롯만큼 restore
        var adDedupManager = window.gladsdk.findAdDedupManager(deduplicationId);
        adDedupManager.restoreAds(adSlots);
      });
    }
    document.getElementById('restore').addEventListener('click', restoreAd);
  </script>
</body>

최종 예제 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello NAM</title>
    <script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
    <script>
      window.gladsdk = window.gladsdk || { cmd: [] };
      window.gladsdk.cmd.push(function () {
        // Persist 모드 설정
        window.gladsdk.setGlobalConfig({
          enablePersistAd: true,
        });
      });
    </script>
  </head>

  <body>
    <!-- 광고가 렌더링될 div의 container -->
    <div id="ad-container"></div>
    <div>
      <button id="load-ad">load ad</button><br />
      <a href="https://www.naver.com">다른 페이지 랜딩</a><br />
      <button id="restore">restore</button>
    </div>

    <script>
      var deduplicationId = 'dedup-id';
      var deduplicationCount = 5;

      // 중복 제어 매니저 생성
      window.gladsdk.cmd.push(function () {
        window.gladsdk.setAdDeduplication(deduplicationId, deduplicationCount);
      });

      var adSlotCount = 0;
      function saveAdSlotCount(count) {
        window.sessionStorage.setItem('adSlotCount', count);
      }

      function getAdSlotCount(count) {
        return parseInt(window.sessionStorage.getItem('adSlotCount'));
      }

      function insertDivision(divId) {
        var elDiv = document.createElement('div');
        elDiv.id = divId;
        document.getElementById('ad-container').appendChild(elDiv);
      }

      var adSlotInfo = {
        adUnitId: 'WEB_nw_banner-N345765840',
      };

      function loadOneAd() {
        window.gladsdk.cmd.push(function () {
          // 광고 슬롯 생성
          var adSlot = window.gladsdk.defineAdSlot(adSlotInfo);
          // 광고 슬롯에 설정된 adSlotElementId 조회
          var adSlotElementId = adSlot.getAdSlotElementId();

          // 광고 슬롯이 랜더링될 div 추가
          insertDivision(adSlotElementId);

          // 중복 제어 매니저를 사용하여 광고 렌더링
          var adDedupManager = window.gladsdk.findAdDedupManager(deduplicationId);
          adDedupManager.displayAds([adSlot]);

          // 생성된 광고 슬롯 개수 저장
          adSlotCount++;
          saveAdSlotCount(adSlotCount);
        });
      }
      document.getElementById('load-ad').addEventListener('click', loadOneAd);

      function restoreAd() {
        window.gladsdk.cmd.push(function () {
          // 이전 페이지에서 생성된 광고 슬롯 개수 조회
          adSlotCount = getAdSlotCount();
          var adSlots = [];

          for (var i = 0; i < adSlotCount; i++) {
            // 광고 슬롯 생성
            var adSlot = window.gladsdk.defineAdSlot(adSlotInfo);
            // 광고 슬롯에 설정된 adSlotElementId 조회
            var adSlotElementId = adSlot.getAdSlotElementId();

            // 광고 슬롯이 랜더링될 div 추가
            insertDivision(adSlotElementId);
            adSlots.push(adSlot);
          }

          // 중복 제어 매니저를 통해 광고 restore
          var adDedupManager = window.gladsdk.findAdDedupManager(deduplicationId);
          adDedupManager.restoreAds(adSlots);
        });
      }

      // 새로고침 클릭 시
      document.getElementById('restore').addEventListener('click', restoreAd);
    </script>
  </body>
</html>

최종 예제 코드​

최종 예제 코드