RCPC 스크립트 연동 가이드 V2

본 가이드는 iframe web을 활용하여 광고 클릭 시, 리워드 지급을 위한 연동 방식을 기술합니다.

일반 연동

html body 태그 내에 아래의 스크립트를 추가해주세요.

<script>
      const onClickIframe = () => {
        if (document.activeElement.tagName !== 'IFRAME') return;
        // 포커싱된 iframe 내 스크립트가 모두 로드 되었을 때(로딩이 끝날 때) 
        // 콜백함수를 실행할 수 있습니다.  
        if (document.activeElement.dataset.loaded === 'true') {
          const ActiveIframeId = document.activeElement.id;

          // window에서 blur 이벤트 발생 시, 현재 포커스된 요소의 태그를 확인합니다.
          // iframeId을 식별하여 분기된 콜백 함수를 호출할 수 있습니다. 
          if (ActiveIframeId === 'iframe-example1') {
            // iframe-example1 콜백함수 실행
						onClickIframeCb();
          }
					if (ActiveIframeId === 'iframe-example2'){
					  //iframe-example2 콜백함수 실행
						onClickIframeCb();
					}

          window.focus();
        }
      };

      window.addEventListener('blur', onClickIframe);

     // 광고 클릭 후 새로운 탭이 열렸을 때, 
     // focus 가 유실될 경우 다시 window로 포커싱 하는 함수를 바인딩합니다.
.    // 광고가 모두 로드되지 않았는데 새 탭이 열릴 경우에 대한 예외처리를 추가합니다. 

			window.addEventListener('visibilitychange', function () {
			  if (document.activeElement.tagName === 'IFRAME') {
			    const activeIframeId = document.activeElement.id;
			    const selectedIframe = document.getElementById(activeIframeId);
			    if (selectedIframe.dataset.loaded === 'false') {
						if (activeIframeId === 'iframe-example1') {
            //iframe-example1 콜백함수 실행
							onClickIframeCb();
			      }
						if (activeIframeId === 'iframe-example2'){
			  	  //iframe-example2 콜백함수 실행
							onClickIframeCb();
						}
			    }
			  }
			  if (window.document.hidden) {
			    window.focus();
			  }
			});
			func checkRewardCondition(){
				// 리워드 지급 대상 여부 확인 후, 리워드를 지급하세요!
			}
    </script>

광고 로드 후, 클릭 이벤트 발생 시, onClickIframeCb function이 호출됩니다. 해당 function 안에서 리워드 지급 대상 판단 후, 리워드를 지급하는 로직을 구현하시면 됩니다.

iframe tag 를 생성한 후, 개별 광고 영역 식별을 위해 id 를 부여합니다. 이후 내부에 광고 스크립트를 호출합니다.

<script>
      const IFRAME_ID = 'iframe-example1';
      const ifr = document.createElement('iframe');

      ifr.id = IFRAME_ID;
			// 노출될 광고의 크기와 같은 사이즈로 생성해주세요. 
      ifr.width = 300; 
      ifr.height = 300;
      // iframe 내에 스크립트가 로드 되었는지 확인하기위한 data attr 입니다. 
      ifr.dataset.loaded = false;

      document.body.appendChild(ifr);

      const cw = ifr.contentWindow;
      const doc = cw.document || ifr.contentDocument;

      // iframe으로 되어있는 ap 광고 스크립트태그를 포함한 html입니다.
      const html = `<!DOCTYPE>
         <html>
            <head>
                <style>
                    body {
                      margin: 0;
                      padding: 0;
                    }
                    \\x3c/style>
                  \\x3c/head>
                <body>
                  <iframe id="adpopcorn-ads" src="<https://ssp.igaw.io/sdk/html/mediation.html?placementId=tubecash-320-100&uid=>" width="320px" height="100px" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"> \\x3c/iframe>
                  \\x3c/body>
               \\x3c/html>
              `;

      doc.open();
      doc.write(html);
      doc.close();

			// iframe 내 스크립트 로드가 완료되면 loaded 의 값을 true 로 바꿔주고 window 에 포커스를 줍니다.
			ifr.addEventListener('load', () => {
				  ifr.dataset.loaded = true;
				  window.focus();
			});

     
      const onClickIframeExample = () => {
        if (document.activeElement.tagName !== 'IFRAME') return;
        // 포커싱된 iframe 내 스크립트가 모두 로드 되었을 때(로딩이 끝날 때) 콜백함수를 실행할 수 있습니다.  
        if (document.activeElement.dataset.loaded === 'true') {
          const ActiveIframeId = document.activeElement.id;

          // window에서 blur 이벤트 발생 시, 현재 포커스된 요소의 태그를 확인합니다.
          // iframeId을 식별하여 분기된 콜백 함수를 호출할 수 있습니다. 

          if (ActiveIframeId === IFRAME_ID) {
            //IFRAME_ID 콜백함수 실행
          }
          window.focus();
        }
      };

      // eventListenter에는 여러개의 이벤트를 바인딩 할 수 있습니다.
      // 추가적인 콜백함수를 바인딩 할 수 있습니다.
      window.addEventListener('blur', onClickIframeExample);
    </script>