Skip to main content

Getting Started

0. Supported Versions​

  • Modern browsers (Chrome, Edge, Firefox, Safari etc)
  • IE browsers are not supported.

1. Loading the GFP 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 GFP 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 Environment​

To test ads in Naver's internal test environment, you need to load the SDK for the TEST environment.

Please refer to the table below and set the SDK URL according to the deployment environment.

Deployment EnvironmentSDK URLSSP Ad Request 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 GFP</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 GFP SDK is loaded, it processes pending commands in a gladsdk.cmd

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Hello GFP</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('GFP SDK LOADED!');
          });
        </script>
      </head>
    </html>
danger

Since the window.gladsdk method does not exist before loading a GFP 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 GFP 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 GFP 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>