Abstract: Javascript 연동이란?

광고주 웹사이트 상 주요 페이지에 버즈빌에서 제공하는 스크립트를 삽입하여 간단히 연동 하는 방식입니다.

Javascript 연동에서 주요 페이지는 다음 2가지 입니다.

랜딩 페이지: 사용자가 광고 클릭 후 처음 도착하는 페이지
전환 페이지: 사용자가 광고주가 기대하는 전환 행위(ex. 회원가입)을 완료하고 처음 도착하는 페이지

Javascript 연동을 위해서는 다음 2가지 스크립트를 적절한 위치에 삽입해야 합니다.

초기화 스크립트: 랜딩 페이지에 삽입되는 스크립트로 bz_tracking_id 값을 저장
전환 스크립트: 전환 페이지에 삽입되는 스크립트로 버즈빌로 전환 포스트백을 전송

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

광고 참여 및 포인트 지급 Flow

[광고 클릭]
BuzzAd의 인벤토리를 통해서 유저가 광고를 클릭하면, BuzzAd 서버에서는 유저의 액션을 트래킹하기 위한 id(식별자)인 bz_tracking_id 를 랜딩 url의 파라미터로 붙여서 전달합니다.
[초기화 스크립트 실행]
유저는 해당 url을 통해 광고주 웹 사이트 상 랜딩 페이지에 랜딩하고, 동시에 랜딩 페이지에 삽입된 초기화 스크립트가 실행되며 bz_tracking_id 라는 파라미터가 현재 url의 검색 쿼리 부분에 있는 경우 localStorage 에 “BuzzAd”라는 이름으로 저장합니다
[전환 스크립트 실행]
전환 행위(ex. 회원가입)를 완료한 유저는 전환 페이지에 랜딩하고, 동시에 전환 페이지에 삽입된 전환 스크립트가 실행되며 localStroage에 저장되어 있는 bz_tracking_id 를 BuzzAd 서버로 전달합니다.
[포인트 지급]
BuzzAd 서버는 전달받은 bz_tracking_id 값을 이용해 광고에 참여 완료한 유저를 식별하고, 해당 유저에게 포인트를 지급합니다.

Process: Javascript 연동 방법

웹 호스팅사를 이용하는 경우 아래 전용 가이드를 참고해주세요.

STEP 1. 준비

광고주 웹사이트 상 랜딩 페이지와 전환 페이지의 소스코드를 편집할 수 있게 준비해주세요

광고주 웹사이트 상 랜딩 페이지와 전환 페이지의 URL 도메인 주소가 동일한지 확인해주세요.
(http, https 를 포함해서 도메인 주소가 다르다면 Server to Server 연동으로 진행해주세요.)

STEP 2. 초기화 스크립트 삽입

버즈빌 연동 ID는 정수형으로 삽입해주세요
따옴표를 붙이는 경우 문자형으로 인식되어 오류가 발생합니다. 반드시 정수 형태 그대로 붙여넣어 주세요!

전환 행위 완료시 도착할 수 있는 페이지가 여러개인 경우 모든 페이지에 초기화 스크립트를 삽입해주세요
만약 전환 페이지가 1개 이상이라면 (ex. 일반 회원가입 → A 페이지 도착 & SNS 회원가입 → B 페이지 도착), 모든 전환 페이지에 초기화 스크립트를 삽입해 주세요.

아래 스크립트 상 bzq("init", 버즈빌 연동 ID); 안에 버즈빌 연동 ID 를 온보딩시트 상 값으로 수정해주세요

랜딩 페이지 소스코드 상 <head> 태그 사이에 수정된 스크립트를 삽입해주세요.

주의! 전환 페이지 소스코드에도 <head> 태그 사이에 수정된 스크립트를 삽입해주세요.

<!-- 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>
<!-- Buzzvil Pixel Code End -->

script 삽입 코드에서 async 문법을 사용할 수 없는 경우에는 아래의 방식을 사용합니다. buzzvil-pixel.js 파일의 호출이 완료되지 않은 상태에서 bzq 함수를 호출하면 이벤트 추적이 비정상적으로 동작할 수 있습니다.

<!-- Buzzvil Pixel Code : 연동 완료 후 삭제 및 이동 불가 -->
<script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script');
    script.src = url;
    script.onload = callback;
    document.head.appendChild(script);
  }
  
  loadScript("https://buzz-js.buzzvil.com/buzzvil-pixel-sdk/buzzvil-pixel.js", function() {
    window.bzDataLayer = [];
    function bzq() { window.bzDataLayer.push(arguments); }
    bzq("init", 버즈빌 연동 ID);
  });
</script>
<!-- Buzzvil Pixel Code End -->

STEP 3. 전환 스크립트 삽입

전환 페이지 소스코드 상 <head> 태그 사이에 리다이렉트 필요 여부에 따라 아래 스크립트 중 하나를 삽입해주세요.

전환 스크립트가 올바르게 동작하는지 테스트해주세요. (테스트 하러가기)

a) 리다이렉트가 필요하지 않은 경우

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

b) 리다이렉트가 필요한 경우

STEP 4. 연동 테스트 진행

테스트 도구를 사용해 연동 테스트를 진행해주세요.

FAQ

네, 맞습니다. 버즈빌 연동 ID가 필수적으로 포함되도록 변경되었습니다. 버즈빌 연동 ID 기준으로 연동 상황을 빠르게 체크하고 개선할 수 있게 여러 도구들을 제공 예정입니다. 기존 연동방식을 사용중이시라면 가급적 버즈빌 연동 ID 방식으로 전환 부탁드립니다. (기존 연동문서)

Buzzvil Developer Guides

[광고주] CPE/CPA (Web - Javascript 연동)