WebPage Side 연동
Android, iOS SDK 를 탑재하지 않을 경우 애드팝콘 광고는 노출되지 않습니다.
SPA (Single Page Application) 를 지원하지 않습니다.
1. Web SDK 라이브러리 로드
HTML 문서에 다음을 추가하여 라이브러리를 로드합니다
<head>
<!-- v1.0.10 -->
<script async src="https://ssp.igaw.io/sdk/apsspads.js"></script>
</head>이 코드는 https://ssp.igaw.io/sdk/apsspads.js에서 라이브러리를 로드합니다. 라이브러리가 완전히 로드되면 apsspads 객체의 대기 중인 명령어를 처리합니다.
SDK는 페이지 로드 시 최초 1회 만 로드 되어야 합니다.
2. 광고 슬롯 정의
apsspads.setConfig, apsspads.defineAdUnits 메서드를 사용하여 광고 슬롯을 정의하고 객체를 초기화합니다.
이 코드는 먼저 apsspads 객체를 사용하여광고 슬롯을 구성하고 명령을 대기열에 추가합니다. 이때 사용되는 API는 apsspads의 명령어 대기열 (apsspads.cmd)에 추가된 함수 내에서 사용되어야 합니다.
이 예의 광고 슬롯은 TEST_BANNER_PLACEMENT_ID 지면에 300x250 크기의 광고를 로드합니다. 광고는 페이지 본문에 있는 <div id="div-1"> 요소에 표시되며 다음에 추가됩니다.
3. 광고 게재 위치 지정
HTML 문서의 <body></body>에 다음 코드를 추가하여 광고가 게재되는 위치를 지정합니다.
id는 광고 슬롯을 생성할 때 정의한 code 값과 동일해야 합니다.
4. NAM(Naver Ad Manager) 패스백 설정
apsspads.setConfig 메서드에 nam을 사용 여부를 정의합니다.
5. 광고 클릭 커스텀
광고 클릭 시 링크 새창 활성이 불가능할 경우 핸들러를 설정할 수 있습니다.
클릭 핸들러 실행 시 광고의 기본 랜딩은 동작하지 않습니다. (콜백 함수 내에 랜딩 로직 구현이 필요합니다.)
6. 패스백 커스텀
애드팝콘 또는 NAM 광고가 광고 슬롯 등록 실패, NO AD, 타임아웃 등의 이유로 노출되지 않을 때 호출할 패스백을 설정할 수 있습니다. (콜백 함수 내에 패스백 로직 구현이 필요합니다.)
7. 광고 이벤트 리스너 추가/삭제
apsspads.addEventListener(), apsspads.removeEventListener()를 사용하여 광고 슬롯 렌더링 중에 발생하는 이벤트에 대해 이벤트 리스너를 추가/삭제할 수 있습니다.
loaded
광고 로드
광고 슬롯에 광고 로드 시 발생
impressed
광고 노출
광고 슬롯에 렌더링된 소재 노출 기준 만족 시 발생
clicked
광고 클릭
광고 슬롯에 렌더링된 소재 클릭 시 발생
error
에러
광고 로드 실패 또는 실행 에러 시 발생
8. 배경색 변경
네이티브 광고의 배경색을 변경할 수 있습니다. (기본값 #F8F8F8)
9. 테두리/인포마크 제거
10. 광고 영역 라운드 처리
광고 영역에 border-radius, overflow 를 적용합니다.
iOS 에서 Stacking context 이슈로 라운드 처리가 동작하지 않을 경우: z-index: 0 또는 isolation: isolate 또는 -webkit-mask-image: -webkit-radial-gradient(white, black) 를 적용합니다.
11. 기타
애드팝콘 WEB SDK가 로드되어 호출할 준비가 되었는지 확인할 수 있습니다.
카카오 간편로그인 사용으로 인해 userAgent의 wv 값을 제거해야 할 경우, 웹뷰 여부를 확인할 수 없기 때문에 애드팝콘 광고를 노출하지 않습니다. 아래와 같이 설정할 경우 웹뷰 확인 단계를 건너뛸 수 있습니다.
Last updated
Was this helpful?