BRANDED MINI-GAMES

Branded Mini Games are short mobile web games packed with powerful social features. They are fully customisable to any brand and run well on laptop, tablet, mobile or within an app.

동영상 플레이어블 광고 기본 사항 및 옵션 설정 가이드 (Korean)

Follow

목차

  1. 기본 광고 정보 입력 방법
  2. CTA 링크, 프로젝트 경로 삽입 및 광고 사이즈 설정
  3. 로그 기록을 위한 API 호출 방법
  4. 옵션 설정 방법

 

 

1. 기본 광고 정보 입력 방법 

동영상 플레이어블 광고는 아래 userADInfo 안에 user 에게 필요한 {macro} 정보를 추가, 삽입할 수 있습니다. userADInfo 정보들은 최종 CTA 링크 클릭 시 url{macro} 로 매핑되어 전달됩니다.

 

기본 정보 입력을 위한 adInfo 구조

var userADInfo = {
    ad_code    : "{ad_code}",
    scode      : "{scode}",
    timestamp  : "{timestamp}"
};

 

원본 url

https://demo.html?ad_code={ad_code}&scode={scode}&timestamp={timestamp}

매핑된 url

https://demo.html?ad_code=1234&scode=abcd&timestamp=abcd1234

 

1) TagCode 방식은 userADInfo 안에 유저가 필요한 정보를 직접 삽입할 수 있으며,

2) URL 방식은 parameter에 정보를 삽입하면 userADInfo 에 자동으로 추가 삽입 ,변경이 됩니다.

예를 들어, 입력하는 parameter 가 아래와 같을 경우, Value 가 아래 (After) 와 같이 변경됩니다.

참고로, campaign_no=7777 의 경우, 기존 userADInfo 에 포함되어 있지않고 새로 추가된 parameter 이고, (After) 부분의 마지막에 자동으로 추가됩니다.

 

http://demo.html?ad_code=1234&scode=abcd&timestamp=abcd1234&campaign_no=7777

 

(Before) 

var userADInfo = {
    ad_code    : "{ad_code}",
    scode      : "{scode}",
    timestamp  : "{timestamp}"
};

(After) 

var userADInfo = {
    ad_code    : "1234",
    scode      : "abcd",
    timestamp  : "abcd1234",
campaign_no: "7777" };

 

 

2. CTA 링크, 프로젝트 경로 삽입 및 광고 사이즈 설정

var adInfo = {
    ...
    clicktag            : "https://play.google.com/store/apps/details?id=com.mobirix.gs2016",
    clicktag_Android    : "https://play.google.com/store/apps/details?id=com.mobirix.gs2016",
    clicktag_IOS        : "https://itunes.apple.com/us/app/guardian-soul-legion/id1159202815?mt=8",
    filepath            : "http://cloudfront.net/mbiz/guardiansoul/v1/",
width : 0,
height : 0,
rotate90 : false, ... }
변수명 설명
clicktag (필수입력사항) PC나 기타 다른 플랫폼에서 CTA 버튼 클릭 시 이동하는 URL
clicktag_android (필수입력사항) Android 플랫폼에서 CTA 버튼 클릭 시 이동하는 URL
clicktag_IOS

(필수입력사항) IOS 플랫폼에서 CTA 버튼 클릭 시 이동하는 URL

*clicktag 주소가 android, IOS, PC 구분이 필요 없을 경우 모두 같은 주소를 입력하면 됩니다.

filepath

(필수입력사항) 해당 광고 프로젝트 업로드 주소

*단, URL 방식 광고는 입력하지 않아도 됩니다.

ex) filepath : "",

width, height

광고 화면 사이즈를 특정 사이즈로 고정할 때 사용.

예를 들어 광고 사이즈보다 작게 또는 크게 원하는 사이즈로 광고를 표시하고 싶은 경우 사용.

*자동으로 사이즈를 설정하려면 width, height 값을 0 (auto) 으로 설정.

ex) "width": 400, "height":300

image4.png

rotate90

화면을 강제로 시계방향으로 90도 회전.

세로형 공간에 가로형 게임을 실행하면 아래 이미지처럼 작게 나오기 때문에 게임화면을 강제로 90도 회전시킴.

false: 회전시키지 않음, true: 90도 회전시킴

ex) "rotate90": false

image5.png

ex) "rotate90": true

image9.png

 

 

3. 로그 기록을 위한 API 호출 방법

var GAME = { 
    START: function (){
        console.log("GAME start!!");
    },
    FINISH: function (){
        console.log("GAME finish!!");
          
        ///////////////////////////////////////////////////
        // API Call
        //ex)CallAPI(url_parameter, GET or POST ,  function(res){});
        ///////////////////////////////////////////////////
        //CallAPI('https://..getData.php?param1=1&param2=abc', 'GET',  function(res){console.log(res);});
        ///////////////////////////////////////////////////
    },
        
    CONTINUE: function(){
        console.log("GAME continue!!");
    }
};
메소드명 설명
START 게임이 시작되면 해당 메소드를 호출합니다.
FINISH 게임이 종료되면 해당 메소드를 호출합니다.
CONTINUE CTA 버튼을 클릭하면 해당 메소드를 호출합니다.

*게임에 대한 정보(게임시작, 게임종료, CTA 버튼 클릭)를 수집하려면 이곳에서 API를 쉽게 호출 할 수 있습니다.

기본으로 제공하는 API 호출 메소드(CallAPI function)를 사용하여 정보를 수집할 수 있습니다.

ex) API 주소 + 수집하려는 데이터

https://..getData.php?param1=1&param2=abc
CallAPI(url_parameter, GET or POST ,  function(res){});

 

 

4. 옵션 설정 방법

1) 동영상 플레이어블 광고 옵션 설정 - TagCode 방식

adInfo.mbizSetting = {
    "country": "",
    "mbizloading":"off",
    "XButtonTime": 5,
    "x-button-time": 5,
    "XButtonCountDown": "off",
    "x-button-location": "top-right",
    "TouchGuide": "on"
};   
변수명 설명
XButtonTime 닫기 버튼 이미지가 보여지기까지 남은 시간을 표시하는 시간. (1~999)
x-button-time

닫기 버튼 이미지가 보여지기까지 시간. (1~999)

*(XButtonTime과 x-button-time은 값이 동일해야 합니다.)

ex)

XButtonTime = 7

x-button-time = 7

image4.png

XButtonCountDown

 닫기 버튼이 보여지기까지 남은시간을 켜기 끄기. (on / off)

ex)

XButtonCountDown = "on"

image4.png

XButtonCountDown = "off"

image1.png

x-button-location

닫기 버튼의 위치를 설정. (top-left / top-right)

ex)

x-button-location = "top-left"

image6.png

x-button-location = "top-right"

image5.png

TouchGuide

터치 및 드래그 가이드 라인 켜고 끄기. (on / off)

ex) TouchGuide = "on"

image2.png

  

 

2) 동영상 플레이어블 광고 옵션 설정 - URL 방식 

URL 방식의 동영상 플레이어블 광고에서도 옵션을 설정할 수 있도록 총 4개의 매개변수를 제공하고 있습니다. (xtime / xcountonoff / xlocation / tguideonoff / width / height / rotate90)

 

http://play.video.ad/index_dev.html?
    xtime=10&
    xcountonoff=on&
    xlocation=top-left&
    tguideonoff=off&
width=400&
height=300&
rotate90=1

 

변수명 설명
xtime

닫기 버튼 이미지가 보여지기까지 남은 시간을 표시하는 시간 & 닫기 버튼 이미지가 보여지기까지 시간. (1~999)

ex) xtime=7

image4.png

xcountonoff

닫기 버튼이 보여지기까지 남은시간을 켜기 끄기. (on / off)

ex)

xcountonoff=on

image4.png

xcountonoff=off

image1.png

xlocation

닫기 버튼의 위치를 설정. (top-left / top-right)

ex)

xlocation=top-left

image6.png

xlocation=top-right

image5.png

tguideonoff

터치 및 드래그 가이드 라인 켜고 끄기. (on / off)

ex) tguideonoff=on

image2.png

width, height

광고 화면 사이즈를 특정 사이즈로 고정할 때 사용.

예를 들어 광고 사이즈보다 작게 또는 크게 원하는 사이즈로 광고를 표시하고 싶은 경우 사용.

*자동으로 사이즈를 설정하려면 width, height 값을 0 (auto) 으로 설정.

ex) "width": 400, "height":300

image4.png

rotate90

화면을 강제로 시계방향으로 90도 회전.

세로형 공간에 가로형 게임을 실행하면 아래 이미지처럼 작게 나오기 때문에 게임화면을 강제로 90도 회전시킴.

0: 회전시키지 않음, 1: 90도 회전시킴

ex) rotate90 = 0

image5.png

ex) rotate90 = 1

image9.png

 

Comments