Skip to main content

Getting Started

0. Supported Versions​

  • Modern browsers (Chrome, Edge, Firefox, Safari etc)
  • Supports IE 11 or higher (SDK not supported for lower versions)

1. Loading the NAM Web SDK Library​

  • To load a SDK, add the <script> tag to <head> as below.
  • Loading a SDK is a single-time process when loading the page for the first time. 
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Hello NAM SDK</title>
        <script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
      </head>
      <body></body>
    </html>

SDK Information by Deployment Phase​

Deployment PhaseSDK URLNAM ad call domain
TESThttps://test-img.tveta.naver.net/libs/glad/test/gfp-core.jstest-gfp.veta.naver.com
REALhttps://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.jsgfp.veta.naver.com

2. Generate a command queue of gladsdk​

  1. Initialize gladsdk.cmd to create a command queue for using a SDK.

    <!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: [] };
        </script>
      </head>
    </html>

  2. Once NAM SDK is loaded, it processes pending commands in a gladsdk.cmd

    <!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 () {
            console.log('NAM SDK LOADED!');
          });
        </script>
      </head>
    </html>
danger

Since the window.gladsdk method does not exist before loading a NAM SDK, all window.gladsdk methods must be executed within the gladsdk.cmd command queue.

For more information, please refer to Troubleshooting - gladsdk.cmd not used.

3. Define an NAM ad slot​

  • Use gladsdk.defineAdSlot() to define an ad slot.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Hello GLAD</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 () {
            var adSlotInfo = {
              adUnitId: 'WEB_nw_banner-N345765840',
              adSlotElementId: 'division',
            };

            window.gladsdk.defineAdSlot(adSlotInfo);
          });
        </script>
      </head>
    </html>
    danger

    WEB_nw_banner-N345765840 is an ad unit ID for testing examples.

    In the actual application, you should set the ad unit ID issued by the media manager.

4. Designate the ad container for ad displaying and Display an ad​

  • Create <div> where the advertisement will be displayed and set the ID.

    The id property value of this element should be the same as the adSlotElementId value set when creating the ad slot.

    <body>
      <div id="division"></div>
    </body>

  • Use gladsdk.displayAd() to display the ad.

    <body>
      <div id="division"></div>
      <script>
        window.gladsdk.cmd.push(function () {
          window.gladsdk.displayAd('division');
        });
      </script>
    </body>

5. Final sample code​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Test NAM SDK</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 () {
        var adSlotInfo = {
          adUnitId: 'WEB_nw_banner-N345765840',
          adSlotElementId: 'division',
        };

        window.gladsdk.defineAdSlot(adSlotInfo);
      });
    </script>
  </head>
  <body>
    <div id="division"></div>
    <script>
      window.gladsdk.cmd.push(function () {
        window.gladsdk.displayAd('division');
      });
    </script>
  </body>
</html>