준비물
랜딩 페이지 코드
액션 완료(회원가입 완료, 이벤트 참여 완료 등)페이지 코드
Step1️⃣ 초기화 스크립트 삽입 - 랜딩 페이지 코드 <head> 에 삽입
랜딩 페이지 코드 <head>
에 다음 코드를 삽입해주세요. 리다이렉트 되는 페이지가 아닌, 버즈빌 측에 전달해주실 랜딩URL의 페이지 코드에 넣어주세요.
Info |
---|
스크립트 전체를 그대로 사용해 주세요. |
Code Block |
---|
|
<!-- Buzzvil Script : 연동 완료 후 삭제 및 이동 불가 -->
<script>
if (/bz_tracking_id/.test(location.search)) { localStorage.BuzzAd = location.search }
</script>
<!-- Buzzvil Script End --> |
Step2️⃣ 액션 달성 스크립트 삽입 - 액션 달성시 코드에 삽입
액션 완료 페이지의 액션 달성시 코드에 다음 코드 전체를 그대로 삽입해 주세요.
[연동 완료] 메시지는 연동 테스트 페이지에서만 노출되며, 실 광고 지면에서는 노출되지 않음을 참고 부탁드립니다.
Code Block |
---|
|
<!-- Buzzvil Complete 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 브라우저 권장)
Note |
---|
버즈빌은 유저가 캠페인 클릭시 전달되는 bz_tracking_id 를 제외한, 어떠한 고객 정보도 수집하지 않습니다. |
Expand |
---|
|
링크를 우클릭하여 복사합니다. (사진: Chrome browser의 예시) Image Removed 북마크 관리자를 열어 링크를 북마크로 추가합니다. Image RemovedImage RemovedImage Removed
|
Expand |
---|
title | [테스트]모바일 환경에서 URL이 변경되지 않는지 확인 필요 |
---|
|
1. 크롬 개발자 도구(Mac: option+cmd+i / Window: F12) 2. Toggle Device Tool bar(Mac: cmd+shift+M / Windows: Ctrl+shift+M) Image Removed3. 상단의 Emulated Devices 옵션에서 Galaxy S5 선택 Image Removed4. 새로고침 후 주소창에서 모바일 url 확인 URL이 서로 다를 경우, 자세한 사항은 Step1 FAQ 를 참조하세요. |
👏 Step3️⃣ 의 테스트를 완료하셨다면, 연동이 정상 완료되셨습니다👏
테스트를 완료하셨다면 광고 담당자에게 연동이 완료됨을 말씀해주세요.
FAQ
...
title | 위의 코드와 bz_tracking_id는 무엇을 위한 것인가요? |
---|
...
Abstract: Javascript 연동이란?
Info |
---|
광고주 웹사이트 상 주요 페이지에 버즈빌에서 제공하는 스크립트를 삽입하여 간단히 연동 하는 방식입니다. |
...
Javascript 연동에서 주요 페이지는 다음 2가지 입니다.
랜딩 페이지
: 사용자가 광고 클릭 후 처음 도착하는 페이지
전환 페이지
: 사용자가 광고주가 기대하는 전환 행위(ex. 회원가입)을 완료하고 처음 도착하는 페이지
Javascript 연동을 위해서는 다음 2가지 스크립트를 적절한 위치에 삽입해야 합니다.
초기화 스크립트
: 랜딩 페이지
에 삽입되는 스크립트로 bz_tracking_id 값을 저장
전환 스크립트
: 전환 페이지
에 삽입되는 스크립트로 버즈빌로 전환 포스트백을 전송
Expand |
---|
|
Include Page |
---|
| [용어집] bz_tracking_id (비즈 트래킹 아이디) |
---|
| [용어집] bz_tracking_id (비즈 트래킹 아이디) |
---|
|
|
Expand |
---|
|
BuzzAd 의 인벤토리(=광고 지면)를 통해 들어온 유저가 광고주의 웹 페이지에서 특정 동작을 수행했는지 여부를 트래킹하는 상품입니다. 광고 참여 및 포인트 지급 Flow Drawio |
---|
contentId | 406749212 |
---|
zoom | 1 |
---|
simple | 0 |
---|
pageId | 405012616 |
---|
lbox | 1 |
---|
diagramDisplayName | BuzzAd_cpa_web_flow.drawio |
---|
contentVer | 2 |
---|
revision | 2 |
---|
baseUrl | https://buzzvil.atlassian.net/wiki |
---|
diagramName | BuzzAd_cpa_web_flow.drawio |
---|
width | 441 |
---|
links | |
---|
tbstyle | |
---|
height | 423.5 |
---|
|
[광고 클릭] 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 연동 방법
Info |
---|
웹 호스팅사를 이용하는 경우 아래 전용 가이드를 참고해주세요. |
Expand |
---|
title | 랜딩 URL과 액션 완료 페이지 URL의 도메인이 달라요. 혹은, 랜딩 URL과 액션 완료 페이지 URL http/https가 동일하지 않아요 |
---|
|
이 경우 Javascript 연동이 아닌, 다음의 방법중 하나로 진행하셔야 합니다. Server to Server 연동 진행 랜딩 URL에 붙여지는 bz_tracking_id가 액션 완료 페이지 URL에 전달될 수 있도록, 광고주 측에서 자체 개발
|
Expand |
---|
|
일정 액션이 끝나는 지점이 포함된 페이지 이며, 사용자가 회원가입을 완료하는 페이지, 설정한 이벤트 신청을 완료하는 페이지 등이 될 수 있습니다. 만약 액션 완료 페이지가 광고주 도메인이 아닌 경우(광고주측에서 해당 페이지의 코드를 조작할 수 없는 경우)연동이 힘들 수 있습니다. |
Expand |
---|
title | bz_tracking_id는 어디에 저장되나요? |
---|
|
Step1의 코드는 bz_tracking_id 라는 파라미터가 현재 url의 검색 쿼리 부분에 있다면 이를 localStorage 에 “BuzzAd”라는 이름으로 저장합니다. |
Expand |
---|
title | 액션 달성 후 리다이렉트를 수행하는 경우 |
---|
|
반드시 BuzzAd 서버에 액션 전송이 완료된 후 리다이렉트를 수행하여야 합니다. |
Expand |
---|
title | SNS 간편 회원가입을 액션 완료 기준으로 삼아도 연동이 가능한가요? |
---|
|
가능합니다. 다만, 일반 회원가입 완료 페이지와 소셜 간편 가입 완료 페이지가 다른 경우, 두 군데 모두 액션 완료 스크립트를 삽입해주셔야 하며, 이후 일반 회원가입과 소셜 간편 회원가입에 대한 테스트를 각각 모두 진행해주세요. 소셜 간편 가입을 위해 사용자가 잠시 다른 브라우저로 이동되는 것은 문제가 안될 수 있지만, 다른 브라우저로 이동된 후 사용자가 액션 완료 페이지로 돌아오지 않는 경우(광고주 도메인으로 돌아오지 않는 경우)는 연동이 힘들 수 있습니다. 또한, 액션 후 돌아온 페이지(액션 완료 페이지 등)가 랜딩 URL의 도메인과 상이하거나, 다른 프로토콜을 사용하는 경우 Server to Server 연동을 진행하셔야 합니다.
|
Expand |
---|
title | [테스트] 초기화 스크립트를 넣었고, 스크린트가 실행되는 것까지 확인했는데 테스트시 'Step1 연동 실패하였습니다'가 떠요 |
---|
|
코드 작업을 진행하신 페이지의 URL이 광고용으로 전달하신 URL과 동일한지 다시 확인해 주세요. 광고용으로 전달 받은 랜딩 페이지에서 곧바로 리다이렉트가 일어날 경우 의도치 않게 전달받은 URL이 아닌 다른 페이지에서 코드 작업을 진행하실 가능성이 있습니다. bz_tracking_id 는 첫 랜딩 페이지에만 붙어서 전달되기 때문에 주어진 스크립트 코드는 반드시 랜딩 페이지에서 실행되어야 하며, 그렇지 않을 경우 트래킹 아이디 자체가 아예 생성되지 않은 것 처럼 보여서 연동이 실패하였다고 뜰 수 있습니다.
만일 첫 랜딩 페이지와 작업하신 페이지가 다를 경우, 처음에 전달받은 URL 페이지에서 다시 코드 작업을 하시거나 광고에 등록될 URL을 변경하도록 버즈빌 광고 담당자에게 알려주세요.
|
...
title | [테스트] Step2 코드에서 alert를 보내도록 되어 있는데, 유저들에게는 이 alert를 보여주고 싶지 않습니다. |
---|
...
Child pages (Children Display) |
---|
STEP 1. 준비
- 광고주 웹사이트 상
랜딩 페이지
와 전환 페이지
의 소스코드를 편집할 수 있게 준비해주세요 - 광고주 웹사이트 상
랜딩 페이지
와 전환 페이지
의 URL 도메인 주소가 동일한지 확인해주세요.
(http, https 를 포함해서 도메인 주소가 다르다면 Server to Server 연동으로 진행해주세요.)
STEP 2. 초기화 스크립트 삽입
Note |
---|
버즈빌 연동 ID는 정수형으로 삽입해주세요 따옴표를 붙이는 경우 문자형으로 인식되어 오류가 발생합니다. 반드시 정수 형태 그대로 붙여넣어 주세요! 전환 행위 완료시 도착할 수 있는 페이지가 여러개인 경우 모든 페이지에 초기화 스크립트를 삽입해주세요 만약 전환 페이지가 1개 이상이라면 (ex. 일반 회원가입 → A 페이지 도착 & SNS 회원가입 → B 페이지 도착), 모든 전환 페이지에 초기화 스크립트를 삽입해 주세요. |
- 아래 스크립트 상
bzq("init", 버즈빌 연동 ID);
안에 버즈빌 연동 ID
를 온보딩시트 상 값으로 수정해주세요 -
랜딩 페이지
소스코드 상 <head> 태그 사이에 수정된 스크립트를 삽입해주세요. -
전환 페이지
소스코드에도 <head> 태그 사이에 수정된 스크립트를 삽입해주세요.
Code Block |
---|
|
<!-- 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 --> |
Expand |
---|
title | Async 문법을 사용할 수 없는 경우 |
---|
|
script 삽입 코드에서 async 문법을 사용할 수 없는 경우에는 아래의 방식을 사용합니다. buzzvil-pixel.js 파일의 호출이 완료되지 않은 상태에서 bzq 함수를 호출하면 이벤트 추적이 비정상적으로 동작할 수 있습니다. Code Block |
---|
| <!-- 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. 전환 스크립트 삽입
Note |
---|
새로 고침 함수(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) 리다이렉트가 필요하지 않은 경우
Code Block |
---|
|
<!-- Buzzvil Complete Code : 연동 완료 후 삭제 및 이동 불가 -->
<script>window.bzq("track", { action: "bz_action_complete"});</script> |
b) 리다이렉트가 필요한 경우
Code Block |
---|
|
<!-- Buzzvil Complete Code : 연동 완료 후 삭제 및 이동 불가 -->
<script>window.bzq("track", { action: "bz_action_complete", redirect_url: "필요시 여기서 리다이렉트 URL 값을 넣어주세요"});</script> |
STEP 4. 연동 테스트 진행
테스트 도구를 사용해 연동 테스트를 진행해주세요.
...
FAQ
Expand |
---|
title | 광고를 클릭하지 않은 사용자도 과금되나요? |
---|
|
Include Page |
---|
| [광고주 QnA] 광고를 클릭하지 않은 사용자도 과금되나요? |
---|
| [광고주 QnA] 광고를 클릭하지 않은 사용자도 과금되나요? |
---|
|
|
Expand |
---|
title | 기존에 전달 받았던 연동 방식과 달라진 거 같습니다. |
---|
|
네, 맞습니다. 버즈빌 연동 ID 가 필수적으로 포함되도록 변경되었습니다. 버즈빌 연동 ID 기준으로 연동 상황을 빠르게 체크하고 개선할 수 있게 여러 도구들을 제공 예정입니다. 기존 연동방식을 사용중이시라면 가급적 버즈빌 연동 ID 방식으로 전환 부탁드립니다. (기존 연동문서) |
Info |
---|
연동 과정에서 기술적인 문제가 발생하는 경우 기술 지원팀으로 문의주시기 바랍니다. 버즈빌 기술지원팀이메일: csm@buzzvil.com |