# 배너

## 지원 상품(사이즈) <a href="#product_size" id="product_size"></a>

<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>
```

### 광고 옵션 설정

#### **옵션**

<table><thead><tr><th width="131">함수</th><th width="110">옵션</th><th width="125">설명</th><th width="73">상품</th><th width="74">기본값</th><th width="87">필수</th><th>값</th></tr></thead><tbody><tr><td>mezzoAd</td><td>targetId</td><td>광고 노출영역 ID</td><td>전체</td><td> </td><td>Y</td><td> </td></tr><tr><td>mezzoAd</td><td>adid</td><td>adid 전송</td><td>전체</td><td>null</td><td>hybrid app일 경우 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>mezzoAd</td><td>publisher</td><td>퍼블리셔 코드</td><td>전체</td><td> </td><td>Y</td><td> </td></tr><tr><td>mezzoAd</td><td>media</td><td>미디어 코드</td><td>전체</td><td> </td><td>Y</td><td> </td></tr><tr><td>mezzoAd</td><td>section</td><td>섹션 코드</td><td>전체</td><td> </td><td>Y</td><td> </td></tr><tr><td>mezzoAd</td><td>uAgeLevel</td><td>User 나이 레벨</td><td>전체</td><td> </td><td>N</td><td>0: 만 13세 이하<br>1: 만 13세 이상</td></tr><tr><td>mezzoAd</td><td>keyword</td><td>키워드 값 전달</td><td>전체</td><td> </td><td>N</td><td>키워드값을 전달<br>구분자는 ^로 사용<br>구분자를 포함한 전체 문자열 인코딩(encodeURIComponent)</td></tr><tr><td>mezzoAd</td><td>closeBtn</td><td>닫기버튼 노출 여부</td><td>전면배너<br>전면동영상</td><td>true</td><td>N</td><td>true : 노출<br>false : 비노출</td></tr><tr><td>mezzoAd</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></tbody></table>

{% hint style="info" %}
&#x20;해당 옵션은 CJ 메조미디어 스크립트 내부에서 광고를 호출하는 방법에 대한 옵션입니다.
{% endhint %}

## 광고페이지 구성

### 소스코드

```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">
            mezzoAd({
                targetId: 'banner_test',
                adid: '',
                publisher: 'publisher_code',
                media: 'media_code',
                section: 'section_code',
                uAgeLevel: '1',
                keyword: '',
                closeBtn: true,
                closeBtnLocation: 3,
                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     | 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="#inquire" id="inquire"></a>

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