# 배너

지원 상품(사이즈)

<table><thead><tr><th width="194">상품 구분</th><th>사이즈</th></tr></thead><tbody><tr><td>띠배너</td><td>300x50 ㅣ 320x50 ㅣ 320x100 ㅣ 640x240 ㅣ 640x100 ㅣ 728x90</td></tr><tr><td>전면배너</td><td>640x960 ㅣ 320X480 ㅣ 480x320 ㅣ 1024x768 ㅣ 750x1200 ㅣ 768x1024</td></tr><tr><td>종료배너</td><td>640x960 ㅣ 750x1200</td></tr><tr><td>정사각형 및 직사각형</td><td>200x200 ㅣ 240x400 ㅣ 240x240 ㅣ 250x250 ㅣ 250x360 ㅣ 300x250 ㅣ 336x280 ㅣ 150x150 ㅣ 580x400</td></tr><tr><td>스카이스크래퍼</td><td>120x600 ㅣ 160x600 ㅣ 300x600 ㅣ 300x1050</td></tr><tr><td>리더보드</td><td>468x60 ㅣ 728x90 ㅣ 930x180 ㅣ 970x90 ㅣ 970x250 ㅣ 980x120</td></tr><tr><td>네이티브 피드</td><td>640x960</td></tr><tr><td>네이티브 피드 배너</td><td>320x100 ㅣ 320x50</td></tr><tr><td>스플래시</td><td>1200x1000</td></tr></tbody></table>

**Sample Project**

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

## Script 동작 환경

### Script 추가

{% hint style="info" %}
TARGETPICK 광고를 추가하고 구동하기 위한 광고 스크립트를 추가합니다.

( 아래 코드와 같이 사용하셔야 내부적인 업데이트 진행 시 편리하게 이용하실 수 있습니다. )
{% 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>
```

## 하이브리드 앱 <a href="#callback" id="callback"></a>

{% hint style="info" %}
네이티브 앱 환경에서 웹뷰를 이용하여 광고 스크립트를 연동하는 경우 앱/단말기 옵션을 추가합니다.
{% endhint %}

### 옵션

<table><thead><tr><th width="157">함수</th><th width="111">옵션</th><th>설명</th><th>상품</th><th width="80">기본값</th><th width="76">필수</th><th>값</th></tr></thead><tbody><tr><td>mezzoAdApp</td><td>publisher</td><td>퍼블리셔 코드</td><td>전체</td><td> </td><td>Y</td><td> </td></tr><tr><td>mezzoAdApp</td><td>media</td><td>미디어 코드</td><td>전체</td><td> </td><td>Y</td><td> </td></tr><tr><td>mezzoAdApp</td><td>section</td><td>섹션 코드</td><td>전체</td><td> </td><td>Y</td><td> </td></tr><tr><td>mezzoAdApp</td><td>uAgeLevel</td><td>User 나이 레벨</td><td>전체</td><td> </td><td>N</td><td>0: 만 13세 이하<br>1: 만 13세 이상</td></tr><tr><td>mezzoAdApp</td><td>keyword</td><td>키워드 값 전달</td><td>전체</td><td> </td><td>N</td><td>키워드값을 전달<br>구분자는 ^로 사용<br>구분자를 포함한 전체 문자열 인코딩(encodeURIComponent)</td></tr><tr><td>mezzoAdApp</td><td>closeBtn</td><td>닫기버튼 노출 여부</td><td>전면배너<br>전면동영상</td><td>true</td><td>N</td><td>true : 노출<br>false : 비노출</td></tr><tr><td>mezzoAdApp</td><td>closeBtnLocation</td><td>닫기버튼 위치</td><td>전면배너</td><td>3</td><td>N</td><td>1 : 상단 좌측<br>2 : 상단 중앙<br>3 : 상단 우측<br>4 : 중앙 좌측<br>5 : 중앙 우측<br>6 : 하단 좌측<br>7 : 하단 중앙<br>8 : 하단 우측</td></tr><tr><td>mezzoAdApp</td><td>adid</td><td>adid 전송</td><td>전체</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> </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> </td><td>Y</td><td>예) 1.0.0</td></tr><tr><td>mezzoAdApp</td><td>appName</td><td>앱 명칭</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> </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> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>model</td><td>단말기 모델명</td><td>전체</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>networkType</td><td>네트워크 타입</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> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>mnc</td><td>모바일 네트워크 코드</td><td>전체</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>carrier</td><td>통신사 명</td><td>전체</td><td> </td><td>N</td><td> </td></tr><tr><td>mezzoAdApp</td><td>language</td><td>단말기 언어</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> </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> </td><td>N<br>(iOS : Y)</td><td>코드가 여러개일시 구분자 ^로 사용<br>예) feyaarzu9v.skadnetwork^…^…</td></tr></tbody></table>

### **샘플코드**

```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="banner_test">
            <!-- AD Area -->
        </div>
    
        <script type="text/javascript" charset="utf-8">
            mezzoAdApp({
                targetId: 'banner_test',
                publisher: 'publisher_code',
                media: 'media_code',
                section: 'section_code',
                uAgeLevel: '1',
                keyword: '',
                closeBtn: true,
                closeBtnLocation: 3,
                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>
```

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

| Callback | type      | status | 설명                    | 상품               |
| -------- | --------- | ------ | --------------------- | ---------------- |
| success  | guarantee | 200    | 광고 성공 (보장형)           | 띠배너, 전면배너, 전면동영상 |
| success  | house     | 200    | 광고 성공 (하우스)           | 띠배너, 전면배너, 전면동영상 |
| fail     | noad      | 404    | 광고없음                  | 띠배너, 전면배너, 전면동영상 |
| fail     | error     | 400    | 요청 에러                 | 띠배너, 전면배너, 전면동영상 |
| fail     | error     | 408    | 요청 Timeout            | 띠배너, 전면배너, 전면동영상 |
| fail     | error     | 415    | AJAX Parsing 에러       | 띠배너, 전면배너, 전면동영상 |
| fail     | error     | 498    | 중복 호출 에러              | 띠배너, 전면배너, 전면동영상 |
| fail     | error     | 499    | 에러                    | 띠배너, 전면배너, 전면동영상 |
| fail     | error     | 501    | 지원하지 않는 브라우저          | 띠배너, 전면배너, 전면동영상 |
| fail     | error     | 502    | 지원하지 않는 단말기 (iOS)     | 띠배너, 전면배너, 전면동영상 |
| fail     | error     | 503    | 지원하지 않는 단말기 (Android) | 띠배너, 전면배너, 전면동영상 |
| event    | adclick   | 200    | 광고 클릭                 | 띠배너, 전면배너, 전면동영상 |
| event    | close     | 200    | 닫기 버튼 클릭              | 전면배너, 전면동영상      |
| event    | start     | 200    | 영상 시작                 | 전면동영상            |
| event    | imp       | 200    | 영상 노출                 | 전면동영상            |
| event    | firstQ    | 200    | 영상 1/4 재생             | 전면동영상            |
| event    | midQ      | 200    | 영상 2/4 재생             | 전면동영상            |
| event    | thirdQ    | 200    | 영상 3/4 재생             | 전면동영상            |
| event    | complete  | 200    | 영상 종료                 | 전면동영상            |

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

#### networkType code

<table><thead><tr><th>Code</th><th width="267">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>

[샘플 페이지 이동](https://docs.meba.kr/s-plus/sample_v300/banner/index.html)

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

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