# 동영상

동영상 Script의 경우, 기본적인 동영상 광고 구동을 위한 예시 코드로 작성되어 있습니다. 각 매체별 디자인 특성에 맞도록 UI를 고려하시어 작업을 진행하시기 바랍니다.

## Script 동작 환경

### **Script 추가**

{% hint style="info" %}
동영상(TARGETPICK VIDEO) 광고를 추가하고 구동하기 위한 광고 스크립트를 추가합니다.\
( 아래 코드와 같이 사용하셔야 내부적인 업데이트 진행 시 편리하게 이용하실 수 있습니다. )
{% endhint %}

```html
<script type="text/javascript" src="https://advimg.ad-mapps.com/sdk/js/ver/3.0.0/ad_script.min.js" charset="utf-8"></script>
```

### **옵션**

<table data-full-width="false"><thead><tr><th width="149">함수</th><th width="147">Option</th><th width="147">설명</th><th>기본값</th><th>필수</th><th>값</th></tr></thead><tbody><tr><td>mezzoAdApp</td><td>targetId</td><td>광고 노출영역 ID</td><td> </td><td>Y</td><td>광고가 노출될 영역 ID</td></tr><tr><td>mezzoAdApp</td><td>elementMode</td><td>광고 영상을 삽입하는 영역에 대한 옵션</td><td>INJECTION</td><td>Y</td><td>INJECTION : video 영역(video tag)에 광고를 삽입하는 모드<br>OVERLAY : video 영역이 아닌 영역에 광고를 삽입하는 경우</td></tr><tr><td>mezzoAdApp</td><td>publisher</td><td>발급 받으신 퍼블리셔 코드(Publisher_Code)를 입력</td><td>null</td><td>Y</td><td>발급 받으신 Publisher Code</td></tr><tr><td>mezzoAdApp</td><td>media</td><td>발급 받으신 미디어 코드(Media_Code)를 입력</td><td>null</td><td>Y</td><td>발급 받으신 Media Code</td></tr><tr><td>mezzoAdApp</td><td>section</td><td>발급 받으신 섹션 코드(Section_Code)를 입력</td><td>null</td><td>Y</td><td>발급 받으신 Section Code</td></tr><tr><td>mezzoAdApp</td><td>uAgeLevel</td><td>User 나이 레벨</td><td>null</td><td>N</td><td>0: 만 13세 이하<br>1: 만 13세 이상</td></tr><tr><td>mezzoAdApp</td><td>keyword</td><td>키워드 값 전달</td><td>null</td><td>N</td><td>키워드값을 전달<br>구분자는 ^로 사용<br>구분자를 포함한 전체 문자열 인코딩(encodeURIComponent)</td></tr><tr><td>mezzoAdApp</td><td>autoPlay</td><td>광고 영상을 자동으로 재생</td><td>true</td><td> </td><td>true : 자동으로 재생<br>false : 재생 버튼을 누른 후 재생</td></tr><tr><td>mezzoAdApp</td><td>autoReplay</td><td>광고 영상이 종료된 후 자동으로 다시 재생</td><td>false</td><td> </td><td>true : 종료 후 다시 재생<br>false : 광고 영상 종료</td></tr><tr><td>mezzoAdApp</td><td>clickFullArea</td><td>광고를 클릭하여 광고 상세 정보 페이지로 랜딩되는 영역을 설정</td><td>false</td><td> </td><td>true : 영상 전체 영역에서 클릭 가능<br>false : 광고 정보 더보기 버튼만 클릭 가능</td></tr><tr><td>mezzoAdApp</td><td>muted</td><td>광고 영상을 음소거 상태로 재생</td><td>null<br>(미지정 시 true)</td><td> </td><td>true : Mute 상태로 재생<br>false : Unmute 상태로 재생</td></tr><tr><td>mezzoAdApp</td><td>viewability</td><td>페이지 스크롤시 광고영역이 20% 이하로 보이면 광고 영상 정지</td><td>null<br>(미지정 시 true)</td><td> </td><td>true : 스크롤시 광고영상 정지<br>false : 스크롤시 광고영상 계속 재생</td></tr><tr><td>mezzoAdApp</td><td>soundBtn</td><td>사운드를 제어할 수 있는 버튼</td><td>null<br>(미지정 시 true)</td><td> </td><td>true : 사운드 버튼 보여줌<br>false : 사운드 버튼 보이지 않음</td></tr><tr><td>mezzoAdApp</td><td>clickBtn</td><td>광고 정보 더보기 버튼</td><td>true</td><td> </td><td>true : 광고정보 더보기 버튼 보여줌<br>false : 광고정보 더보기 버튼 보이지 않음</td></tr><tr><td>mezzoAdApp</td><td>skipBtn</td><td>광고 건너뛰기 버튼</td><td>true</td><td> </td><td>true : 스킵 버튼 보여줌<br>false : 스킵 버튼 보이지 않음</td></tr><tr><td>mezzoAdApp</td><td>closeBtn</td><td>닫기 버튼으로 광고영역을 지움</td><td>false</td><td> </td><td>true : 닫기 버튼 보여줌<br>false : 닫기 버튼 보이지 않음</td></tr><tr><td>mezzoAdApp</td><td>postClick</td><td>광고 클릭 이후 발생되는 이벤트</td><td>2</td><td> </td><td>0 : 광고 일시 정지<br>1 : 광고 계속 재생<br>2 : 광고 일시 정지 후 포커싱되면 자동 재생<br>3: 광고 끝내기</td></tr><tr><td>mezzoAdApp</td><td>setArea</td><td>광고소재 높이에 따라 자동으로 채우기</td><td>false</td><td> </td><td>OVERLAY 모드 전용이며 INJECTION 모드에서는 false로 지정</td></tr><tr><td>mezzoAdApp</td><td>adid</td><td>ADID</td><td> </td><td>Y</td><td>단말기 ADID/IDFA 전달<br>예)<br>Android :<br>158d87c5-add4-4646-b366-f39b5950dde1<br>iOS :<br>4A80248C-1BFC-4C9C-A643-B3B389043A20</td></tr><tr><td>mezzoAdApp</td><td>appId</td><td>앱 ID</td><td> </td><td>Y</td><td>예)<br>Android : com.mezzomedia.app<br>iOS: id1234</td></tr><tr><td>mezzoAdApp</td><td>appVersion</td><td>앱 버전</td><td> </td><td>Y</td><td>예) 1.0.0</td></tr><tr><td>mezzoAdApp</td><td>appName</td><td>앱 명칭</td><td> </td><td>Y</td><td>예) mezzomediaapp</td></tr><tr><td>mezzoAdApp</td><td>appStoreUrl</td><td>앱 스토어 URL</td><td> </td><td>Y</td><td>예)<br>Android: https://play.google.com/…<br>iOS: https://apps.apple.com/…</td></tr><tr><td>mezzoAdApp</td><td>manufacturer</td><td>제조사</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>model</td><td>단말기 모델명</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>networkType</td><td>네트워크 타입</td><td> </td><td>N</td><td><a href="#code"><code>코드참조</code></a></td></tr><tr><td>mezzoAdApp</td><td>mcc</td><td>모바일 국가 코드</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>mnc</td><td>모바일 네트워크 코드</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>carrier</td><td>통신사 명</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>language</td><td>단말기 언어</td><td> </td><td>N</td><td><a href="https://ko.wikipedia.org/wiki/ISO_639-1_%EC%BD%94%EB%93%9C_%EB%AA%A9%EB%A1%9D">ISO 639-1</a> 형식의 두자리 언어코드</td></tr><tr><td>mezzoAdApp</td><td>country</td><td>국가 코드</td><td> </td><td>N</td><td><a href="https://ko.wikipedia.org/wiki/ISO_3166-1_alpha-3">ISO 3166-1 alpha-3</a> 형식의 세자리 국가코드</td></tr><tr><td>mezzoAdApp</td><td>skadn</td><td>SKAdNetwork 코드</td><td> </td><td>N<br>(iOS : Y)</td><td>코드가 여러개일시 구분자 ^로 사용<br>예) feyaarzu9v.skadnetwork^…^…</td></tr></tbody></table>

### **샘플코드**

{% code lineNumbers="true" %}

```html
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://advimg.ad-mapps.com/sdk/js/ver/3.0.0/ad_script.min.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="movie_overlay"></div>

        <video id="movie_injection"></video>

        <script type="text/javascript" charset="utf-8">
            mezzoAdApp({
                targetId: 'movie_injection',
                elementMode: 'INJECTION',                
                publisher: 'publisher_code',
                media: 'media_code',
                section: 'section_code',
                uAgeLevel: '1',
                keyword: '',
                autoPlay: true,
                autoReplay: false,
                clickFullArea: false,
                clickBtn: true,
                viewability: true,
                muted: true,                    
                soundBtn: true,
                skipBtn: true,
                closeBtn: false,       
                setArea: false,
                postClick: 2,
                adid: '',
                appId: 'com.mezzomedia.app',
                appVersion: '1.0.0',
                appName: 'mezzomediaapp',
                appStoreUrl: '',
                manufacturer: '',
                model: '',
                networkType: '',
                mcc: '',
                mnc: '',
                carrier: '',
                language: 'ko',
                country: 'KOR',
                skadn: '',
                callbacks: {
                    success: function (type, status, data) {
                        console.log(
                            '[SUCCESS] type : ' + type + ' status : ' + status + ' data : ' + JSON.stringify(data)
                        );
                    },
                    fail: function (type, status, data) {
                        console.log(
                            '[FAIL] type : ' + type + ' status : ' + status + ' data : ' + JSON.stringify(data)
                        );
                    },
                    event: function (type, status, data) {
                        console.log(
                            '[EVENT] type : ' + type + ' status : ' + status + ' data : ' + JSON.stringify(data)
                        );
                    }          
                }
            });
        </script>
    </body>
</html>    
```

{% endcode %}

### 화면 구성 <a href="#screen" id="screen"></a>

{% hint style="info" %}
INJECTION 모드와 OVERLAY 모드시 Target 영역이 다릅니다.
{% endhint %}

* INJECTION 모드 : 아래 그림의 1번 위치(video tag 영역)에 광고 영상이 로드\
  현재 1번에 로드된 영상은 video tag에서 광고영상이 종료된 후 재생될 본영상
* OVERLAY 모드 : 아래 그림의 2번 위치(별도의 영역)에 광고 영상이 로드

<figure><img src="https://583392291-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxdbgD34XdoBdrVCIm02M%2Fuploads%2FFqRuAKhzLh7BMJiucARf%2Fimage.png?alt=media&#x26;token=b4fff25a-0b3b-4257-8710-5b391f1cb500" alt=""><figcaption></figcaption></figure>

#### Callback 정의 <a href="#callback" id="callback"></a>

<table><thead><tr><th>Callback</th><th>type</th><th width="116">status</th><th>설명</th></tr></thead><tbody><tr><td>success</td><td>guarantee</td><td>200</td><td>광고 성공(보장형)</td></tr><tr><td>success</td><td>house</td><td>200</td><td>광고 성공(하우스)</td></tr><tr><td>fail</td><td>noad</td><td>404</td><td>광고없음</td></tr><tr><td>fail</td><td>error</td><td>408</td><td>요청 Timeout</td></tr><tr><td>fail</td><td>error</td><td>415</td><td>Ajax Parsing 에러</td></tr><tr><td>fail</td><td>error</td><td>498</td><td>중복 호출 에러</td></tr><tr><td>fail</td><td>error</td><td>499</td><td>에러</td></tr><tr><td>fail</td><td>error</td><td>501</td><td>지원하지 않는 브라우저</td></tr><tr><td>fail</td><td>error</td><td>502</td><td>지원하지 않는 단말기 (iOS)</td></tr><tr><td>fail</td><td>error</td><td>503</td><td>지원하지 않는 단말기 (Android)</td></tr><tr><td>event</td><td>adclick</td><td>200</td><td>광고 클릭</td></tr><tr><td>event</td><td>close</td><td>200</td><td>닫기 버튼 클릭</td></tr><tr><td>event</td><td>skip</td><td>200</td><td>SKIP 버튼 클릭</td></tr><tr><td>event</td><td>start</td><td>200</td><td>영상 시작</td></tr><tr><td>event</td><td>imp</td><td>200</td><td>영상 노출</td></tr><tr><td>event</td><td>firstQ</td><td>200</td><td>영상 1/4 재생</td></tr><tr><td>event</td><td>midQ</td><td>200</td><td>영상 2/4 재생</td></tr><tr><td>event</td><td>thirdQ</td><td>200</td><td>영상 3/4 재생</td></tr><tr><td>event</td><td>complete</td><td>200</td><td>영상 종료</td></tr><tr><td>event</td><td>objhide</td><td>200</td><td>INJECTION 방식일 때, 매체 video tag 숨김</td></tr><tr><td>event</td><td>objshow</td><td>200</td><td>INJECTION 방식일 때, 매체 video tag 보여줌</td></tr><tr><td>event</td><td>ended</td><td>200</td><td>광고 종료 ( 광고 후 원본 영상 재생 등 추가 작업시 해당 type 을 이용하여 처리 )</td></tr><tr><td>event</td><td>endcard_start</td><td>200</td><td>엔드카드 시작</td></tr><tr><td>event</td><td>endcard_imp</td><td>200</td><td>엔드카드 노출</td></tr><tr><td>event</td><td>endcard_click</td><td>200</td><td>엔드카드 클릭</td></tr><tr><td>event</td><td>endcard_close</td><td>200</td><td>엔드카드 닫기 버튼 클릭</td></tr></tbody></table>

### 정책 <a href="#policy" id="policy"></a>

{% hint style="info" %}
브라우져 정책에 따라 강제로 제어될 수 있습니다.
{% endhint %}

* Autoplay Policy
  * Google Chrome 또는 Safari(version 11 이상)의 경우, User의 Action이 없는 자동 재생(Autoplay)을 제한하고 있습니다.
  * Mute를 설정하시지 않고, 자동 재생(Autoplay)을 하실 경우, 아래의 브라우져 정책에 따라 광고 영상을 재생하지 못하는 경우가 발생할 수 있습니다.
  * 이때, TARGETPICK VIDEO 스크립트에서는 사운드를 Mute한 상태로 재생을 다시 시도합니다.
  * 따라서, 브라우져 정책에 따라 사운드가 Mute된 상태의 광고가 보여질 수 있습니다.
  * c.f ) <https://developers.google.com/web/updates/2017/09/autoplay-policy-changes>
  * c.f ) <https://blog.google/products/chrome/improving-autoplay-chrome/>
* 삼성브라우져
  * 삼성브라우저(4.4.2 이하)에서 일부 기능이 동작하지 않을 수 있습니다.

{% embed url="<https://docs.meba.kr/s-plus/sample_v300/video>" %}

### 코드 정의 <a href="#code" id="code"></a>

<table><thead><tr><th width="354">Code</th><th width="234">Android</th><th>iOS</th></tr></thead><tbody><tr><td>Unknown</td><td>0</td><td>0</td></tr><tr><td>Internet</td><td>1</td><td>1</td></tr><tr><td>WIFI</td><td>2</td><td>2</td></tr><tr><td>Cellular Network - 2G</td><td>4, 7, 11</td><td>4</td></tr><tr><td>Cellular Network - 3G</td><td>3, 5, 6, 8, 9, 10, 12, 14, 15</td><td>5</td></tr><tr><td>Cellular Network - 4G</td><td>13</td><td>6</td></tr><tr><td>Cellular Network - 5G</td><td>20</td><td>7</td></tr><tr><td>Cellular Network - Unknown Generation</td><td>0</td><td>3</td></tr></tbody></table>

#### 문의 <a href="#inquire" id="inquire"></a>

| 구분              | 부서        | 이름    | 이메일                  | 전화번호         |
| --------------- | --------- | ----- | -------------------- | ------------ |
| 제휴 문의           | 크로스미디어사업팀 | 류연종 님 | <yj.ryu@cj.net>      | 02-6484-3282 |
| ID발급 및 광고 세팅 문의 | 크로스미디어사업팀 | 김미현 님 | <mihyun.kim2@cj.net> | 02-6484-3076 |