Ad deduplication and Persist ad restoration

This example restores ads when returning after landing by applying Ad deduplication and Persist mode.

info

For guide and example of duplication control and restoration in a React environment, please refer to Ad Duplication Control and Restoration in React.

Initialize SDK and set Persist mode.

<!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 () {
        // Set Persist mode.
        window.gladsdk.setGlobalConfig({
          enablePersistAd: true,
        });
      });
    </script>
  </head>
</html>

Add the container where ads will be rendered and the buttons required for operation. Then, create an ad deduplication manager. Add a logic to store how many ads have been rendered.

<body>
  <!-- ad container -->
  <div id="ad-container"></div>
  <div>
    <button id="load-ad">load ad</button><br />
    <a href="https://www.naver.com">Go to other page</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>

Add a logic to store how many ads have been rendered before.

In this example, sessionStorage is used.

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

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

Add a function to add a single ad by using the ad deduplication manager.

After adding an ad, update the number of ad slots added so far.
Register the function as an event in the load-ad button.

<body>
  <script>
    // ...
    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);
        var adSlotElementId = adSlot.getAdSlotElementId();

        insertDivision(adSlotElementId);

        var adDedupManager = window.gladsdk.findAdDedupManager(deduplicationId);
        adDedupManager.displayAds([adSlot]);

        adSlotCount++;
        saveAdSlotCount(adSlotCount);
      });
    }
    document.getElementById('load-ad').addEventListener('click', loadOneAd);
  </script>
</body>

Add ad restoration logic.

Read the number of stored ad slots.
Create ad slots equal to the number of previously created ad slots. Add div where the ad will be rendered. The adslotElementId must be identical to the previously created ad slot.
Restore ad slots by using the ad deduplication manager.

<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();

          insertDivision(adSlotElementId);
          adSlots.push(adSlot);
        }

        var adDedupManager = window.gladsdk.findAdDedupManager(deduplicationId);
        adDedupManager.restoreAds(adSlots);
      });
    }
    document.getElementById('restore').addEventListener('click', restoreAd);
  </script>
</body>

Final example code

<!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 () {
        window.gladsdk.setGlobalConfig({
          enablePersistAd: true,
        });
      });
    </script>
  </head>

  <body>
    <div id="ad-container"></div>
    <div>
      <button id="load-ad">load ad</button><br />
      <a href="https://www.naver.com">Go to other page</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);
          var adSlotElementId = adSlot.getAdSlotElementId();

          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);
            var adSlotElementId = adSlot.getAdSlotElementId();

            insertDivision(adSlotElementId);
            adSlots.push(adSlot);
          }

          var adDedupManager = window.gladsdk.findAdDedupManager(deduplicationId);
          adDedupManager.restoreAds(adSlots);
        });
      }

      document.getElementById('restore').addEventListener('click', restoreAd);
    </script>
  </body>
</html>

Final example code​

Final example code