본문으로 건너뛰기

뒤로가기 시 광고 복원

Persist를 적용하여 뒤로가기로 페이지에 돌아왔을 때 기존에 노출된 광고와 동일한 광고를 노출할 수 있습니다.

브라우저의 BF Cache로 페이지가 복원되는 경우에는 Persist 모드가 동작하지 않습니다.

1. Concepts​

  • Persist가 적용된 경우 SDK는 광고를 렌더링할 때 광고 정보를 저장합니다.

    광고 정보는 페이지 URL + adSlotElementId로 구분되어 저장됩니다.

  • 광고 슬롯을 렌더링할 때 SDK는 아래 모든 조건을 만족하면 저장된 광고를 노출합니다.

    1. enablePersistAd가 true로 설정되어 있어야 합니다.
    2. 뒤로가기로 인해 페이지가 로드되었어야 합니다.
    3. 페이지 URL + adSlotElementId을 구분자로 저장된 광고가 존재해야 합니다.

2. Persist 설정하기​

  • gladsdk.setGlobalConfig()를 사용하여 persist를 설정할 수 있습니다.

    window.gladsdk.setGlobalConfig({
      enablePersistAd: true,
    });

3. Persist로 광고 렌더링하기​

  • gladsdk.displayAd()를 사용하여 광고를 로드합니다.

    • 해당 예제는 SPA(Single Page Application) 환경이 아닌 일반적인 웹페이지 환경에서의 뒤로 가기시 광고 복원 처리를 설명하는 예제 코드입니다. SPA 환경에서의 광고 복원 기능은 4. 명시적으로 광고 복원 기능 사용하기 항목을 참고해주세요.
    <!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="division_1"></div>
        <script>
          var adSlotInfo1 = {
            adUnitId: 'p_stock',
            adSlotElementId: 'division_1',
          };

          window.gladsdk.cmd.push(function () {
            var adSlot1 = window.gladsdk.defineAdSlot(adSlotInfo1);
            window.gladsdk.displayAd(adSlot1);
          });
        </script>
      </body>
    </html>

4. 명시적으로 광고 복원 기능 사용하기​

  • SPA(Single Page Application) 환경에서 뒤로 가기로 기존 페이지로 돌아오거나 특정 서비스 조건에서 기존에 로드된 광고를 복원해야하는 처리가 필요한 경우 명시적으로 광고 복원 API를 통해 광고 복원 기능을 사용합니다.

  • gladsdk.restoreAd()를 사용하여 gladsdk 전역 인터페이스(gladsdk.defineAdSlot())를 통해 생성된 광고 슬롯에 대해 기존 로드된 광고를 복원합니다.

    • 여러 개의 광고 슬롯 단위로 중복 제어 기능을 사용하지 않고 단일 광고 슬롯 단위로 광고 복원을 시도해야하는 경우에 사용합니다.
    • 중복 제어 기능이 적용된 복수개의 광고 슬롯들을 복원하려는 목적이라면 중복-제어-광고-복원하기 내용을 참고하여 구현해주세요.

  • SPA 환경에서는 기존에 생성한 광고 슬롯을 조회하여 gladsdk.restoreAd()를 호출합니다.

    // 최초 광고 슬롯 생성 및 광고 로드
    var adSlotInfo = {
      adUnitId: 'WEB_nw_banner-N345765840',
      adSlotElementId: 'division',
    };
    var adSlot = window.gladsdk.defineAdSlot(adSlotInfo);
    window.gladsdk.displayAd(adSlot);

    // -------------------------------------------------------
    // 최초 광고 로드 후 특정 서비스 조건(뒤로 가기 등)에서 광고 복원 시도

    var adSlot = window.gladsdk.findAdSlot('division');
    window.gladsdk.restoreAd(adSlot);
    // 최초 광고 슬롯 생성 및 광고 로드
    var adSlot1 = window.gladsdk.defineAdSlot(adSlotInfo1);
    var adSlot2 = window.gladsdk.defineAdSlot(adSlotInfo2);
    adDedupManager.displayAds([adSlot1, adSlot2]); // 특정 중복제어 매니저를 통해 광고 노출

    var adSlot3 = window.gladsdk.defineAdSlot(adSlotInfo3);
    window.gladsdk.displayAd(adSlot3); // 전역 네임스페이스 단위(gladsdk)로 광고 노출

    // -------------------------------------------------------
    // 최초 광고 로드 후 특정 서비스 조건(뒤로 가기 등)에서 광고 복원 시도

    window.gladsdk.restoreAd(); // 전역 네임스페이스 단위로 노출되었던 adSlot3만 복원됨