Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

준비물

  1. 버즈빌 연동 ID : 버즈빌 담당자에게 발급 받아주세요.

  2. 랜딩 페이지 코드

  3. 액션 완료(회원가입 완료, 이벤트 참여 완료 등)페이지 코드

 

...

...

iFrame을 활용한 페이지에 액션완료 스크립트 삽입이 필요하시다면, 이 가이드 문서로 연동해 주세요.

Step1️⃣ 초기화 스크립트 삽입 - 랜딩 페이지 코드 <head> 에 삽입

랜딩 페이지 코드 <head>에 다음 코드를 삽입해주세요. 리다이렉트 되는 페이지가 아닌, 버즈빌 측에 전달해주실 랜딩URL의 페이지 코드에 넣어주세요.

버즈빌 연동 ID는 버즈빌 담당자분이 전달해 드립니다.

Info

스크립트 전체를 그대로 사용해 주세요.

Code Block
languagejs
<!-- Buzzvil PixelScript Code : 연동 완료 후 삭제 및 이동 불가 -->
<script<script>
async src="https://buzz-js.buzzvil.com/buzzvil-pixel-sdk/buzzvil-pixel.js"></script>
<script>
window.bzDataLayer = [];
function bzq() {window.bzDataLayer.push(arguments);}
bzq("init", 버즈빌 연동 ID);
	if (/bz_tracking_id/.test(location.search)) { localStorage.BuzzAd = location.search }
</script>
<!-- Buzzvil Pixel CodeScript End -->

  

  

 

Step2️⃣ 액션 달성 스크립트 삽입 - 액션 달성시 코드에 삽입

액션 완료 페이지의 액션 달성시 코드에 다음 코드를 코드 전체를 그대로 삽입해 주세요.
리다이렉트가 필요하지 않은 경우[연동 완료] 메시지는 연동 테스트 페이지에서만 노출되며, 실 광고 지면에서는 노출되지 않음을 참고 부탁드립니다.

Code Block
languagejs
<!-- Buzzvil Complete CodeScript : 연동 완료 후 삭제 및 이동 불가 -->
<script>window.bzq("track", { action: "bz_action_complete"})</script>;

리다이렉트가 필요한 경우

Code Block
languagejs
<!-- Buzzvil Complete Code : 연동 완료 후 삭제 및 이동 불가 -->
<script>window.bzq("track", { action: "bz_action_complete", redirect_url: "필요시 여기서 리다이렉트 URL 값을 넣어주세요"})</script>;
Info

두번째 인자인 object안의 action, redirect_url의 type은 string입니다.
redirect_url은 optional한 파라미터입니다.

Note

초기화 스크립트를 심으신 페이지와 액션 달성 스크립트를 심으시자고 하는 페이지가 상이한 경우

다음 초기화 스크립트를 액션 달성 스크립트를 심으신 페이지 Head에 추가 삽입해주세요.

Code Block
languagejs
<!-- Buzzvil Pixel Code : 연동 완료 후 삭제 및 이동 불가 -->
<script async src="https://buzz-js.buzzvil.com/buzzvil-pixel-sdk/buzzvil-pixel.js"></script>
<script>
window.bzDataLayer = [];
function bzq() {window.bzDataLayer.push(arguments);}
bzq("init", 버즈빌 연동 ID);
</script>

 

 

<script>
  (function (img) { img.onload = function () {
    	var length = localStorage.BuzzAd.length;
        if(localStorage.BuzzAd.indexOf('10023_71ffbffd-ccf1-4edf-9c4c') != -1){
          alert("[연동 완료] 자바스크립트 연동을 완료하셨습니다! 연동이 완료되었음을 버즈빌 광고 담당자에게 알려주세요.");
        };
        //*필요시 여기서 리다이렉트 수행*
  };
  if (localStorage.BuzzAd == null) { localStorage.BuzzAd = ""; }
  img.src = "//track.buzzvil.com/action/pb/cpa/default/pixel.gif" + localStorage.BuzzAd; }) (new Image())
</script> 

bz_tracking_id=10023_71ffbffd-ccf1-4edf-9c4c는 테스트용으로만 사용되며, 캠페인 진행시 유저의 클릭마다 랜덤하게 치환됩니다.

Step3️⃣ 웹 자바스크립트 연동 테스트

다음 링크에서 연동 테스트를 진행해주세요.

Javascript Integration Test Page(Chrome 브라우저 권장)

Info
  • 연동 테스트가 실패했을 경우, 아래 FAQ를 참고합니다.

  • 연동 테스트는 Step1️⃣을 성공한 후에 Step2️⃣를 진행해야 합니다.

Note

버즈빌은 유저가 캠페인 클릭시 전달되는 bz_tracking_id를 제외한, 어떠한 고객 정보도 수집하지 않습니다.

Expand
title[테스트]북마크에 추가하는 법
  1. 링크를 우클릭하여 복사합니다. (사진: Chrome browser의 예시)

    Image RemovedImage Added

     

  2. 북마크 관리자를 열어 링크를 북마크로 추가합니다.

    Image RemovedImage RemovedImage RemovedImage AddedImage AddedImage Added
Expand
title[테스트]모바일 환경에서 URL이 변경되지 않는지 확인 필요
1.
  1. 크롬 개발자 도구(Mac: option+cmd+i / Window: F12)

>
2.
  1. Toggle Device Tool bar(Mac: cmd+shift+M / Windows: Ctrl+shift+M)

>
    3.
    1. 상단의 Emulated Devices 옵션에서

    Galaxy S5 선택

    Image RemovedImage Added
      4.
      1. 새로고침 후 주소창에서 모바일 url 확인

      URL이 서로 다를 경우, 자세한 사항은 Step1 FAQ 를 참조하세요.

👏 Step3️⃣ 의 테스트를 완료하셨다면, 연동이 정상 완료되셨습니다👏

테스트를 완료하셨다면 광고 담당자에게 연동이 완료됨을 말씀해주세요.

FAQ

Expand
title위의 코드가 코드와 bz_tracking_id는 무엇을 위한 것인가요?

BuzzAd 의 인벤토리를 통해 들어온 유저가 광고주의 웹페이지에서 특정 동작을 수행했는지 여부를 트래킹하는 상품입니다.

광고 참여 및 포인트 지급 Flow

Drawio
contentId406749212
zoom1
simple0
pageId405012616
lbox1
diagramDisplayNameBuzzAd_cpa_web_flow.drawio
contentVer2
revision2
baseUrlhttps://buzzvil.atlassian.net/wiki
diagramNameBuzzAd_cpa_web_flow.drawio
width441
links
tbstyle
height423.5
  1. BuzzAd의 인벤토리를 통해서 유저가 광고주의 광고로 랜딩하여 들어올 때, BuzzAd 서버에서는 유저의 액션을 트래킹하기 위한 id인 bz_tracking_id 를 원래의 랜딩 url에 파라미터로 붙여서 전달합니다.

  2. 광고주 페이지에서 유저의 액션이 완료되면, Javascript 연동 코드를 통해 또는 광고주 서버로부터 API 호출을 통해bz_tracking_id 를 전달합니다.

  3. BuzzAd 서버에서는 전달받은 bz_tracking_id 값을 이용해 광고에 참여 완료한 유저 정보를 찾아서 해당 유저에게 포인트를 지급합니다.

...

Expand
titlebz_tracking_id는 어디에 저장되나요?

Step1의 코드는 bz_tracking_id 라는 파라미터가 현재 url의 검색 쿼리 부분에 있다면 이를 localStorage 에 “BuzzAd”라는 이름으로 저장합니다.

Expand
title액션 달성 후 리다이렉트를 수행하는 경우

반드시 BuzzAd 서버에 액션 전송이 완료된 후 리다이렉트를 수행하여야 합니다.

  • 위의 코드 내 주석이 위치한 부분은 액션 전송이 완료되면 호출되는 함수 내부로서 이 부분에서 리다이렉트를 수행하면 안전하게 리다이렉트를 처리할 수 있습니다.

  • 코드의 함수는 BuzzAd를 통해서 광고에 참여하였는지 여부에 상관없이 언제나 호출되므로 별도의 위치에서 리다이렉트를 처리할 필요는 없습니다.

    • 오히려 임의로 별도의 위치에서 리다이렉트를 수행할 경우 BuzzAd 서버로 액션 달성 전송이 아예 오지 않을 수 있으므로 주의해야 합니다.

Expand
titleSNS 간편 회원가입을 액션 완료 기준으로 삼아도 연동이 가능한가요?

가능합니다. 다만, 일반 회원가입 완료 페이지와 소셜 간편 가입 완료 페이지가 다른 경우, 두 군데 모두 액션 완료 스크립트를 삽입해주셔야 하며, 이후 일반 회원가입과 소셜 간편 회원가입에 대한 테스트를 각각 모두 진행해주세요.

  • 소셜 간편 가입을 위해 사용자가 잠시 다른 브라우저로 이동되는 것은 문제가 안될 수 있지만,

  • 다른 브라우저로 이동된 후 사용자가 액션 완료 페이지로 돌아오지 않는 경우(광고주 도메인으로 돌아오지 않는 경우)는 연동이 힘들 수 있습니다. 또한, 액션 후 돌아온 페이지(액션 완료 페이지 등)가 랜딩 URL의 도메인과 상이하거나, 다른 프로토콜을 사용하는 경우 Server to Server 연동을 진행하셔야 합니다.

...