이벤트 리스너 추가

1. 광고 이벤트 리스너 추가

gladsdk.addEventListener()를 사용하여 광고 슬롯 렌더링 과정에서 발생하는 이벤트에 대해 광고 이벤트 리스너를 추가할 수 있습니다.

2. 광고 이벤트 종류

이벤트	이벤트 타입명	설명
광고 로드	gladsdk.event.AD_LOADED	광고 슬롯에 광고 로드 시 발생
광고 렌더	gladsdk.event.AD_RENDERED	광고 슬롯에 광고 렌더 시 발생
광고 클릭	gladsdk.event.AD_CLICKED	광고 슬롯에 랜더링된 소재 클릭 시 발생
광고 노출	gladsdk.event.AD_IMPRESSED	광고 슬롯에 랜더링된 소재 노출 기준 만족 시 발생
광고 에러	gladsdk.event.ERROR	광고 로드 실패 혹은 실행 에러 시 발생
빈 광고	gladsdk.event.EMPTY	노출할 광고가 없는 경우 발생
광고 뮤트 발생	gladsdk.event.AD_MUTE_COMPLETED	광고 뮤트 사유 클릭 시 발생
광고 뮤트 상태 변경	gladsdk.event.AD_MUTE_STATE_CHANGED	광고 뮤트 상태 변경 시 발생
광고 소재 메타 변경	gladsdk.event.CREATIVE_META_CHANGED	광고 소재 메타 정보 변경 시 발생

warning

AD_RENDERED 이벤트는 광고 SDK가 광고 소재를 DOM 삽입 시에 발화가 됩니다.

다만, 광고 소재에 따라서 RENDERED 이벤트 시점에 광고 사이즈가 정확하지 않을 수 있습니다.

위험

광고 에러 이벤트가 발생했을 때 광고 슬롯이 삭제되지 않아야 합니다.

SDK는 렌더링에 실패한 광고에 대해서도 유효노출을 체크하기 때문에 adSlotElement.remove() 등의 호출로 광고 영역이 삭제되지 않아야 하고 display: none이 적용되지 않아야 합니다.

2-1. 광고 이벤트로 전달되는 광고 정보 조회

광고 이벤트 리스너 설정을 통해 전달되는 광고 부가 정보(slot, size, adContext, slotIndex, muteState, creativeMeta) 및 에러 정보(error) 조회가 가능합니다.

광고 슬롯 정보

• 광고 이벤트와 연관된 광고 슬롯 인스턴스
• ad.slot으로 조회 가능합니다.

광고 슬롯 사이즈 정보

• 광고 요청 시 서버 응답으로 받은 광고 슬롯의 사이즈
• 광고 제공자 서버측에서 전달하는 설정된 사이즈값이 전달되어 해당 광고 슬롯에 최종적으로 랜더링된 사이즈 정보와 다를 수 있습니다.
• ad.size으로 조회 가능하고 네이티브 광고의 경우 undefined일 수 있습니다.

광고 메타(adContext) 정보

• 광고 요청 시 서버 응답으로 받은 선출된 해당 광고와 관련된 광고 메타 정보
• ad.adContext로 조회 가능하고 JSON 문자열 형태로 전달된다. 서버 응답값이 없을 경우 undefined로 조회됩니다.

슬롯 인덱스(slotIndex) 정보

• 광고 소재 캐로셀 내부 요소(slot)의 순번 정보
• AD_CLICKED 이벤트 수신 시 ad.slotIndex로 조회 가능. 조회 조건에 부합하지 않는 경우 undefined로 조회됩니다.
  • 위의 adContext 응답값이 존재하고 선출된 광고의 소재 유형이 캐로셀 형태(배너, 네이티브 유형 모두 포함)인 경우 해당 소재의 캐로셀 하위 요소를 클릭한 경우에만 slotIndex 값이 전달됩니다.
  • 캐로셀 하위 요소가 아닌 캐로셀 외부 영역을 클릭한 경우에는 slotIndex 값이 undefined로 조회됩니다.
  • 내부적으로 캐로셀 하위 요소를 식별할 수 없는 경우에도 slotIndex 값이 undefined로 조회됩니다.
• slotIndex는 첫번째 요소가 0부터 시작하는 number 값으로 설정되어 전달됩니다.

광고 뮤트 상태 정보

• AD_MUTE_STATE_CHANGED 이벤트와 연관된 광고 뮤트 상태 정보. 해당 이벤트 핸들러의 2번째 파라미터 값(muteState)으로 전달됩니다.
• 사용자에 의해 광고 뮤트 아이콘이 초기화되고 해당 아이콘 클릭 이후의 광고 차단 사유 선택 단계 변경에 따른 내부 광고 뮤트 상태값이 전달됩니다.
• 광고 뮤트 아이콘이 초기화되지 않는 경우 해당 상태 정보가 전달되지 않습니다.
• 광고 뮤트 상태 정보는 'init', 'feedbackOn', 'question', 'result' 값을 가집니다.

광고 소재 매타 정보

• CREATIVE_META_CHANGED 이벤트와 연관된 광고 소재 매타 정보. 해당 이벤트 핸들러의 2번째 파라미터 값(creativeMeta)으로 전달됩니다.
• 광고 소재에서 매체 페이지에 전달이 필요한 소재와 관련된 정보가 있는 경우 소재 코드를 통해 관련 정보가 전달됩니다. 소재 코드에서 해당 정보가 별도로 제공되지 않는 경우에는 전달되지 않습니다.

광고 에러 정보

• ERROR, EMPTY 에러 이벤트와 연관된 광고 에러 인스턴스. 해당 이벤트 핸들러의 2번째 파라미터 값(error)으로 전달됩니다.

window.gladsdk = window.gladsdk || { cmd: [] };

window.gladsdk.cmd.push(function () {
  // 광고 로드
  window.gladsdk.addEventListener(window.gladsdk.event.AD_LOADED, function (ad) {
    console.debug(window.gladsdk.event.AD_LOADED);

    var adSlot = ad.slot;
    var adUnitId = adSlot.getAdUnitId();
    var adSlotElementId = adSlot.getAdSlotElementId();
  });

  // 광고 클릭
  window.gladsdk.addEventListener(window.gladsdk.event.AD_CLICKED, function (ad) {
    console.debug(window.gladsdk.event.AD_CLICKED);
  });

  // 광고 Viewable
  window.gladsdk.addEventListener(window.gladsdk.event.AD_IMPRESSED, function (ad) {
    console.debug(window.gladsdk.event.AD_IMPRESSED);
  });

  // 광고 에러
  window.gladsdk.addEventListener(window.gladsdk.event.ERROR, function (ad, error) {
    console.debug(window.gladsdk.event.ERROR);
  });

  // AD mute 발생
  window.gladsdk.addEventListener(window.gladsdk.event.AD_MUTE_COMPLETED, function (ad) {
    console.debug(window.gladsdk.event.AD_MUTE_COMPLETED);
  });

  // AD mute 상태 변경 발생
  window.gladsdk.addEventListener(window.gladsdk.event.AD_MUTE_STATE_CHANGED, function (ad, muteState) {
    console.debug(window.gladsdk.event.AD_MUTE_STATE_CHANGED, muteState);
  });

  // 광고 소재 메타 정보 전달
  window.gladsdk.addEventListener(window.gladsdk.event.CREATIVE_META_CHANGED, function (ad, creativeMeta) {
    console.debug(window.gladsdk.event.CREATIVE_META_CHANGED, creativeMeta);
  });

  var adSlotInfo = {
    adUnitId: 'WEB_nw_banner-N345765840',
    adSlotElementId: 'division',
  };

  var adSlot = window.gladsdk.defineAdSlot(adSlotInfo);
  window.gladsdk.displayAd(adSlot);
});

3. 광고 이벤트 리스너 제거

이벤트 리스너 개별 제거

glad.addEventListener()를 통해 추가했던 리스너를 제거하려면, gladsdk.removeEventListener()를 추가했던 콜백 함수의 레퍼런스와 함께 호출합니다.

var listener = function (ad) {
  console.debug(window.gladsdk.event.AD_CLICKED);
}
window.gladsdk.addEventListener(window.gladsdk.event.AD_CLICKED, listener);
window.gladsdk.removeEventListener(window.gladsdk.event.AD_CLICKED, listener);

이벤트 리스너 일괄 제거

gladsdk.removeAllEventListener()를 이용하여 모든 이벤트리스너를 제거할 수 있습니다.

window.gladsdk.removeAllEventListener();