Abstract: Javascript 연동이란?

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

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

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

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

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

bz_tracking_id 란?

bz_tracking_id는 사용자를 식별하기 위해 버즈빌에서 임시 발급하는 식별자입니다. 사용자가 광고를 클릭할 때 신규 발급되어, 사용자가 전환(conversion)할 때까지 추적하는 용도로 사용됩니다.

상세 동작 원리

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. 초기화 스크립트 삽입

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

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

아래 스크립트 상 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 -->

STEP 3. 전환 스크립트 삽입

새로 고침 함수(loacation.reload)를 함께 쓰지 말아주세요!
전환 페이지에 새로고침을 위한 스크립트 (ex. location.reload(), location.href())를 함께 삽입하는 경우 전환 스크립트 올바르게 동작하지 않을 수 있습니다. 이 경우 리다이렉트가 필요한 경우의 스크립트를 사용해주세요. 해당 스크립트의 필요시 여기서 리다이렉트 URL 값을 넣어주세요 부분에 원하는 페이지의 url을 입력해주시면 됩니다.

랜딩 페이지와 전환 페이지가 동일 페이지라면 기술 지원팀에 문의해주세요.
이 경우, 랜딩 시 바로 전환 스크립트가 실행되어 사용자가 전환 행위를 하지 않고도 포인트가 지급될 수 있습니다. 별도 페이지를 개발하거나, 조건에 따라 전환 스크립트가 실행되는 코드 개발이 필요합니다. 조치에 어려움이 있는 경우 기술 지원팀(csm@buzzvil.com)으로 문의해주세요

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

버즈빌 광고를 클릭하지 않은 사용자에 대해 전환 스크립트는 동작하지 않아요!
초기화 스크립트는 버즈빌 광고를 클릭한 사용자(= url query string에 bz_tracking_id 파라미터를 포함하고 랜딩한 사용자)를 대상으로만 동작합니다. 만일 초기화 스크립트가 동작하지 않은 경우, 전환 스크립트가 실행되어도 버즈빌로 포스트백(=전환 요청)을 송신하지 않아요. 결국, 버즈빌 기여로 측정되지도 과금되지도 않으니 스크립트 실행에 별도 조건을 걸지 않으셔도 괜찮습니다.

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

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

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

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

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

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

STEP 4. 연동 테스트 진행

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

FAQ

광고를 클릭하지 않은 사용자도 과금되나요?

당연히 과금되지 않습니다. 버즈빌에서 광고주분들께 과금을 하거나 사용자에게 포인트를 지급하기 위해서는, bz_tracking_id라고 불리는 사용자 임시 식별자가 발급되어야 합니다. 해당 값은 사용자가 광고를 클릭할때 발급되므로, 광고를 클릭하지 않은 사용자는 포인트를 받거나 광고주로 부터 과금을 유도할 수 없으니 안심하셔도 됩니다 :)

기존에 전달 받았던 연동 방식과 달라진 거 같습니다.

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

연동 과정에서 기술적인 문제가 발생하는 경우 기술 지원팀으로 문의주시기 바랍니다.

이메일: csm@buzzvil.com

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