` 요소를 추가한 뒤 `display()` 함수를 호출합니다.
{% hint style="warning" %}
**iOS 전체 화면 노출 방지**
iOS에서 전면 비디오 사용 시 전체 화면 노출을 방지하려면 아래 조건을 만족해야 합니다.
* Web SDK v1.11.0 이상 적용
* 앱 내 코드 추가: `configuration.allowsInlineMediaPlayback = true`
{% endhint %}
**인스턴스 생성 함수 정의**
{% hint style="info" %}
앱키, 지면 아이디를 인스턴스에 전달하면 SDK init 설정과 별개로 인스턴스 개별 설정을 사용할 수 있습니다.
{% endhint %}
` 요소를 추가한 뒤 `display()` 함수를 호출합니다.
{% hint style="warning" %}
**iOS 전체 화면 노출 방지**
iOS에서 전면 비디오 사용 시 전체 화면 노출을 방지하려면 아래 조건을 만족해야 합니다.
* Web SDK v1.11.0 이상 적용
* 앱 내 코드 추가: `configuration.allowsInlineMediaPlayback = true`
{% endhint %}
**인스턴스 생성 함수 정의**
{% hint style="info" %}
앱키, 지면 아이디를 인스턴스에 전달하면 SDK init 설정과 별개로 인스턴스 개별 설정을 사용할 수 있습니다.
{% endhint %}
| 함수 | 설명 |
|---|
| createRewardVideo | 리워드 비디오 광고 인스턴스 생성용 |
**인스턴스 생성 함수(create-) 전달용 객체 속성 정의**
| 속성명 | 타입 | 필수 | 설명 |
|---|
| app_key | string | N | 매체용으로 발급된 광고 앱 키 |
| placement_id | string | N | 매체용으로 발급된 광고 지면 아이디 |
| user_landing_enabled | boolean | N | 광고 클릭 시, 랜딩 페이지로 이동 허용 여부 |
**인스턴스 함수 정의**
| 함수 | 설명 |
|---|
| display | 광고 요소를 화면에 표시 |
| terminateAd | 구성된 광고 요소의 재생 중단 및 즉시 종료 |
**인스턴스 함수 전달용 파라미터 속성 정의**
| 함수 | 속성명 | Type | 필수 | 설명 |
|---|
| display | id | string | Y | 광고 인벤토리를 구성할 요소의 id 속성명 |
| terminateAd | id | string | Y | 광고 인벤토리가 구성 요소의 id 속성명 |
**\[ setUserId 함수 전달용 파라미터 속성 정의 ]**
{% hint style="warning" %}
**주의사항**
1. 1명의 유저는 1개의 고유한 유저식별값을 가져야하며, 가변적인 값을 사용해서는 안됩니다.
2. 개인정보(이메일, 이름, 전화번호, 식별가능한 유저아이디 등)이 포함되어서는 안됩니다.
3. 비디오 광고 노출 함수 실행 전에 설정되어야 합니다.
{% endhint %}
{% hint style="info" %}
CS 처리 기능을 위해 유저식별값(userId)을 필수로 설정해주세요.
{% endhint %}
| 속성명 | Type | 필수 | |
|---|
| userId | string | Y | 리워드 비디오 시청 완료 시 완료 유저를 식별하기 위해 사용되는 값 |
{% code title="HTML" %}
```html
```
{% endcode %}
{% endtab %}
{% tab title="네이티브" %}
광고 데이터를 수신하여 매체사가 직접 UI를 구성하는 방식입니다. `loadAd()` 함수로 광고를 호출하고, `adLoadCompleted` 이벤트에서 광고 데이터를 수신합니다.
{% hint style="warning" %}
**주의사항**
loadAd() 호출 결과 광고 수신에 실패한 경우, loadAd()를 재호출하면 안 됩니다. 과도한 광고 호출 요청은 Block 사유가 됩니다.
{% endhint %}
**인스턴스 생성 함수 정의**
| 함수 | 설명 |
|---|
| createNative | 네이티브 광고 인스턴스 생성용 |
| createNativeTemplate | 네이티브 템플릿 광고 인스턴스 생성용 |
**인스턴스 생성 함수 전달용 객체 속성 정의**
| 속성명 | Type | 필수 | 설명 |
|---|
| app_key | string | N | 매체용으로 발급된 광고 앱 키 |
| placement_id | string | N | 매체용으로 발급된 광고 지면 아이디 |
**네이티브 인스턴스 함수 정의**
{% hint style="warning" %}
**주의사항**
네이티브 광고 로딩 성공 후 리포트 수집을 위해 아래 함수를 필수로 호출해야 합니다.
\
단, 네이티브 템플릿은 \[ 1) 광고 호출 ] 의 reportImpression, reportClick을 내장하고 있어 별도 호출이 필요하지 않습니다.
{% endhint %}
| 함수명 | 설명 |
|---|
| reportImpression | 광고 로딩에 성공 후, 광고 데이터를 화면에 노출한 경우에 광고 노출 측정 |
| reportClick | 구성한 네이티브 광고를 클릭한 경우에 클릭 측정 |
1. **네이티브**
```html
```
2. **템플릿 (createNativeTemplate)**
```html
```
{% endtab %}
{% endtabs %}
***
### 3-1. \[선택] 패스백
{% tabs %}
{% tab title="배너" %}
**1. 애드팝콘 > 타 네트워크사**
* 애드팝콘 `adInventoryRendered` 이벤트에서 `isNoAd`가 `true`일 때 모비위드 패스백 광고를 호출합니다.
{% code expandable="true" %}
```html
AP > MobWith passback sample
```
{% endcode %}
* 애드팝콘 `adInventoryRendered` 이벤트에서 `isNoAd`가 `true`일 때 트레이딩웍스(TW) 패스백 광고를 호출하고, TW 광고도 없을 경우 모비위드 패스백 광고를 호출합니다.
{% code expandable="true" %}
```html
AP > TW > MobWith passback sample
```
{% endcode %}
**2. 타 네트워크사 > 애드팝콘**
구글 `slotRenderEnded` 이벤트에서`isEmpty`가 `true`일 때 애드팝콘 광고를 호출합니다.
{% code expandable="true" %}
```html
```
{% endcode %}
{% endtab %}
{% tab title="전면" %}
1. **타 네트워크사 > 애드팝콘**
구글 `slotRenderEnded` 이벤트에서 `isEmpty`가 `true`일 때 애드팝콘 광고를 호출합니다.
{% code expandable="true" %}
```html
```
{% endcode %}
{% endtab %}
{% tab title="전면 비디오" %}
1. **타 네트워크사 > 애드팝콘**
구글 `slotRenderEnded` 이벤트에서 `isEmpty`가 `true`일 때 애드팝콘 광고를 호출합니다.
{% code expandable="true" %}
```html
```
{% endcode %}
{% endtab %}
{% tab title="리워드 비디오" %}
1. **타 네트워크사 > 애드팝콘**
구글 `slotRenderEnded` 이벤트에서 `isEmpty`가 `true`일 때 애드팝콘 광고를 호출합니다.
{% code expandable="true" %}
```html
```
{% endcode %}
{% endtab %}
{% tab title="네이티브" %}
1. **애드팝콘 > 타 네트워크**
`adLoadCompleted` 이벤트에서 `isNoAd`가 `true`일 때 NAM 광고를 호출합니다.
{% code expandable="true" %}
```html
```
{% endcode %}
{% endtab %}
{% tab title="네이티브 템플릿" %}
1. **애드팝콘 > 타 네트워크**
`adLoadCompleted` 이벤트에서 `isNoAd`가 `true`일 때 NAM 광고를 호출합니다.
{% code expandable="true" %}
```html
```
{% endcode %}
{% endtab %}
{% endtabs %}
NAM 광고 중복 제어 적용하기
페이지에 여러 개의 광고 슬롯이 있을 때 각각의 광고는 독립적으로 요청되기 때문에 동일한 광고가 노출될 수 있습니다. 동일한 광고를 제공하고 싶지 않을 때 중복 제어를 적용하여 중복된 광고를 제공하지 않을 수 있습니다.\
\
**참고 문서**\
[NAM SDK > 광고 중복 제어](https://naver.github.io/nam-sdk-guide/web/advanced/deduplication/)
```html
// e.g.노출하고자 하는 NAM 광고 영역이 4개일 때
```
***
### 4. SDK 이벤트 처리
광고 노출 함수(display) / 광고 호출 함수(loadAd) 실행 전, 광고 인스턴스의
`addEventListener`함수를 등록하여 광고 이벤트를 감지하고 필요한 작업을 수행할 수 있습니다.
#### 이벤트 정의
| 광고타입 | 이벤트 타입 | 이벤트 설명 | 이벤트 객체(e) 유,무 |
|---|
| 공통 | sdkError | SDK 연동 실패 시 발생 | O |
| 전면/전면비디오/배너/리워드 비디오 | adInventoryRendered | SDK 연동이 성공한 상황에서 광고 인벤토리 렌더링 실행 후 발생 | O |
| 전면/전면 비디오/ 리워드 비디오 | adClosed | 광고 인벤토리 닫기 클릭시 발생 | X |
| 전면/배너 | adClicked | 광고 인벤토리의 광고 클릭시 최초 1회 발생 | X |
| 전면 비디오/ 리워드 비디오 | adClickthrough | user_landing_enabled가 false인 환경에서 광고 인벤토리 클릭시 발생 | O |
| 리워드 비디오 | adPlaybackCompleted | 리워드 비디오 광고 재생 완료시 발생 | X |
| 네이티브 | adLoadCompleted | SDK 연동이 성공한 상황에서 네이티브 광고 API 호출 후 발생 | O |
#### 이벤트 객체 속성 정의
| 속성 명 | Type | 필수 | 설명 | default |
|---|
| code | string | Y | 이벤트 코드 | |
| message | string | Y | 이벤트 코드 설명 | |
| isNoAd | boolean | Y | 광고 요청 결과에 따른 광고 유,무 | |
| adData | string | N | 네이티브 광고 호출 성공 시 전달되는 광고 데이터 | |
| adElement | Element | N | 네이티브 템플릿 광고 호출 성공 시 전달되는 광고 엘리먼트 | |
| clickthroughURL | string | N | user_landing_enabled가 false인 환경에서 비디오형(전면 비디오/리워드 비디오) 광고 클릭 시, 랜딩될 주소 | |
#### 광고 데이터(adData) 객체 속성 정의
| 속성 명 | Type | 필수 | 설명 | default |
|---|
| ctaText | string | Y | 광고 CTA(call to action) 버튼 텍스트 | |
| desc | string | Y | 광고 설명 | |
| iconImageURL | string | Y | 광고 아이콘 이미지 | |
| landingURL | string | Y | 광고 클릭시, 랜딩될 주소 | |
| mainImageURL | string | Y | 광고 메인 이미지(기본 사이즈: 1200x628) | |
| privacyPolicyImageURL | string | Y | 개인 정보 아이콘 이미지 다운로드 주소 | |
| privacyPolicyURL | string | Y | 개인정보 아이콘 클릭시 랜딩될 주소 | |
| title | string | Y | 광고 타이틀 | |
#### 광고 데이터(adData) 예시
```javascript
{
ctaText: "Click",
desc: "Adpopcorn SSP description sample",
iconImageURL: "https://ap-ssp-be-static.s3.ap-northeast-1.amazonaws.com/test_campaign/80x80_icon.jpg",
landingURL: "https://www.adpopcorn.com/",
mainImageURL: "https://ap-ssp-be-static.s3.ap-northeast-1.amazonaws.com/test_campaign/1200x627.jpg",
privacyPolicyImageURL: "https://ap-ssp-be-static.s3.ap-northeast-1.amazonaws.com/default_image/info-ico.png",
privacyPolicyURL: "https://www.adpopcorn.com/policy/privacy",
title: "Title sample"
};
```
{% tabs %}
{% tab title="전면" %}
{% code title="HTML" %}
```html
```
{% endcode %}
{% endtab %}
{% tab title="전면 비디오" %}
<body>
<script>
AdPopcornSSPWebSDK.cmd.push(() => {
const interstitialVideo = AdPopcornSSPWebSDK.createInterstitialVideo();
// SDK 연동 실패
interstitialVideo.addEventListener("sdkError", (e) => {
// SDK 연동 실패시, 이벤트 처리
});
// 광고 렌더링 결과
interstitialVideo.addEventListener("adInventoryRendered", (e) => {
// 광고 렌더링 결과에 따른 이벤트 처리
});
// user_landing_enabled가 false인 환경에서 광고 클릭
interstitialVideo.addEventListener("adClickthrough", (e) => {
// 광고 클릭 후, 이벤트 처리
});
// 광고 닫기 클릭
interstitialVideo.addEventListener("adClosed", () => {
// 광고 닫기 클릭시, 이벤트 처리
});
interstitialVideo.display("...");
});
</script>
</body>
{% endtab %}
{% tab title="배너" %}
```html
```
{% endtab %}
{% tab title="리워드 비디오" %}
```html
```
{% endtab %}
{% tab title="네이티브" %}
```html
```
{% endtab %}
{% endtabs %}