{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"maxLevel":{"value":"3"},"minLevel":{"value":"1"}},"macroMetadata":{"macroId":{"value":"c1aed31af23b02e885476ca2e04fbc33"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"84899386-6b47-46ca-8df1-c11978c63f1a"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"Abstract:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}}]},{"text":" Javascript 연동이란?","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"광고주 웹사이트 상 주요 페이지에 버즈빌에서 제공하는 스크립트를 삽입하여 간단히 연동 하는 방식입니다.","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":454,"id":"a20afa3d-8474-4461-83fe-2e49e06dc55f","collection":"contentId-1950285893","type":"file","height":476}}]},{"type":"paragraph","content":[{"text":"Javascript 연동에서 ","type":"text"},{"text":"주요 페이지","type":"text","marks":[{"type":"strong"}]},{"text":"는 다음 2가지 입니다.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"랜딩 페이지","type":"text","marks":[{"type":"code"}]},{"text":": 사용자가 광고 클릭 후 처음 도착하는 페이지","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"전환 페이지","type":"text","marks":[{"type":"code"}]},{"text":": 사용자가 광고주가 기대하는 전환 행위(ex. 회원가입)을 완료하고 처음 도착하는 페이지","type":"text"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Javascript 연동을 위해서는 ","type":"text"},{"text":"다음 2가지 스크립트를 적절한 위치에 삽입해야 합니다.","type":"text","marks":[{"type":"strong"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"초기화 스크립트","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"랜딩 페이지","type":"text","marks":[{"type":"code"}]},{"text":"에 삽입되는 스크립트로 bz_tracking_id 값을 저장","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"전환 스크립트","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"전환 페이지","type":"text","marks":[{"type":"code"}]},{"text":"에 삽입되는 스크립트로 버즈빌로 전환 포스트백을 전송","type":"text"}]}]}]},{"type":"paragraph"},{"type":"expand","attrs":{"title":"bz_tracking_id 란?"},"content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"include","parameters":{"macroParams":{"":{"value":"[용어집] bz_tracking_id (비즈 트래킹 아이디)"}},"macroMetadata":{"macroId":{"value":"1f67ce5d54c078b12dcb5afc934f0752"},"schemaVersion":{"value":"1"},"title":"Include Page"}},"localId":"be66c651-9ee0-4f0b-8b89-b2b43b08a18b"}}]},{"type":"expand","attrs":{"title":"상세 동작 원리"},"content":[{"type":"paragraph","content":[{"text":"BuzzAd 의 인벤토리(=광고 지면)를 통해 들어온 유저가 광고주의 웹 페이지에서 특정 동작을 수행했는지 여부를 트래킹하는 상품입니다. ","type":"text"}]},{"type":"paragraph","content":[{"text":"광고 참여 및 포인트 지급 Flow","type":"text","marks":[{"type":"strong"}]}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"drawio","parameters":{"macroParams":{"contentId":{"value":"406749212"},"zoom":{"value":"1"},"simple":{"value":"0"},"pageId":{"value":"405012616"},"lbox":{"value":"1"},"diagramDisplayName":{"value":"BuzzAd_cpa_web_flow.drawio"},"contentVer":{"value":"2"},"revision":{"value":"2"},"baseUrl":{"value":"https://buzzvil.atlassian.net/wiki"},"diagramName":{"value":"BuzzAd_cpa_web_flow.drawio"},"width":{"value":"441"},"links":{"value":""},"tbstyle":{"value":""},"height":{"value":"423.5"}},"macroMetadata":{"macroId":{"value":"e212ced2-1a81-4002-8429-f021527a0b74"},"schemaVersion":{"value":"1"},"placeholder":[{"type":"image","data":{"url":"https://ac.draw.io/connectImage?contentId=406749212&zoom=1&simple=0&pageId=405012616&lbox=1&diagramDisplayName=BuzzAd_cpa_web_flow.drawio&contentVer=2&revision=2&baseUrl=https%3A%2F%2Fbuzzvil.atlassian.net%2Fwiki&diagramName=BuzzAd_cpa_web_flow.drawio&width=441&links=&tbstyle=&height=423.5"}}],"title":"draw.io Diagram"}},"localId":"83131fa2-0704-4b14-99af-9f0609b0b8c2"}},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[광고 클릭]","type":"text"},{"type":"hardBreak"},{"text":"BuzzAd의 인벤토리를 통해서 유저가 광고를 클릭하면, ","type":"text"},{"text":"BuzzAd 서버","type":"text","marks":[{"type":"code"}]},{"text":"에서는 유저의 액션을 트래킹하기 위한 id(식별자)인 ","type":"text"},{"text":"bz_tracking_id","type":"text","marks":[{"type":"code"}]},{"text":" 를 랜딩 url의 파라미터로 붙여서 전달합니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[초기화 스크립트 실행]","type":"text"},{"type":"hardBreak"},{"text":"유저는 해당 url을 통해 광고주 웹 사이트 상 랜딩 페이지에 랜딩하고, 동시에 랜딩 페이지에 삽입된 ","type":"text"},{"text":"초기화 스크립트","type":"text","marks":[{"type":"code"}]},{"text":"가 실행되며 ","type":"text"},{"text":"bz_tracking_id","type":"text","marks":[{"type":"code"}]},{"text":" 라는 파라미터가 현재 url의 검색 쿼리 부분에 있는 경우 ","type":"text"},{"text":"localStorage","type":"text","marks":[{"type":"code"}]},{"text":" 에 “BuzzAd”라는 이름으로 저장합니다","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[전환 스크립트 실행]","type":"text"},{"type":"hardBreak"},{"text":"전환 행위(ex. 회원가입)를 완료한 유저는 전환 페이지에 랜딩하고, 동시에 전환 페이지에 삽입된 ","type":"text"},{"text":"전환 스크립트","type":"text","marks":[{"type":"code"}]},{"text":"가 실행되며 ","type":"text"},{"text":"localStroage","type":"text","marks":[{"type":"code"}]},{"text":"에 저장되어 있는 ","type":"text"},{"text":"bz_tracking_id","type":"text","marks":[{"type":"code"}]},{"text":" 를 ","type":"text"},{"text":"BuzzAd 서버","type":"text","marks":[{"type":"code"}]},{"text":"로 전달합니다. ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[포인트 지급]","type":"text"},{"type":"hardBreak"},{"text":"BuzzAd 서버","type":"text","marks":[{"type":"code"}]},{"text":"는 전달받은 ","type":"text"},{"text":"bz_tracking_id","type":"text","marks":[{"type":"code"}]},{"text":" 값을 이용해 광고에 참여 완료한 유저를 식별하고, 해당 유저에게 포인트를 지급합니다.","type":"text"}]}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Process:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}}]},{"text":" Javascript 연동 방법","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"웹 호스팅사를 이용하는 경우 아래 전용 가이드를 참고해주세요.","type":"text"}]}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"children","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"18372407-70be-4c39-87a8-556aacd1d5cc"},"schemaVersion":{"value":"2"},"title":"Child pages (Children Display)"}},"localId":"0fa04918-2b9b-4c03-a13c-a915145b33ca"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"STEP 1. 준비","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}}]}]},{"type":"taskList","attrs":{"localId":""},"content":[{"type":"taskItem","attrs":{"state":"TODO","localId":"1"},"content":[{"text":"광고주 웹사이트 상 ","type":"text"},{"text":"랜딩 페이지","type":"text","marks":[{"type":"code"}]},{"text":"와 ","type":"text"},{"text":"전환 페이지","type":"text","marks":[{"type":"code"}]},{"text":"의 소스코드를 편집할 수 있게 준비해주세요","type":"text"}]},{"type":"taskItem","attrs":{"state":"TODO","localId":"2"},"content":[{"text":"광고주 웹사이트 상 ","type":"text"},{"text":"랜딩 페이지","type":"text","marks":[{"type":"code"}]},{"text":"와 ","type":"text"},{"text":"전환 페이지","type":"text","marks":[{"type":"code"}]},{"text":"의 URL","type":"text"},{"text":" 도메인 주소","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"d05aa304-a172-41e1-8cbe-43a408575a5a"}}]},{"text":"가 동일한지 확인해주세요. ","type":"text"},{"type":"hardBreak"},{"text":"(http, https 를 포함해서 도메인 주소가 다르다면 ","type":"text"},{"text":"Server to Server","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/~920354739/pages/1929052329/CPA+Web+-+Server+to+Server+S2S"}}]},{"text":" 연동으로 진행해주세요.)","type":"text"}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"STEP 2. 초기화 스크립트 삽입","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"버즈빌 연동 ID는 정수형으로 삽입해주세요","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff991f"}},{"type":"strong"}]},{"type":"hardBreak"},{"text":"따옴표를 붙이는 경우 문자형으로 인식되어 오류가 발생합니다. 반드시 정수 형태 그대로 붙여넣어 주세요!","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"전환 행위 완료시 도착할 수 있는 페이지가 여러개인 경우 모든 페이지에 초기화 스크립트를 삽입해주세요","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff991f"}},{"type":"strong"}]},{"type":"hardBreak"},{"text":"만약 전환 페이지가 1개 이상이라면 (ex. 일반 회원가입 → A 페이지 도착 & SNS 회원가입 → B 페이지 도착), 모든 전환 페이지에 초기화 스크립트를 삽입해 주세요.","type":"text"}]}]},{"type":"taskList","attrs":{"localId":""},"content":[{"type":"taskItem","attrs":{"state":"TODO","localId":"3"},"content":[{"text":"아래 스크립트 상 ","type":"text"},{"text":"bzq(\"init\", 버즈빌 연동 ID);","type":"text","marks":[{"type":"code"}]},{"text":" 안에 ","type":"text"},{"text":"버즈빌 연동 ID","type":"text","marks":[{"type":"code"}]},{"text":" 를 온보딩시트 상 값으로 수정해주세요","type":"text"}]},{"type":"taskItem","attrs":{"state":"TODO","localId":"4"},"content":[{"text":"랜딩 페이지","type":"text","marks":[{"type":"code"}]},{"text":" 소스코드 상 태그 사이에 수정된 스크립트를 삽입해주세요.","type":"text"}]},{"type":"taskItem","attrs":{"state":"TODO","localId":"5"},"content":[{"type":"status","attrs":{"color":"red","style":"bold","text":"주의!","localId":"7047ed10-3db8-407c-932e-59f87db29c51"}},{"text":" ","type":"text"},{"text":"전환 페이지","type":"text","marks":[{"type":"code"}]},{"text":" 소스코드에도 태그 사이에 수정된 스크립트를 삽입해주세요.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"\n\n\n","type":"text"}]},{"type":"expand","attrs":{"title":"Async 문법을 사용할 수 없는 경우"},"content":[{"type":"paragraph","content":[{"text":"script 삽입 코드에서 async 문법을 사용할 수 없는 경우에는 아래의 방식을 사용합니다. ","type":"text"},{"text":"buzzvil-pixel.js","type":"text","marks":[{"type":"code"}]},{"text":" 파일의 호출이 완료되지 않은 상태에서 ","type":"text"},{"text":"bzq","type":"text","marks":[{"type":"code"}]},{"text":" 함수를 호출하면 이벤트 추적이 비정상적으로 동작할 수 있습니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"\n\n","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"STEP 3. 전환 스크립트 삽입","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"새로 고침 함수(loacation.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff991f"}},{"type":"strong"}]},{"text":"reload","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"03922cd2-24ad-44fe-a80f-9ba5a18ff1c4"}},{"type":"textColor","attrs":{"color":"#ff991f"}},{"type":"strong"}]},{"text":")를 함께 쓰지 말아주세요!","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff991f"}},{"type":"strong"}]},{"type":"hardBreak"},{"text":"전환 페이지에 새로고침을 위한 스크립트 (ex. location.reload(), location.href())를 함께 삽입하는 경우 전환 스크립트 올바르게 동작하지 않을 수 있습니다. 이 경우 ","type":"text"},{"text":"리다이렉트가 필요한 경우","type":"text","marks":[{"type":"code"}]},{"text":"의 스크립트를 사용해주세요. 해당 스크립트의 ","type":"text"},{"text":"필요시 여기서 리다이렉트 URL 값을 넣어주세요","type":"text","marks":[{"type":"code"}]},{"text":" 부분에 원하는 페이지의 url을 입력해주시면 됩니다.","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"랜딩 페이지와 전환 페이지가 동일 페이지라면 기술 지원팀에 문의해주세요.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff991f"}},{"type":"strong"}]},{"type":"hardBreak"},{"text":"이 경우, 랜딩 시 바로 전환 스크립트가 실행되어 사용자가 전환 행위를 하지 않고도 포인트가 지급될 수 있습니다. 별도 페이지를 개발하거나, 조건에 따라 전환 스크립트가 실행되는 코드 개발이 필요합니다. 직접 예외처리를 하는 것에 어려움이 있는 경우 기술 지원팀(","type":"text"},{"text":"https://9dv5p.channel.io/","type":"text","marks":[{"type":"link","attrs":{"href":"https://9dv5p.channel.io/"}}]},{"text":")으로 문의해주세요","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"전환 행위 완료시 도착할 수 있는 페이지가 여러개인 경우 모든 페이지에 전환 스크립트를 삽입해주세요","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff991f"}},{"type":"strong"}]},{"type":"hardBreak"},{"text":"만약 전환 페이지가 1개 이상이라면 (ex. 일반 회원가입 → A 페이지 도착 & SNS 회원가입 → B 페이지 도착), 모든 전환 페이지에 전환 스크립트를 삽입해 주세요.","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"버즈빌 광고를 클릭하지 않은 사용자에 대해 전환 스크립트는 동작하지 않아요!","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff991f"}},{"type":"strong"}]},{"type":"hardBreak"},{"text":"초기화 스크립트는 버즈빌 광고를 클릭한 사용자(= url query string에 bz_tracking_id 파라미터를 포함하고 랜딩한 사용자)를 대상으로만 동작합니다. 만일 초기화 스크립트가 동작하지 않은 경우, 전환 스크립트가 실행되어도 버즈빌로 포스트백(=전환 요청)을 송신하지 않아요. 결국, 버즈빌 기여로 측정되지도 과금되지도 않으니 스크립트 실행에 별도 조건을 걸지 않으셔도 괜찮습니다.","type":"text"}]}]},{"type":"taskList","attrs":{"localId":""},"content":[{"type":"taskItem","attrs":{"state":"TODO","localId":"6"},"content":[{"text":"전환 페이지","type":"text","marks":[{"type":"code"}]},{"text":" 소스코드 상 태그 사이에 리다이렉트 필요 여부에 따라 아래 스크립트 중 하나를 삽입해주세요.","type":"text"}]}]},{"type":"taskList","attrs":{"localId":""},"content":[{"type":"taskItem","attrs":{"state":"TODO","localId":"7"},"content":[{"text":"전환 스크립트가 올바르게 동작하는지 테스트해주세요. (","type":"text"},{"text":"테스트 하러가기","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://dashboard.buzzvil.com/campaign/integration"}}]},{"text":")","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"a) 리다이렉트가 필요하지 않은 경우","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"\n","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"b) 리다이렉트가 필요한 경우","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"\n","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"STEP 4. 연동 테스트 진행","type":"text","marks":[{"type":"textColor","attrs":{"color":"#97a0af"}},{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"테스트 도구","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/3054109207/WIP"}}]},{"text":"를 사용해 연동 테스트를 진행해주세요.","type":"text"}]},{"type":"paragraph"},{"type":"rule"},{"type":"heading","attrs":{"level":1},"content":[{"text":"FAQ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}}]}]},{"type":"expand","attrs":{"title":"광고를 클릭하지 않은 사용자도 과금되나요?"},"content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"include","parameters":{"macroParams":{"":{"value":"[광고주 QnA] 광고를 클릭하지 않은 사용자도 과금되나요?"}},"macroMetadata":{"macroId":{"value":"b6eed7d3762d4dc3df1e849c1fc8ce5f"},"schemaVersion":{"value":"1"},"title":"Include Page"}},"localId":"c0a456a9-eb33-4884-bbc2-4460563608f3"}}]},{"type":"expand","attrs":{"title":"기존에 전달 받았던 연동 방식과 달라진 거 같습니다."},"content":[{"type":"paragraph","content":[{"text":"네, 맞습니다. ","type":"text"},{"text":"버즈빌 연동 ID","type":"text","marks":[{"type":"code"}]},{"text":"가 필수적으로 포함되도록 변경되었습니다. 버즈빌 연동 ID 기준으로 연동 상황을 빠르게 체크하고 개선할 수 있게 여러 도구들을 제공 예정입니다. 기존 연동방식을 사용중이시라면 가급적 버즈빌 연동 ID 방식으로 전환 부탁드립니다. (","type":"text"},{"text":"기존 연동문서","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2727411803/2.3.+CPA+Web+-"}}]},{"text":")","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"연동 과정에서 기술적인 문제가 발생하는 경우 기술 지원팀으로 문의주시기 바랍니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"이메일: ","type":"text"},{"text":"csm@buzzvil.com","type":"text","marks":[{"type":"link","attrs":{"href":"mailto:csm@buzzvil.com"}}]}]}]},{"type":"paragraph"}],"version":1}