{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Introduction","type":"text","marks":[{"type":"strong"}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"반드시 샘플 코드를 확인한 뒤 실제 퍼블리셔 앱의 코드에 연동 바랍니다. - ","type":"text"},{"text":"Github Link","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/Buzzvil/buzzscreen-extension-js-sdk-publisher"}}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Extension JS SDK Workflow","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"drawio","parameters":{"macroParams":{"contentId":{"value":"411500595"},"zoom":{"value":"1"},"simple":{"value":"0"},"pageId":{"value":"388366686"},"lbox":{"value":"1"},"diagramDisplayName":{"value":"js_extension_sdk_workflow"},"contentVer":{"value":"1"},"revision":{"value":"1"},"baseUrl":{"value":"https://buzzvil.atlassian.net/wiki"},"diagramName":{"value":"js_extension_sdk_workflow"},"width":{"value":"691.5"},"links":{"value":""},"tbstyle":{"value":""},"height":{"value":"301"}},"macroMetadata":{"macroId":{"value":"b5fa178d-9451-4b7f-a68b-81d275bbdc57"},"schemaVersion":{"value":"1"},"placeholder":[{"type":"image","data":{"url":"https://ac.draw.io/connectImage?contentId=411500595&zoom=1&simple=0&pageId=388366686&lbox=1&diagramDisplayName=js_extension_sdk_workflow&contentVer=1&revision=1&baseUrl=https%3A%2F%2Fbuzzvil.atlassian.net%2Fwiki&diagramName=js_extension_sdk_workflow&width=691.5&links=&tbstyle=&height=301"}}],"title":"draw.io Diagram"}},"localId":"be96f710-994c-41f6-9e58-2bba55bd3bf4"}},{"type":"paragraph"},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"개인화된 콘텐츠와 광고를 안드로이드 잠금화면에서 보여주는 버즈스크린의 동작을 돕는 익스텐션 SDK입니다. (","type":"text"},{"type":"inlineCard","attrs":{"url":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/384860182"}},{"text":" 참고)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"버즈스크린의 개인화를 위해서는 유저 정보가 필요하며, 퍼블리셔의 웹사이트에서 버즈스크린으로 유저 정보를 전달하기 위해서 이 SDK를 사용합니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"이 가이드는 퍼블리셔의 사이트에 이 SDK를 어떻게 적용할 수 있는지 설명합니다.","type":"text"}]}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"연동을 진행하기 전 반드시 버즈빌 BD팀과 협의해야 합니다.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Index","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"exclude":{"value":"\\bIndex\\b"}},"macroMetadata":{"macroId":{"value":"542bf8e2-a824-426c-a5c0-137cc3da5041"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"7ce0ca3a-d50b-491d-a049-00e9e63b2c8a"}},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Getting started","type":"text","marks":[{"type":"strong"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"1. 로그인 및 포인트 적립 요청 흐름","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"아래 그림 및 표에서 파란색으로 하이라이트된 부분은 퍼블리셔가 처리해야 하는 부분입니다.","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":80.0},"content":[{"type":"media","attrs":{"type":"external","url":"https://github.com/Buzzvil/buzzscreen-extension-js-sdk-publisher/raw/master/buzzscreen-extension-js-sdk-flow.png"}}]},{"type":"table","attrs":{"layout":"default","isNumberColumnEnabled":true},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[680.0]},"content":[{"type":"paragraph","content":[{"text":"사용자는 버즈스크린 안드로이드 클라이언트에서 로그인 버튼을 눌러서 로그인을 시도합니다. 이 때, 안드로이드 앱은 ","type":"text"},{"text":"WebView","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.android.com/reference/android/webkit/WebView.html"}}]},{"text":"를 통해서 퍼블리셔의 웹 프론트엔드 사이트를 열어서 사용자에게 보여줍니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[680.0]},"content":[{"type":"paragraph","content":[{"text":"사용자는 ","type":"text"},{"text":"WebView","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.android.com/reference/android/webkit/WebView.html"}}]},{"text":" 상에 보이는 퍼블리셔의 웹 프론트엔드에서 로그인을 시도합니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[680.0]},"content":[{"type":"paragraph","content":[{"text":"퍼블리셔의 웹 프론트엔드는 사용자의 로그인을 위한 정보를 받아서 퍼블리셔의 서버로 전달합니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[680.0]},"content":[{"type":"paragraph","content":[{"text":"퍼블리셔의 서버는 로그인이 성공한 유저의 세션 정보를 웹 프론트엔드에 전달합니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#deebff","rowspan":1,"colwidth":[680.0]},"content":[{"type":"paragraph","content":[{"text":"퍼블리셔의 웹 프론트엔드는 사용자가 로그인된 것을 확인하고, BuzzScreen Extension JS SDK의 함수를 호출하여 유저 정보를 전달합니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[680.0]},"content":[{"type":"paragraph","content":[{"text":"BuzzScreen Extension JS SDK는 안드로이드에서 제공하는 ","type":"text"},{"text":"Javascript Interface","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.android.com/guide/webapps/webview.html#BindingJavaScript"}}]},{"text":"를 통해서 유저 정보를 안드로이드 클라이언트로 전달합니다. 이 정보는 BuzzScreen 서버까지 전달되어서, 안드로이드 클라이언트가 적절한 광고를 받아올 수 있게 합니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[680.0]},"content":[{"type":"paragraph","content":[{"text":"안드로이드 클라이언트는 유저가 광고에 랜딩하는 등의 동작을 하는 것을 감지하면 BuzzScreen SDK를 이용해서 BuzzScreen 서버에 이 사실을 전달합니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[680.0]},"content":[{"type":"paragraph","content":[{"text":"BuzzScreen 서버는 특정 유저가 어느 정도의 포인트를 받아야 함을 알리기 위해 ","type":"text"},{"text":"userId","type":"text","marks":[{"type":"code"}]},{"text":"와 해당 유저가 얻은 포인트 정보를 퍼블리셔의 서버로 전달합니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#deebff","rowspan":1,"colwidth":[680.0]},"content":[{"type":"paragraph","content":[{"text":"퍼블리셔의 서버는 위 정보를 받아서 해당 유저에게 포인트를 부여합니다.","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"2. 퍼블리셔가 해야 할 일","type":"text"}]},{"type":"paragraph","content":[{"text":"퍼블리셔가 해야 할 일은 위 그림 및 표에서 파란색으로 표시된 부분으로, 크게 다음과 같이 2가지로 나눌 수 있습니다.","type":"text"}]},{"type":"table","attrs":{"layout":"default","isNumberColumnEnabled":true},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[95.0]},"content":[{"type":"paragraph","content":[{"text":"항목","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[622.0]},"content":[{"type":"paragraph","content":[{"text":"세부내용","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[95.0]},"content":[{"type":"paragraph","content":[{"text":"로그인 연동","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[622.0]},"content":[{"type":"paragraph","content":[{"text":"퍼블리셔의 웹사이트에서 사용자가 로그인에 성공하면, 이 SDK를 이용해서 유저 정보를 버즈스크린으로 전달할 수 있게 만들어야 합니다. 이 부분에 대해서는 이 가이드의 나머지 부분에서 상세하게 설명하고 있습니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[95.0]},"content":[{"type":"paragraph","content":[{"text":"포스트백 연동","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[622.0]},"content":[{"type":"paragraph","content":[{"text":"사용자가 광고에 랜딩하는 등의 행동을 통해 적립할 포인트가 생기는 경우, 퍼블리셔의 서버가 해당 알림을 받아서 적절한 처리를 할 수 있도록 연동을 해야 합니다. 포스트백 API에 대해서는 ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/1756004654"}},{"text":"문서를 참고하시기 바랍니다.","type":"text"}]}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Basic Usage - 로그인 연동","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"로그인 연동을 위해서 퍼블리셔는 ","type":"text"},{"text":"로그인 체크 주소","type":"text","marks":[{"type":"strong"}]},{"text":"를 버즈빌에 알리고, '로그인 체크 주소'에 대해서는 아래 내용에 따라 ","type":"text"},{"text":"SDK 연동을 위한 설정","type":"text","marks":[{"type":"strong"}]},{"text":"을 해야 합니다.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"1. 로그인 체크 주소 생성","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":80.0},"content":[{"type":"media","attrs":{"type":"external","url":"https://github.com/Buzzvil/buzzscreen-extension-js-sdk-publisher/raw/master/buzzscreen-extension-js-sdk-sign-in-verification-url.png"}}]},{"type":"paragraph"},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[167.0]},"content":[{"type":"paragraph","content":[{"text":"항목","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[592.0]},"content":[{"type":"paragraph","content":[{"text":"세부내용","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[167.0]},"content":[{"type":"paragraph","content":[{"text":"로그인 체크 주소","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[592.0]},"content":[{"type":"paragraph","content":[{"text":"사용자가 로그인한 상태인지 아닌지 체크하기 위해 필요한 주소","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"로그인이 되어 있는 사용자와 로그인이 되어 있지 않은 사용자가 같은 주소로 서로 다른 페이지를 보아야 함","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"이 경우, 각 페이지에서 이 SDK의 서로 다른 함수를 호출해서 로그인 여부를 구분하게 할 수 있음","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[167.0]},"content":[{"type":"paragraph","content":[{"text":"A. 로그인한 유저인 경우","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[592.0]},"content":[{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"로그인 후 화면 표시","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"'로그인 되어 있음'을 BuzzScreen에 알림","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[167.0]},"content":[{"type":"paragraph","content":[{"text":"B. 로그인 하지 않은 유저인 경우","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[592.0]},"content":[{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"로그인 버튼 또는 로그인 페이지 표시","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"'로그인 상태가 아님'을 BuzzScreen에 알림","type":"text"}]}]}]}]}]}]},{"type":"paragraph","content":[{"text":"예를 들어서 ","type":"text"},{"text":"https://www.buzzvil.com/profile","type":"text","marks":[{"type":"code"}]},{"text":" 이라는 주소가 있다고 생각해 봅시다.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"이 주소는 사이트에 로그인 되어 있는 사용자의 계정 정보가 있는 페이지에 접근하기 위한 것입니다. 따라서 사용자의 계정 정보 페이지에서 이 SDK를 로드하고 API를 호출해서 BuzzScreen에게 사용자의 유저 정보를 전달하면 로그인이 되었음을 알릴 수 있습니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"만약 로그인이 되어 있지 않은 사용자가 위 주소에 접근한다면, ID와 비밀번호 입력을 요구하는 로그인 페이지를 보게 될 것입니다. 따라서 로그인 페이지에서 이 SDK를 로드하고 API를 호출해서 BuzzScreen에게 로그아웃 상태임을 알릴 수 있습니다.","type":"text"}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"2. BuzzScreen Extension JS SDK 연동","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"1) SDK 삽입","type":"text"}]},{"type":"paragraph","content":[{"text":"'로그인 체크 주소'로 접근 가능한 두 페이지에 각각 이 SDK를 삽입합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"2) '로그인 되어 있음'을 알리기","type":"text"}]},{"type":"paragraph","content":[{"text":"로그인 상태인 사용자가 '로그인 체크 주소'를 통해 접근하게 되는 ","type":"text"},{"text":"개인 페이지","type":"text","marks":[{"type":"strong"}]},{"text":"에서 다음과 같이 자바스크립트 코드를 실행하여, 유저 정보(유저 아이디, 출생년도, 성별, 기타정보)를 전달하고 로그인이 되어 있음을 알립니다.","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"기타정보(optional)는 아래 예시와 같이 json format의 string을 전달해야 합니다.","type":"text"}]}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"각 인자의 타입: 순서대로 ","type":"text"},{"text":"string","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"number","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"string","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"string","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"인자를 잘못 설정한 경우 ","type":"text"},{"text":"console","type":"text","marks":[{"type":"code"}]},{"text":" 창에 에러 로그가 남음","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"인자가 잘못 설정되지 않도록 주의 필요","type":"text"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"다음과 같이 사용자의 출생년도와 성별, 기타정보를 전달하지 않고 BuzzScreen과 연동하게 할 수도 있습니다.","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"출생년도와 성별 등의 타게팅 정보를 설정하지 않는 경우 타게팅이 설정된 광고가 보이지 않으므로 유저가 볼 수 있는 전체 광고의 수량이 줄어들게 됩니다.","type":"text"}]}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"3) '로그인 상태가 아님'을 알리기","type":"text"}]},{"type":"paragraph","content":[{"text":"로그인 상태가 아닌 사용자가 '로그인 체크 주소'를 통해 접근하게 되는 ","type":"text"},{"text":"로그인 페이지","type":"text","marks":[{"type":"strong"}]},{"text":"에서 다음 자바스크립트 코드를 호출합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Advanced Usage","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":"wide"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[191.0]},"content":[{"type":"paragraph","content":[{"text":"항목","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[410.0]},"content":[{"type":"paragraph","content":[{"text":"코드","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[357.0]},"content":[{"type":"paragraph","content":[{"text":"세부내용","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[191.0]},"content":[{"type":"paragraph","content":[{"text":"BuzzScreen Webview에서 페이지를 로드했는지 확인하기","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[410.0]},"content":[{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[357.0]},"content":[{"type":"paragraph","content":[{"text":"BuzzScreen ","type":"text"},{"text":"Webview","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.android.com/reference/android/webkit/WebView.html"}}]},{"text":"에서 페이지를 로드한 경우 ","type":"text"},{"text":"true","type":"text","marks":[{"type":"code"}]},{"text":", 아니면 ","type":"text"},{"text":"false","type":"text","marks":[{"type":"code"}]},{"text":"를 리턴","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[191.0]},"content":[{"type":"paragraph","content":[{"text":"상세한 로그 확인하기","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[410.0]},"content":[{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[357.0]},"content":[{"type":"paragraph","content":[{"text":"verbose 옵션을 ","type":"text"},{"text":"true","type":"text","marks":[{"type":"code"}]},{"text":"로 설정하면 ","type":"text"},{"text":"console.info","type":"text","marks":[{"type":"code"}]},{"text":" 레벨의 로그를 확인 가능","type":"text"}]}]}]}]},{"type":"paragraph"}],"version":1}

Browser not supported