/* * COPYRIGHT (c) Enliple 2019 * This software is the proprietary of Enliple * * @author sghwang * @since 2020-06-03 */ /** * 광고 html에서 실행될 모듈 * @param inventoryCode - 지면 코드 * @param platform - 플랫폼 타입 * @constructor */ var Mbris = function (inventoryCode, platform, height, multiBannerUseYn) { 'use strict'; var _inventoryCode, _platform, _height; var PLATFORM = { web: 'web', mobile: 'mobile' }; var INVENTORY_CODE = { main: 'main', detail: 'detail', bounce: 'bounce', mcover: 'mcover', naverq: 'naverq', detail_ar: 'detail_ar', bacon: 'bacon', shop_lens: 'shop_lens', detail_ai: 'detail_ai', rt_rcmd: 'rt_rcmd', taste: 'taste', ai_search: 'ai_search', notypop: 'notypop' }; var DISPLAY_SELECTOR = { bacon: { mobile: 'div#mbSiteWrap.mobile_bacon' /* class 명 수정할 것. */ }, mcover: { mobile: 'div#mbSiteWrap.mobile_full' }, bounce: { web: 'div#mbSiteWrap.pc_pop_pre', mobile: 'div#mbSiteWrap.mobile_pop_pre' }, detail: { web: 'div#mbSiteWrap.pc_detail', mobile: 'div#mbSiteWrap.mobile_detail' }, main: { web: 'div#mbSiteWrap.pc_pop_recom', mobile: 'div#mbSiteWrap.mobile_main' }, naverq: { mobile: 'div#mbSiteWrap.mobile_naverq' }, detail_ar: { web: 'div#mbSiteWrap.pc_detail', mobile: 'div#mbSiteWrap.mobile_detail' }, shop_lens: { web: 'div#mbSiteWrap.type_shopping', mobile: 'div#mbSiteWrap.type_shopping' }, detail_ai: { web: 'div#mbSiteWrap.pc_detail', mobile: 'div#mbSiteWrap.mobile_detail' }, rt_rcmd: { web: 'div#mbSiteWrap.pc_real_time', mobile: 'div#mbSiteWrap.mobile_real_time' }, taste: { web: 'div#mbSiteWrap.pc_real_time, div#mbSiteWrap.pc_detail', mobile: 'div#mbSiteWrap.mobile_real_time, div#mbSiteWrap.mobile_detail' }, ai_search: { web: 'div#mbSiteWrap.pc_ai_search', mobile: 'div#mbSiteWrap.mobile_ai_search' }, notypop: { web: 'div#mbSiteWrap.pc_notypop', mobile: 'div#mbSiteWrap.mobile_notypop' } }; var EVENT_TARGET_SELECTOR = { closeButton: 'a.mb_btn_close, .mb_btn_close', hidingForDayCheckbox: 'div.mb_popday>input[type=checkbox]#ck, .btn_today, .mb_btn_day_close, .mb_btn_day', naverView: '.nv-openmain', naverClick: '#clickApi', shop_lens_click: '.mb_prd_lens', mb_title: '.mb_title', mb_more_btn: '.mb_more_btn' }; var FREQUENCY_STRATEGIES = { wholeDay: 0, session: 1, quarterDay: 2, oneMonth: 3, selViewDay: 4, selClickDay: 5 }; var RT_RCMD_TYPE = { closeButton: 0, moreButton: 1 } /** * 지면에 따른 프리퀀시 키 값 생성 * @return {string|undefined} - 키 (무효한 지면인 경우 undefined) */ var createFrequencyKey = function () { switch (_inventoryCode) { case INVENTORY_CODE.main: return 'mbris_main_frequency'; case INVENTORY_CODE.detail_ar: case INVENTORY_CODE.detail: return 'mbris_detail_frequency'; case INVENTORY_CODE.bounce: return 'mbris_bounce_frequency'; case INVENTORY_CODE.mcover: return 'mbris_mcover_frequency'; case INVENTORY_CODE.naverq: return 'mbris_naverq_frequency'; case INVENTORY_CODE.bacon: return 'mbris_bacon_frequency'; case INVENTORY_CODE.rt_rcmd: return 'mbris_rt_rcmd_frequency'; case INVENTORY_CODE.taste: return 'mbris_taste_frequency'; default: return undefined; } }; /** * 광고를 표시하는 element의 사이즈 생성을 위한 키 * @return {string|undefined} */ var createSizeKey = function () { switch (_inventoryCode) { case INVENTORY_CODE.main: return 'mbris_main_size'; case INVENTORY_CODE.detail_ar: return 'mbris_detail_ar_size'; case INVENTORY_CODE.detail: return 'mbris_detail_size'; case INVENTORY_CODE.bounce: return 'mbris_bounce_size'; case INVENTORY_CODE.mcover: return 'mbris_mcover_size'; case INVENTORY_CODE.shop_lens: return 'mbris_shop_lens_size'; case INVENTORY_CODE.detail_ai: return 'mbris_detail_ai_size'; case INVENTORY_CODE.rt_rcmd: return 'mbris_rt_rcmd_size'; case INVENTORY_CODE.taste: return 'mbris_taste_size'; case INVENTORY_CODE.ai_search: return 'mbris_ai_search_size'; case INVENTORY_CODE.notypop: return 'mbris_notypop_size'; default: return undefined; } }; /** * 광고 지면 관련 행동 전달을 위한 키 * @return {string|undefined} */ var createActionKey = function () { switch (_inventoryCode) { case INVENTORY_CODE.main: return 'mbris_main_action'; case INVENTORY_CODE.detail_ar: case INVENTORY_CODE.detail: return 'mbris_detail_action'; case INVENTORY_CODE.bounce: return 'mbris_bounce_action'; case INVENTORY_CODE.mcover: return 'mbris_mcover_action'; case INVENTORY_CODE.naverq: return 'mbris_naverq_action'; case INVENTORY_CODE.bacon: return 'mbris_bacon_action'; case INVENTORY_CODE.shop_lens: return 'mbris_shop_lens_action'; case INVENTORY_CODE.rt_rcmd: return 'mbris_rt_rcmd_action'; case INVENTORY_CODE.taste: return 'mbris_taste_action'; case INVENTORY_CODE.notypop: return 'mbris_notypop_action'; default: return undefined; } }; /* * ABTest 데이터 localStorage 세팅 * */ var setABTest = function(wp_json){ if (typeof wp_json === 'string' && wp_json.length > 0) { var parsedData = JSON.parse(wp_json); var invenNo = parsedData.invenNo; var ENP_AB_NO = 'ENP_AB_' + parsedData.invenNo; if(parsedData[ENP_AB_NO]){ var abTestList = window.parent.localStorage.getItem(ENP_AB_NO) ? window.parent.localStorage.getItem(ENP_AB_NO) : "{}"; var abTestData = JSON.stringify(parsedData[ENP_AB_NO]); if(abTestList != abTestData) { window.parent.localStorage.setItem(ENP_AB_NO,abTestData); } } } } /** * wp_json 정보를 받기 위한 listener (추후 사용 안할 시 제거) * @return {function(): void} */ var wpJsonListener = function(event){ return function(){ var data = {}; switch (_inventoryCode){ case INVENTORY_CODE.detail: data.status = 'detail_dblClick'; break; case INVENTORY_CODE.detail_ar: data.status = 'detail_ar_dblClick'; break; case INVENTORY_CODE.detail_ai: data.status = 'detail_ai_dblClick'; break; case INVENTORY_CODE.rt_rcmd: data.status = 'rt_rcmd_dblClick'; break; } data.wpJson = wp_json; //전달 sendToParent(data); } } /** * 이벤트 정보를 받기 위한 listener * @return {function(): void} */ var eventInfoListener = function(event,rtRcmdTp){ switch (_inventoryCode){ case INVENTORY_CODE.shop_lens: return function(){ if(event.target.checked){ //data 생성 var data = createEventInfoData(wp_json); //전달 sendToParent(data); } } case INVENTORY_CODE.rt_rcmd: return function(){ if(event.target.checked){ var data = {} if(rtRcmdTp === RT_RCMD_TYPE.moreButton){ data.status = 'rtrcmdSuccess'; }else if(rtRcmdTp === RT_RCMD_TYPE.closeButton){ data.status = 'closeBtnClick'; } //전달 sendToParent(data); } } case INVENTORY_CODE.taste: return function(){ if(event.target.checked){ var data = createEventInfoData(wp_json); //전달 sendToParent(data); } } case INVENTORY_CODE.notypop: return function() { if(event.target.checked) { var data = {}; data.status = 'notypopBtnClick'; sendToParent(data) } } default: return function(){ }; } } /** * 지면별 필요 파싱 데이터 생성 * @param dataString */ var createEventInfoData = function(dataString){ if (typeof dataString === 'string' && dataString.length > 0) { var parsedData = JSON.parse(dataString); if (parsedData) { switch (_inventoryCode) { case INVENTORY_CODE.shop_lens: return { key: createActionKey(), status: 'shop_lens_click', frameCode: parsedData.clickFrameCode, action:{ async: true, method: 'GET', url: parsedData.clickUrl } } case INVENTORY_CODE.taste: return { tasteList: parsedData.tasteList ? JSON.stringify(parsedData.tasteList) : [], status: 'tasteClick' } default: return {} } } } return undefined; } /** * 광고 지면에 프리퀀시 적용을 하기 위한 이벤트 리스너 생성하여 반환 * @param event - 이벤트 * @param frequencyStrategy - 프리퀀시 전략 * @return {Function} */ var frequencyListener = function (event, frequencyStrategy) { switch (frequencyStrategy) { case FREQUENCY_STRATEGIES.wholeDay: return function () { if (event.target.checked || event.target.tagName === 'A' || event.target.tagName === 'BUTTON'|| event.target.tagName === 'SPAN') { // 데이터 생성 var data = createData(frequencyStrategy); data.inventoryCode = _inventoryCode; // 노출 중지 data.hide = true; // 전달 sendToParent(data); } }; case FREQUENCY_STRATEGIES.session: return function () { // 데이터 생성 var data = createData(frequencyStrategy); data.inventoryCode = _inventoryCode; // 노출 중지 data.hide = true; // 전달 sendToParent(data); }; case FREQUENCY_STRATEGIES.quarterDay: return function () { // 데이터 생성 var data = createData(frequencyStrategy); data.inventoryCode = _inventoryCode; // 노출 중지 data.hide = true; // 전달 sendToParent(data); }; case FREQUENCY_STRATEGIES.oneMonth: return function () { // 데이터 생성 var data = createData(frequencyStrategy); data.inventoryCode = _inventoryCode; // 노출 중지 data.hide = true; // 전달 sendToParent(data); }; case FREQUENCY_STRATEGIES.selViewDay: return function () { // 데이터 생성 if (event.target.checked){ var data = createData(frequencyStrategy); data.inventoryCode = _inventoryCode; // 노출 중지 data.hide = true; // 전달 sendToParent(data); } }; case FREQUENCY_STRATEGIES.selClickDay: return function () { // 데이터 생성 var data = createData(frequencyStrategy); data.inventoryCode = _inventoryCode; // 노출 중지 data.hide = true; // 전달 sendToParent(data); }; default: return function () { }; } }; /** * 광고에 적용할 이벤트 리스너 등록 */ var addEventListeners = function () { var displayElement = document.querySelector(DISPLAY_SELECTOR[_inventoryCode][_platform]); var bindEvent = function (target, type, listener) { if (target && target.addEventListener) { target.addEventListener(type, listener); } else if (target && target.attachEvent) { target.attachEvent('on' + type, listener); } }; switch (_inventoryCode) { case INVENTORY_CODE.main: bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.closeButton), 'click', function (event) { frequencyListener(event, FREQUENCY_STRATEGIES.session)(); }); bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.hidingForDayCheckbox), 'click', function (event) { frequencyListener(event, FREQUENCY_STRATEGIES.wholeDay)(); }); break; case INVENTORY_CODE.bounce: bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.closeButton), 'click', function (event) { frequencyListener(event, FREQUENCY_STRATEGIES.session)(); }); bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.hidingForDayCheckbox), 'click', function (event) { frequencyListener(event, FREQUENCY_STRATEGIES.wholeDay)(); }); break; case INVENTORY_CODE.detail: case INVENTORY_CODE.detail_ar: case INVENTORY_CODE.detail_ai: bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.mb_title), 'dblclick', function (event) { wpJsonListener(event)(); }); break; case INVENTORY_CODE.mcover: bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.closeButton), 'click', function (event) { window.close(); }); break; case INVENTORY_CODE.bacon: bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.naverView), 'click', function (event) { // 날짜를 받아와서 프리퀀시 지정필요함.(노출은 미설치시) event.target.checked = true; frequencyListener(event, FREQUENCY_STRATEGIES.selViewDay)(); }); bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.naverClick), 'click', function (event) { // 날짜를 받아와서 프리퀀시 지정필요함. (클릭은 설치시) frequencyListener(event, FREQUENCY_STRATEGIES.selClickDay)(); }); break; case INVENTORY_CODE.naverq: bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.naverView), 'click', function (event) { event.target.checked = true; frequencyListener(event, FREQUENCY_STRATEGIES.wholeDay)(); }); bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.naverClick), 'click', function (event) { frequencyListener(event, FREQUENCY_STRATEGIES.oneMonth)(); }); break; case INVENTORY_CODE.shop_lens: bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.shop_lens_click), 'click', function(event) { event.target.checked = true; eventInfoListener(event)(); }); case INVENTORY_CODE.rt_rcmd: bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.hidingForDayCheckbox), 'click', function (event) { event.target.checked = true; frequencyListener(event, FREQUENCY_STRATEGIES.wholeDay)(); }); bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.closeButton), 'click', function(event) { event.target.checked = true; eventInfoListener(event, RT_RCMD_TYPE.closeButton)(); }); bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.mb_more_btn), 'click', function(event) { event.target.checked = true; eventInfoListener(event, RT_RCMD_TYPE.moreButton)(); }); bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.mb_title), 'dblclick', function (event) { wpJsonListener(event)(); }); case INVENTORY_CODE.taste: bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.closeButton), 'click', function (event) { frequencyListener(event, FREQUENCY_STRATEGIES.session)(); }); bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.hidingForDayCheckbox), 'click', function (event) { frequencyListener(event, FREQUENCY_STRATEGIES.wholeDay)(); }); bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.mb_more_btn), 'click', function (event) { event.target.checked = true; eventInfoListener(event)(); }); case INVENTORY_CODE.notypop: bindEvent(displayElement.querySelector(EVENT_TARGET_SELECTOR.closeButton), 'click', function (event) { event.target.checked = true; eventInfoListener(event) }) break; default: break; } }; /** * 부모 window에 전달할 데이터 생성 (객체) * @param frequencyStrategy - 프리퀀시 전략 * @return {{hide: boolean, data, key: string}} */ var createData = function (frequencyStrategy) { /** * 프리퀀시 추가할 것. */ var key = createFrequencyKey(); var data = {}; var day = createInstallData(wp_json); switch (frequencyStrategy) { case FREQUENCY_STRATEGIES.wholeDay: data.duration = getYYYYMMDD(new Date(Date.now() + 1000 * 60 * 60 * 24)); data.storage = 'localStorage'; break; case FREQUENCY_STRATEGIES.session: data.duration = '1'; data.storage = 'sessionStorage'; break; case FREQUENCY_STRATEGIES.quarterDay: data.duration = getYYYYMMDD(new Date(Date.now() + 1000 * 60 * 60 * 6)); data.storage = 'localStorage'; break; case FREQUENCY_STRATEGIES.oneMonth: data.duration = getYYYYMMDD(new Date(Date.now() + 1000 * 60 * 60 * 24 * 30)); data.storage = 'localStorage'; break; case FREQUENCY_STRATEGIES.selViewDay: let baconCnt =sessionStorage.getItem('mbris_bacon_frequency'); if(baconCnt === String(day.viewCnt)){ data.duration = getYYYYMMDD(new Date(Date.now() + 1000 * 60 * 60 * 24 * day.notInstallFreq)); data.storage = 'localStorage'; } break; case FREQUENCY_STRATEGIES.selClickDay: data.duration = getYYYYMMDD(new Date(Date.now() + 1000 * 60 * 60 * 24 *day.installFreq)); data.storage = 'localStorage'; break; default: break; } return { key: key, data: data, hide: false }; }; var createSizeData = function () { var displayElement = document.querySelector(DISPLAY_SELECTOR[_inventoryCode][_platform]); var stringToInt = function (value) { return !!Number.parseInt ? Number.parseInt(value) : window.parseInt(value); }; var height = 0; switch (_inventoryCode) { case INVENTORY_CODE.detail: case INVENTORY_CODE.detail_ar: case INVENTORY_CODE.detail_ai: case INVENTORY_CODE.rt_rcmd: case INVENTORY_CODE.taste: height = stringToInt(_height); break; default : height = displayElement.offsetHeight; } var marginTop = stringToInt(window.getComputedStyle(displayElement).marginTop.replace(/[\D]/g, '')); var marginBottom = stringToInt(window.getComputedStyle(displayElement).marginBottom.replace(/[\D]/g, '')); return { key: createSizeKey(), data: { inventoryCode: _inventoryCode, height: height + marginTop + marginBottom, width: displayElement.offsetWidth + marginTop + marginBottom, borderRadius: window.getComputedStyle(displayElement).borderRadius, boxShadow: window.getComputedStyle(displayElement).boxShadow, boxSizing: window.getComputedStyle(displayElement).boxSizing, //멀티 배너 구분을 위한 구분값 multiBannerUseYn: multiBannerUseYn, position: createPositionData(wp_json) } }; }; /** * * @param dataString * @return {{action: {async: boolean, method: string, url: *}, key: string}|undefined} */ var createActionData = function (dataString) { if (typeof dataString === 'string' && dataString.length > 0) { var parsedData = JSON.parse(dataString); // if (parsedData && parsedData.callViewUrlYn === 'Y') { if (parsedData) { return { key: createActionKey(), //쇼핑렌즈 클릭한 프레임 코드 frameCode: parsedData.clickFrameCode, action: { async: true, method: 'GET', url: parsedData.viewUrl, clickUrl: parsedData.clickUrl, webViewUrl: parsedData.webViewUrl } }; } } return undefined; }; /** * * @param dataString * @return {{usePosition: string, code: string}} */ var createPositionData = function (dataString) { if (typeof dataString === 'string' && dataString.length > 0) { var parsedData = JSON.parse(dataString); if (parsedData) { return { usePosition: parsedData.frameLocSettingYn ? parsedData.frameLocSettingYn : 'N', code: parsedData.frameLocationCode ? parsedData.frameLocationCode : '', heightVal: parsedData.frameLocationHeight ? parsedData.frameLocationHeight : 0, //상세지면 프레임 width 값을 받아서 처리 하기 위한 변수 frameWidth: parsedData.frameWidth ? parsedData.frameWidth: 0, frameTpCode: parsedData.frameTpCode ? parsedData.frameTpCode : '00', scrollEventUseYn: parsedData.scrollEvent ? parsedData.scrollEvent : 'N', frequencyUseYn: parsedData.frequencyUseYn ? parsedData.frequencyUseYn : 'N', frequencyType: parsedData.frequencyType, frequencyCount: parsedData.frequencyCount ? parsedData.frequencyCount : 0, viewType: parsedData.viewType, campManageNo: parsedData.campManageNo } } } }; /** * * @param dataString * @return {{dateNotInstalled: number, InstallationDate: number, touchCnt: number}} */ var createInstallData = function (dataString) { if (typeof dataString === 'string' && dataString.length > 0) { var parsedData = JSON.parse(dataString); if (parsedData) { return { notInstallFreq: parsedData.notInstallFreq ? parsedData.notInstallFreq : '30', installFreq: parsedData.installFreq ? parsedData.installFreq : '30', viewCnt: parsedData.viewCnt ? parsedData.viewCnt : '' } } } }; /** * 입력한 Date 객체로부터 YYYYMMDD 형식의 문자열을 반환 * @param dateObj * @return {string} */ var getYYYYMMDD = function (dateObj) { var year = dateObj.getFullYear().toString(); var month = padZero(dateObj.getMonth() + 1, 2); var date = padZero(dateObj.getDate(), 2); return year + month + date; }; /** * 입력한 숫자의 왼쪽에 자릿수 만큼 '0'을 넣고 반환 * @param targetNumber - 대상 숫자 * @param digit - 최종 결과의 자릿수 * @param radix - 변환할 진수 * @return {boolean|string} */ var padZero = function (targetNumber, digit, radix) { var numToString = typeof targetNumber === 'number' && targetNumber.toString(radix && typeof radix === 'number' ? radix : 10); while (numToString.length < digit) { numToString = '0' + numToString; } return numToString; }; /** * parent window로 데이터 전달. (객체인 경우만) * @param data - 데이터 * @private */ var sendToParent = function (data) { try { if (data && typeof data === 'object') { window.parent.postMessage(data, window.location.origin); } } catch (e) { console.error(e); } }; /** * 초기화 */ (function initialize() { _inventoryCode = INVENTORY_CODE[inventoryCode]; _platform = PLATFORM[platform]; _height = height; /* 크기 및 테두리 style 전송 */ document.addEventListener('readystatechange', function () { if (document.readyState === 'complete') { sendToParent(createSizeData()); } }); /* 지면 노출 후 행동 */ sendToParent(createActionData(wp_json)); /*AB테스트 데이터 세팅*/ setABTest(wp_json); })(); this.setFrequency = function () { addEventListeners(); }; };