본문으로 건너뛰기

뒤로가기 시 광고 복원

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

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

1. Concepts​

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

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

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

    1. 광고 슬롯에 Persist가 적용되어 있어야 합니다. 광고 슬롯에 설정한 enablePersistAd 값을 따르며, 설정하지 않은 경우 전역 설정의 enablePersistAd 값을 따릅니다.
    2. 뒤로가기로 인해 페이지가 로드되었어야 합니다.
    3. 페이지 URL + adSlotElementId을 구분자로 저장된 광고가 존재해야 합니다.

2. Persist 설정하기​

  • gladsdk.setGlobalConfig()를 사용하여 모든 광고 슬롯에 persist를 설정할 수 있습니다.

    window.gladsdk.setGlobalConfig({
    enablePersistAd: true,
    });
  • gladsdk.defineAdSlot()으로 광고 슬롯을 생성할 때 enablePersistAd를 전달하면 해당 광고 슬롯에만 persist를 설정할 수 있습니다.

    • 광고 슬롯에 enablePersistAd를 설정하지 않으면 전역 설정을 따릅니다.
    • 광고 슬롯에 true 또는 false를 설정하면 전역 설정보다 광고 슬롯 설정이 우선 적용됩니다. 전역 설정을 끈 상태에서 특정 광고 슬롯에만 persist를 적용할 수도 있습니다.
    window.gladsdk.setGlobalConfig({
    enablePersistAd: true,
    });

    // 전역 설정을 따르므로 persist가 적용됨
    var adSlot1 = window.gladsdk.defineAdSlot({
    adUnitId: 'adUnitId1',
    adSlotElementId: 'division_1',
    });

    // 이 광고 슬롯에만 persist가 적용되지 않음
    var adSlot2 = window.gladsdk.defineAdSlot({
    adUnitId: 'adUnitId2',
    adSlotElementId: 'division_2',
    enablePersistAd: false,
    });

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://sdk.naverads.net/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);
    • Persist가 적용되지 않은 광고 슬롯은 복원하지 않습니다.
    • 이미 광고를 요청한 광고 슬롯이라도 저장된 광고가 있으면 현재 광고를 저장된 광고로 교체합니다. 저장된 광고가 없으면 현재 광고를 그대로 유지합니다.
    • adSlot 파라미터를 넘기지 않을 경우 기존에 gladsdk.displayAd() API로 노출되었던 전체 광고 슬롯들에 대해 광고 복원을 시도합니다. 이때도 Persist가 적용된 광고 슬롯만 복원합니다.
    • 개별 중복 제어 매니저를 통해 최초 요청된 광고 슬롯들은 gladsdk.restoreAd() 복원 대상에는 포함되지 않습니다. 개별 중복 제어 매니저를 통한 광고 복원은 해당 중복 제어 매니저 단위로 광고 복원 대상이 관리됩니다.
    // 최초 광고 슬롯 생성 및 광고 로드
    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만 복원됨