Video Javascript Guide

7 분 소요

Youngjin Lee

현재 버전은 200 입니다.

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

Sample Project

샘플 페이지 이동

Script 동작 환경

jQuery 추가

Signal-Play 광고 스크립트는 JQuery 세팅 환경에서 동작합니다.
광고를 적용하실 페이지에 JQuery 스크립트가 없을 경우, 아래의 태그를 삽입합니다.

<script type="text/javascript" src="https://advimg.ad-mapps.com/sdk/js/jquery-3.4.1.min.js"></script>

Script 추가

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

<script type="text/javascript" src="https://advimg.ad-mapps.com/sdk/js/ver/200/ad_movie_script.js"></script>

광고 옵션 설정

옵션

Option Key 설명 기본값 필수 값
screenMode   광고 영상을 삽입하는 영역에 대한 옵션 INJECTION Y INJECTION : video 영역(video tag)에 광고를 삽입하는 모드
OVERLAY : video 영역이 아닌 영역에 광고를 삽입하는 경우
adid   adid 전송 null hybrid app일 경우 Y 실제 ADID/IDFA를 전달
예)
Android :
158d87c5-add4-4646-b366-f39b5950dde1
iOS :
4A80248C-1BFC-4C9C-A643-B3B389043A20
mPublisher   발급 받으신 퍼블리셔 코드(Publisher_Code)를 입력 null Y 발급 받으신 Publisher Code
mMedia   발급 받으신 미디어 코드(Media_Code)를 입력 null Y 발급 받으신 Media Code
mSection   발급 받으신 섹션 코드(Section_Code)를 입력 null Y 발급 받으신 Section Code
uAgeLevel   User 나이 레벨 null Y 0: 만 13세 미만
1: 만 13세 이상
-1: 알수없음
keyword   키워드 값 전달 null N 키워드값을 전달
구분자는 ^로 사용
구분자를 포함한 전체 문자열 인코딩(encodeURIComponent)
auto_play   광고 영상을 자동으로 재생 true   true : 자동으로 재생
false : 재생 버튼을 누른 후 재생
auto_replay   광고 영상이 종료된 후 자동으로 다시 재생 false   true : 종료 후 다시 재생
false : 광고 영상 종료
click_full_area   광고를 클릭하여 광고 상세 정보 페이지로 랜딩되는 영역을 설정 false   true : 영상 전체 영역에서 클릭 가능
false : 광고 정보 더보기 버튼만 클릭 가능
muted   광고 영상을 음소거 상태로 재생 null
(미지정 시 true)		   true : Mute 상태로 재생
false : Unmute 상태로 재생
viewability   페이지 스크롤시 광고영역이 20% 이하로 보이면 광고 영상 정지 null
(미지정 시 true)		   true : 스크롤시 광고영상 정지
false : 스크롤시 광고영상 계속 재생
sound_btn show 사운드를 제어할 수 있는 버튼 null
(미지정 시 true)		   true : 사운드 버튼 보여줌
false : 사운드 버튼 보이지 않음
images 사운드, 음소거 버튼 이미지       변경 가능 (현재는 Mezzomedia 경로)
Image 경로 를 참조하세요.
click_btn show 광고 정보 더보기 버튼 true   true : 광고정보 더보기 버튼 보여줌
false : 광고정보 더보기 버튼 보이지 않음
skip_btn show 광고 건너뛰기 버튼 true   true : 스킵 버튼 보여줌
false : 스킵 버튼 보이지 않음
close_btn show 닫기 버튼으로 광고영역을 지움 false   true : 닫기 버튼 보여줌
false : 닫기 버튼 보이지 않음
images 광고 영역 닫기 버튼 이미지       변경 가능 (현재는 Mezzomedia 경로)
Image 경로 를 참조하세요.
poster images 광고 영상 준비 중일 때, 표시되는 이미지     변경 가능 (현재는 Mezzomedia 경로)
Image 경로 를 참조하세요.
mezzo.r_large   Resolution을 지정 1024   480 ~ 1024의 숫자 형태로 입력
post_click   광고 클릭 이후 발생되는 이벤트 2   0 : 광고 일시 정지
          1 : 광고 계속 재생
          2 : 광고 일시 정지 후 포커싱되면 자동 재생
          3 : 광고 끝내기
setArea 첫번째 인자 광고소재 높이에 따라 자동으로 채우기 false   OVERLAY 모드 전용이며 INJECTION 모드에서는 false로 지정
setArea 두번째 인자 높이 비율 100   OVERLAY 모드 전용이며 지정된 값으로 소재 높이의 비율계산 후 노출

이미지 경로

이미지 경로
sound image https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/on.png
muted imgae https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/mute.png
close image https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/close.png
poster image data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

이미지 사이즈는 Video Tag 영역의 크기 맞추어 자동으로 조정됩니다.

광고 페이지 구성

소스코드

<head>
    <script type="text/javascript" src="https://advimg.ad-mapps.com/sdk/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://advimg.ad-mapps.com/sdk/js/ver/200/ad_movie_script.js"></script>
</head>

<body>
	<div id="movie_overlay"></div>

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

	<script type="text/javascript" charset="utf-8">
		function adStart() {
			var mezzo_movie = new MezzoVideoAD();

			// injection
			var targetId = 'movie_injection';

			// overlay
			//var targetId	= "movie_overlay";

			// screen mode : INJECTION, OVERLAY
			// target id : DOM element id
			// resolution : 1024, 800, 480
			mezzo_movie.setView('INJECTION', targetId, 1024, {
				close_btn: {
					show: false,
					images: ['https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/close.png'],
				},
				auto_play: true,
				auto_replay: false,
				click_full_area: false,
				muted: false,
				viewability: true,
				sound_btn: {
					show: true,
					images: [
						'https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/on.png',
						'https://advimg.ad-mapps.com/sdk/M_PLUS/Image/script/movie/mute.png',
					],
				},
				click_btn: {
					show: true,
				},
				post_click: '2',
				skip_btn: {
					show: true,
				},
			});

			// injection
			mezzo_movie.setArea(false);

			// overlay
			//mezzo_movie.setArea(true, 100);

			var codes = {
				adid: '',
				mPublisher: '100',
				mMedia: '200',
				mSection: '802998',
				uAgeLevel: '1', // 0: 만 13세 미만, 1: 만 13세 이상, -1: 알수없음
				keyword: '', // encodeURIComponent(키워드1^키워드2^키워드3)
			};

			mezzo_movie.request(codes, {
				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)
					);
				},
			});
		}

		adStart();
	</script>
</body>

화면 구성

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

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

Callback 정의

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 skip 200 SKIP 버튼 클릭  
event start 200 영상 시작  
event imp 200 영상 노출  
event firstQ 200 영상 1/4 재생  
event midQ 200 영상 2/4 재생  
event thirdQ 200 영상 3/4 재생  
event complete 200 영상 종료  
event objhide 200 INJECTION 방식일 때, 매체 video tag 숨김  
event objshow 200 INJECTION 방식일 때, 매체 video tag 보여줌  
event ended 200 광고 종료 ( 광고 후 원본 영상 재생 등 추가 작업시 해당 type 을 이용하여 처리 ) 신규 추가
event endcard_start 200 엔드카드 시작 신규 추가
event endcard_imp 200 엔드카드 노출 신규 추가
event endcard_click 200 엔드카드 클릭 신규 추가
event endcard_close 200 엔드카드 닫기 버튼 클릭 신규 추가

중요 업데이트 사항

200 버전에서 광고 종료이벤트가 ended 이벤트로 통합되었습니다.
과거 버전의 스크립트 SDK 연동시 complete, close 등으로 광고 후처리를 진행하셨다면 ended 이벤트로 변경하셔야 합니다.

110, 111 버전

mezzo_movie.request(codes, {
    success: function (type, status, data) {
        
    },
    fail: function (type, status, data) {
        
    },
    event: function (type, status, data) {
        if(type == "skip" || type == "close" || type == "complete"){
            // 매체 로직
        }
    },
});

200 버전

mezzo_movie.request(codes, {
    success: function (type, status, data) {
        
    },
    fail: function (type, status, data) {
        
    },
    event: function (type, status, data) {
        if(type == "ended"){
            // 매체 로직
        }
    },
});

정책

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

  • Autoplay Policy

    • Google Chrome 또는 Safari(version 11 이상)의 경우, User의 Action이 없는 자동 재생(Autoplay)을 제한하고 있습니다.
    • Mute를 설정하시지 않고, 자동 재생(Autoplay)을 하실 경우, 아래의 브라우져 정책에 따라 광고 영상을 재생하지 못하는 경우가 발생할 수 있습니다.
    • 이때, SIGNAL PLAY 스크립트에서는 사운드를 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 이하)에서 일부 기능이 동작하지 않을 수 있습니다.

샘플 페이지 이동

문의

구분 부서 이름 이메일 전화번호
제휴 문의     모바일 사업팀 곽대정 차장 daejeong.kwak@cj.net 02-6484-3973
ID발급 및 광고 세팅 문의          모바일 사업팀 장준혁 과장 junhyeok.jang@cj.net 02-6484-3415

업데이트: