동영상

Targetpick 동영상 광고 상품을 Script를 통해 하이브리드 형식으로 구현하기 위한 가이드 입니다.

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

Script 동작 환경

Script 추가

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

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

옵션

함수

Option

설명

기본값

필수

값

샘플코드

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

화면 구성

INJECTION 모드와 OVERLAY 모드시 Target 영역이 다릅니다.

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

Callback 정의

정책

브라우져 정책에 따라 강제로 제어될 수 있습니다.

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 이하)에서 일부 기능이 동작하지 않을 수 있습니다.

코드 정의

문의

Previous배너 Next매체 연동 API

Last updated 1 month ago