브라우저 SDK 레퍼런스
스크립트의 접점은 일부러 작게 만들었습니다. 태그 하나, 요소 한 종류, 함수 하나입니다.
스크립트 태그
| 속성 | 의미 |
|---|---|
| src | 연동 화면에 표시되는 스크립트 주소. |
| data-loop | 공개 키. 공개되어도 되며 인증된 내 도메인에서만 동작합니다. |
| async | 필수. 스크립트가 페이지를 막아서는 안 됩니다. |
슬롯 요소
| 속성 | 의미 |
|---|---|
| data-loop-slot | 위치의 이름, 최대 64자. 위치별 성과에 이 이름으로 나옵니다. |
| data-loop-size | 선택. 300x250, 320x50, 320x100, 728x90, 970x250, 160x600 중 하나. 슬롯이 배너가 됩니다. |
| data-loop-type | 선택. recommendation(사이즈가 없을 때 기본값), feed, banner. |
전환 추적
name은 최대 40자의 문자열입니다. props는 문자열, 숫자, 불리언 값만 담는 단층 객체이고 생략할 수 있습니다. 현재 페이지 로드가 유닛을 통해 들어온 것이 아니면 호출은 무시됩니다.
loop('track', name, props?)믿고 쓸 수 있는 동작
- 태그가 여러 번 들어가도 페이지당 한 번만 실행됩니다.
- 화면 전환으로 나중에 추가된 슬롯도 찾아냅니다.
- 유닛은 닫힌 shadow root 안에 그려집니다. 내 CSS가 유닛에 닿지 않고, 유닛도 내 페이지에 닿지 않습니다.
- 내 페이지로 오류를 던지지 않습니다. 어떤 실패든 슬롯이 비고 접히는 것으로 끝납니다.
- sendBeacon과 text/plain 본문으로 보고하므로 사전 요청(preflight)이 생기지 않습니다.
디버깅
슬롯에 data-loop-debug를 붙이면 개발자 도구에서 shadow root를 열어 볼 수 있습니다. 네트워크 탭에서 첫 요청은 /v1/config입니다. 200이면 키와 도메인이 맞는 것입니다.