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 메서드를 사용하여 광고 슬롯을 정의하고 객체를 초기화합니다.
<head>
<script async src="https://ssp.igaw.io/sdk/apsspads.js"></script>
<script>
window.apsspads = window.apsspads || { cmd: [] };
apsspads.cmd.push(function() {
apsspads.setConfig({ pubId: "TEST_APP_KEY" }); // 애드팝콘 앱키
apsspads.defineAdUnits({
code: "div-1", // 광고 노출 영역 (HTML Element)의 Id (광고 게재 위치 지정 참고)
plcmtId: "TEST_BANNER_PLACEMENT_ID", // 애드팝콘 지면 Id
size: [300, 250] // 크기 (네이티브 광고일 경우 정의하지 않습니다)
});
apsspads.requestBids(); // 광고 요청
});
</script>
</head>이 코드는 먼저 apsspads 객체를 사용하여광고 슬롯을 구성하고 명령을 대기열에 추가합니다. 이때 사용되는 API는 apsspads의 명령어 대기열 (apsspads.cmd)에 추가된 함수 내에서 사용되어야 합니다.
이 예의 광고 슬롯은 TEST_BANNER_PLACEMENT_ID 지면에 300x250 크기의 광고를 로드합니다. 광고는 페이지 본문에 있는 <div id="div-1"> 요소에 표시되며 다음에 추가됩니다.
3. 광고 게재 위치 지정
HTML 문서의 <body></body>에 다음 코드를 추가하여 광고가 게재되는 위치를 지정합니다.
id는 광고 슬롯을 생성할 때 정의한 code 값과 동일해야 합니다.
<body>
<div id="div-1"></div> <!-- 예제, 변경가능 -->
</body>4. NAM(Naver Ad Manager) 패스백 설정
apsspads.setConfig 메서드에 nam을 사용 여부를 정의합니다.
<head>
<script async src="https://ssp.igaw.io/sdk/apsspads.js"></script>
<script>
window.apsspads = window.apsspads || { cmd: [] };
apsspads.cmd.push(function() {
apsspads.setConfig({
pubId: "TEST_APP_KEY" // 애드팝콘 앱키,
nam: true // *** NAM 패스백 사용 ***
});
apsspads.defineAdUnits({
code: "div-1", // 광고 노출 영역 (HTML Element)의 Id
plcmtId: "TEST_BANNER_PLACEMENT_ID", // 애드팝콘 지면 Id
size: [300, 250], // 크기 (네이티브 광고일 경우 정의하지 않습니다)
fallback: {
nam: {
adUnitId: "WEB_nw_??????????" // NAM 광고 유닛 ID
}
}
// 또는 fallback: { nam: "WEB_nw_??????????" }
});
apsspads.requestBids(); // 광고 요청
});
</script>
</head>5. 광고 클릭 커스텀
광고 클릭 시 링크 새창 활성이 불가능할 경우 핸들러를 설정할 수 있습니다.
클릭 핸들러 실행 시 광고의 기본 랜딩은 동작하지 않습니다. (콜백 함수 내에 랜딩 로직 구현이 필요합니다.)
<head>
<script async src="https://ssp.igaw.io/sdk/apsspads.js"></script>
<script>
window.apsspads = window.apsspads || { cmd: [] };
apsspads.cmd.push(function() {
apsspads.setConfig({
pubId: "TEST_APP_KEY", // 애드팝콘 앱키
});
apsspads.defineAdUnits({
code: "div-1", // 광고 노출 영역 (HTML Element)의 Id
plcmtId: "TEST_BANNER_PLACEMENT_ID", // 애드팝콘 지면 Id
size: [300, 250] // 크기 (네이티브 광고일 경우 정의하지 않습니다, NAM 광고 크기 X)
});
apsspads.setClickHandler(function(code, curl) { // 광고 클릭 시 실행
// code: 광고 노출 영역 (HTML Element)의 Id
// curl: 클릭 URL
console.log(code, curl);
});
apsspads.requestBids(); // 광고 요청
});
</script>
</head>6. 패스백 커스텀
애드팝콘 또는 NAM 광고가 광고 슬롯 등록 실패, NO AD, 타임아웃 등의 이유로 노출되지 않을 때 호출할 패스백을 설정할 수 있습니다. (콜백 함수 내에 패스백 로직 구현이 필요합니다.)
<head>
<script async src="https://ssp.igaw.io/sdk/apsspads.js"></script>
<script>
window.apsspads = window.apsspads || { cmd: [] };
apsspads.cmd.push(function() {
apsspads.setConfig({
pubId: "TEST_APP_KEY", // 애드팝콘 앱키
});
apsspads.defineAdUnits({
code: "div-1", // 광고 노출 영역 (HTML Element)의 Id
plcmtId: "TEST_BANNER_PLACEMENT_ID", // 애드팝콘 지면 Id
size: [300, 250] // 크기 (네이티브 광고일 경우 정의하지 않습니다, NAM 광고 크기 X)
});
apsspads.addEventListener("error", function(obj) { // 광고 미 노출 시 호출
// providerName: 광고 미 노출 공급자명
// code: 광고 노출 영역 (HTML Element)의 Id
// stat: 에러 코드 (0: error (invalid ad unit id, ...), 2: no ad, 3: timeout)
console.log(obj); // {providerName: "apssp|nam", code: "div-1", stat: 2}
});
apsspads.requestBids(); // 광고 요청
});
</script>
</head>7. 광고 이벤트 리스너 추가/삭제
apsspads.addEventListener(), apsspads.removeEventListener()를 사용하여 광고 슬롯 렌더링 중에 발생하는 이벤트에 대해 이벤트 리스너를 추가/삭제할 수 있습니다.
loaded
광고 로드
광고 슬롯에 광고 로드 시 발생
impressed
광고 노출
광고 슬롯에 렌더링된 소재 노출 기준 만족 시 발생
clicked
광고 클릭
광고 슬롯에 렌더링된 소재 클릭 시 발생
error
에러
광고 로드 실패 또는 실행 에러 시 발생
<!-- 광고 로드 시 화면에 출력 -->
<head>
<script async src="https://ssp.igaw.io/sdk/apsspads.js"></script>
<script>
window.apsspads = window.apsspads || { cmd: [] };
apsspads.cmd.push(function() {
apsspads.setConfig({
pubId: "TEST_APP_KEY", // 애드팝콘 앱키
});
apsspads.defineAdUnits({
code: "div-1", // 광고 노출 영역 (HTML Element)의 Id
plcmtId: "TEST_BANNER_PLACEMENT_ID", // 애드팝콘 지면 Id
size: [300, 250] // 크기 (네이티브 광고일 경우 정의하지 않습니다, NAM 광고 크기 X)
});
apsspads.addEventListener("loaded", function(obj) { // 광고 슬롯에 광고 로드시 호출
// providerName: 공급자명
// code: 광고 노출 영역 (HTML Element)의 Id
// console.log(obj); // {providerName: "apssp|nam", code: "div-1"}
// 아래 코드는 광고 노출 전 영역을 숨겼다가 광고가 로드되면 화면에 보이는 예제로 필요하지 않을 경우 적용하지 않아도 됩니다.
var el = document.querySelector(`#{obj.code}`);
if (el) {
el.style.display = "block";
}
});
apsspads.requestBids(); // 광고 요청
});
</script>
</head>
<body>
<div id="div-1" style="display:none"></div>
</body>8. 배경색 변경
네이티브 광고의 배경색을 변경할 수 있습니다. (기본값 #F8F8F8)
<head>
<script async src="https://ssp.igaw.io/sdk/apsspads.js"></script>
<script>
window.apsspads = window.apsspads || { cmd: [] };
apsspads.cmd.push(function() {
apsspads.setConfig({
pubId: "TEST_APP_KEY", // 애드팝콘 앱키,
backgroundColor: "#F3F3F3", // 배경색 (기본값: #F8F8F8)
});
apsspads.defineAdUnits({
code: "div-1", // 광고 노출 영역 (HTML Element)의 Id
plcmtId: "TEST_BANNER_PLACEMENT_ID", // 애드팝콘 지면 Id
size: [300, 250] // 크기 (네이티브 광고일 경우 정의하지 않습니다, NAM 광고 크기 X)
});
apsspads.requestBids(); // 광고 요청
});
</script>
</head>9. 테두리/인포마크 제거
<head>
<script async src="https://ssp.igaw.io/sdk/apsspads.js"></script>
<script>
window.apsspads = window.apsspads || { cmd: [] };
apsspads.cmd.push(function() {
apsspads.setConfig({
pubId: "TEST_APP_KEY", // 애드팝콘 앱키,
noBorder: true, // 테두리 제거
noPrivacy: true, // 인포마크 제거
});
apsspads.defineAdUnits({
code: "div-1", // 광고 노출 영역 (HTML Element)의 Id
plcmtId: "TEST_BANNER_PLACEMENT_ID", // 애드팝콘 지면 Id
size: [300, 250] // 크기 (네이티브 광고일 경우 정의하지 않습니다, NAM 광고 크기 X)
});
apsspads.requestBids(); // 광고 요청
});
</script>
</head>10. 광고 영역 라운드 처리
광고 영역에 border-radius, overflow 를 적용합니다.
iOS 에서 Stacking context 이슈로 라운드 처리가 동작하지 않을 경우: z-index: 0 또는 isolation: isolate 또는 -webkit-mask-image: -webkit-radial-gradient(white, black) 를 적용합니다.
<div id="div-1" style="overflow:hidden;border-radius:3px"></div>11. 기타
애드팝콘 WEB SDK가 로드되어 호출할 준비가 되었는지 확인할 수 있습니다.
if (window.apsspads && apsspads.isReady) {
// 애드팝콘 SDK 로드 완료
}apsspads.version; // 1.0.10카카오 간편로그인 사용으로 인해 userAgent의 wv 값을 제거해야 할 경우, 웹뷰 여부를 확인할 수 없기 때문에 애드팝콘 광고를 노출하지 않습니다. 아래와 같이 설정할 경우 웹뷰 확인 단계를 건너뛸 수 있습니다.
window.apsspads_wv = false; // 웹뷰 확인 안함
window.apsspads = window.apsspads || { cmd: [] };Last updated
Was this helpful?