이 문서에서는 웹 맞춤 템플릿의 권한을 설명합니다.
각 권한은
- 해당 권한이 필요한 API에서 확인됩니다.
- 사용된 API를 기반으로, 샌드박스 처리된 JavaScript에서 자동 감지됩니다. 이러한 상황은 빠른 피드백 루프를 위해 맞춤 템플릿 편집기에서 템플릿이 수정되고 올바른 권한이 적용되었는지 확인하기 위해 코드가 컴파일될 때 발생합니다.
- 맞춤 템플릿 편집기에서 더 구체적으로 수정할 수 있습니다.
queryPermission
API를 통해 샌드박스 처리된 JavaScript에서 쿼리할 수 있습니다.
access_globals
표시 이름: 전역 변수에 액세스합니다.
설명: 전역 변수(민감한 API 포함)에 대한 액세스를 허용합니다.
구성: 액세스할 수 있는 키 목록입니다. 각 키는 점으로 구분된 경로입니다. 예: foo.bar
각 경로의 첫 번째 토큰은 브라우저 전역 범위에서 사전 정의된 키 또는 JavaScript 키워드가 아니어야 합니다. 액세스를 관리하는 읽기, 쓰기, 실행 체크박스가 있습니다.
요청자: setInWindow
, copyFromWindow
, callInWindow
,
createQueue
, createArgumentsQueue
쿼리 서명: queryPermission('access_globals', 'read', <key to read
from>)
, queryPermission('access_globals', 'write', <key to write to>)
, queryPermission('access_globals', 'readwrite', <key to read and write>)
또는 queryPermission('access_globals', 'execute', <key of function to execute>)
참고: 맞춤 템플릿에서 전역 값을 읽거나 쓸 수 있는지 여부를 관리합니다.
예시 코드
const queryPermission = require('queryPermission');
const createQueue = require('createQueue');
if (queryPermission('access_globals', 'readwrite', 'dataLayer')) {
const dataLayerPush = createQueue('dataLayer');
}
access_local_storage
표시 이름: 로컬 저장소에 액세스합니다.
설명: 로컬 저장소에 있는 지정된 키에 대한 액세스를 허용합니다.
구성: 액세스할 수 있는 로컬 저장소 키 목록입니다. 와일드 카드가 없는 간단한 키 배열입니다. 액세스를 관리하는 읽기 및 쓰기 체크박스가 있습니다.
요청자: localStorage
쿼리 서명: queryPermission('access_local_storage', 'read', <key to
read from>)
, queryPermission('access_local_storage', 'write', <key to write
to>)
또는 queryPermission('access_local_storage', 'readwrite', <key to read and
write>)
예시 코드
const queryPermission = require('queryPermission');
const localStorage = require('localStorage');
const key = 'my_key';
if (queryPermission('access_local_storage', 'read', key)) {
const value = localStorage.getItem(key);
}
access_template_storage
표시 이름: 템플릿 저장소에 액세스합니다.
설명: 페이지의 전체 기간 동안 지속되는 템플릿의 임시 저장소에 대한 액세스를 허용합니다.
구성: 없음
요청자: templateStorage
쿼리 서명: queryPermission('access_template_storage')
예시 코드
const queryPermission = require('queryPermission');
const templateStorage = require('templateStorage');
const key = 'my_key';
if (queryPermission('access_template_storage')) {
const value = templateStorage.getItem(key);
}
get_cookies
표시 이름: 쿠키 값을 읽습니다.
설명: 지정된 이름을 가진 쿠키의 값을 읽습니다.
구성: 읽을 수 있는 쿠키 이름 목록입니다.
요청자: getCookieValues
쿼리 서명: queryPermission('get_cookies', <name>)
참고: 이름에 따라 쿠키를 읽을 수 있는지 여부를 지정합니다.
예시 코드
const queryPermission = require('queryPermission');
const getCookieValues = require('getCookieValues');
const cookieName = 'info';
let cookieValues;
if (queryPermission('get_cookies', cookieName)) {
cookieValues = getCookieValues(cookieName);
}
get_referrer
표시 이름: 리퍼러 URL을 읽습니다.
설명: 리퍼러의 범위가 좁은 부분에 대한 읽기 액세스를 허용합니다.
구성: 다음 불리언은 읽을 수 있는 리퍼러 부분을 관리합니다. 리퍼러의 지정된 부분은 해당 부분이 true
인 경우에만 읽을 수 있습니다. 이러한 불리언이 모두 true
로 설정된 경우 호출자는 지정된 구성요소 없이 getReferrerUrl
을 호출하여 전체 리퍼러 URL을 가져올 수 있습니다. 값이 설정되지 않은 경우 기본값은 all
입니다. 값이 설정된 경우 값은 다음 중 하나인 구성요소의 배열이어야 합니다: protocol
,host
,port
,path
,query
, extension
queryKeys
: 쿼리가 선택된 경우 템플릿 작성자가 읽을 수 있는 쿼리 키 집합을 추가로 제한할 수 있습니다. 와일드 카드가 없는 간단한 키 배열입니다.
요청자: getReferrerUrl
, getReferrerQueryParameters
쿼리 서명: queryPermission('get_referrer', <url_component>)
예시 코드
const queryPermission = require('queryPermission');
const getReferrerUrl = require('getReferrerUrl');
let referrer;
if (queryPermission('get_referrer', 'query')) {
referrer = getReferrerUrl('queryParams');
}
get_url
표시 이름: URL을 읽습니다.
설명: 현재 페이지의 URL 일부 또는 전체를 반환합니다.
구성: 다음 불리언은 읽을 수 있는 URL 부분을 관리합니다. URL의 지정된 부분은 해당 부분이 true인 경우에만 읽을 수 있습니다. 호출자는 이러한 불리언이 모두 true
로 설정된 경우에만 지정된 구성요소 없이 getUrl
을 호출하여 전체 URL을 가져올 수 있습니다. 값이 설정되지 않은 경우 기본값은 all
입니다. 값이 설정된 경우 값은 다음 중 하나인 구성요소의 배열이어야 합니다: protocol
,host
,port
,path
,query
, extension
, fragment
queryKeys
: 쿼리가 선택된 경우 템플릿 작성자가 읽을 수 있는 쿼리 키 집합을 추가로 제한할 수 있습니다. 와일드 카드가 없는 간단한 키 배열입니다.
요청자: getUrl
쿼리 서명: queryPermission('get_url', <optional url component>,
<optional query key>)
제공되는 경우 URL 구성요소는 'protocol'
, 'host'
, 'port'
, 'path'
, 'query'
, 'extension'
, 'fragment'
중 하나여야 합니다. 생략된 경우 권한 쿼리는 전체 URL에 대한 액세스 요청입니다.
제공되는 경우 쿼리 키는 템플릿 코드에서 읽으려는 쿼리 문자열 인수여야 합니다.
참고: 현재 위치에서 맞춤 템플릿을 읽을 수 있는지 여부를 관리합니다. 위치의 특정 부분을 제한할 수 있도록 허용합니다.
예시 코드
const queryPermission = require('queryPermission');
const getUrl = require('getUrl');
if (queryPermission('get_url', 'query', 'gclid')) {
const gclid = getUrl('query', false, null, 'gclid');
}
inject_hidden_iframe
표시 이름: 숨겨진 iframe을 삽입합니다.
설명: 지정된 URL로 보이지 않는 iframe을 삽입합니다.
구성: URL 패턴 목록입니다.
요청자: injectHiddenIframe
쿼리 서명: queryPermission('inject_hidden_iframe', <url>)
참고: 맞춤 템플릿이 표시되지 않는 iframe을 삽입할 수 있는지 여부 및 삽입할 수 있는 출처를 지정합니다.
예시 코드
const queryPermission = require('queryPermission');
const injectHiddenIframe = require('injectHiddenIframe');
const url = 'https://www.example.com/iframes';
if (queryPermission('inject_hidden_iframe', url)) {
injectHiddenIframe(url);
}
inject_script
표시 이름: 스크립트를 삽입합니다.
설명: 페이지에 스크립트를 삽입합니다.
구성: URL 패턴 목록입니다.
요청자: injectScript
쿼리 서명: queryPermission('inject_script', <url>)
참고: 맞춤 템플릿이 표시되지 않는 JavaScript를 삽입할 수 있는지 여부 및 삽입할 수 있는 출처를 지정합니다.
예시 코드
const queryPermission = require('queryPermission');
const injectScript = require('injectScript');
const url = 'https://www.example.com?api.js';
if (queryPermission('inject_script', url)) {
injectScript(url);
}
logging
표시 이름: 콘솔에 로깅합니다.
설명: 개발자 콘솔 및 GTM의 미리보기 모드에 로깅합니다.
구성: 프로덕션에서 로깅을 사용 설정하는 옵션입니다. 기본값은
디버그/미리보기에서만 로깅을 사용 설정하는 것입니다. 권한이 거부되는 경우 logToConsole
에서
오류가 발생하지는 않지만 로그 메시지를 차단합니다.
요청자: logToConsole
쿼리 서명: queryPermission('logging')
참고: 맞춤 템플릿에서 개발자 콘솔에 로깅할 수 있는지 여부를 관리합니다.
예시 코드
const queryPermission = require('queryPermission');
const logToConsole = require('logToConsole');
// Note that it's fine to call log, since the log call will be ignored if
// logging isn't permitted in the current environment.
logToConsole('diagnostic info');
read_data_layer
표시 이름: 데이터 영역을 읽습니다.
설명: dataLayer에서 데이터를 읽습니다.
구성: 키 일치 표현식의 집합입니다. 여기서 키 일치는 앞에 점선으로 표시된 참조가 있고 뒤에 와일드 카드가 나오는 표현식입니다. 키 일치 표현식은 데이터 영역에서 읽을 수 있는 속성을 지정합니다.
요청자: copyFromDataLayer
쿼리 서명: queryPermission('read_data_layer', <data layer key to read
from>)
참고: 맞춤 템플릿이 데이터 영역에서 읽을 수 있는지 여부를 관리합니다.
예시 코드
const queryPermission = require('queryPermission');
const copyFromDataLayer = require('copyFromDataLayer');
const dlKey = 'foo.bar';
if (queryPermission('read_data_layer', dlKey)) {
const dlContents = copyFromDataLayer(dlKey);
}
read_character_set
표시 이름: 문서 문자 집합을 읽습니다.
설명: document.characterSet
을 읽습니다.
구성: 없음
요청자: readCharacterSet
쿼리 서명: queryPermission('read_character_set')
참고: 맞춤 템플릿이 document.characterSet
를 읽을 수 있는지 여부를 지정합니다.
예시 코드
const queryPermission = require('queryPermission');
const readCharacterSet = require('readCharacterSet');
if (queryPermission('read_character_set')) {
const characterSet = readCharacterSet();
}
read_container_data
표시 이름: 컨테이너 데이터를 읽습니다.
설명: 컨테이너에 대한 데이터를 읽습니다.
구성: 없음
요청자: getContainerVersion
쿼리 서명: queryPermission('read_container_data')
참고: 맞춤 템플릿이 컨테이너에 대한 데이터를 읽을 수 있는지 여부를 관리합니다.
예시 코드
const queryPermission = require('queryPermission');
const getCookieValues = require('getContainerVersion');
let version;
if (queryPermission('read_container_data')) {
version = getContainerVersion();
}
read_event_metadata
표시 이름: 이벤트 메타데이터를 읽습니다.
설명: 이벤트 콜백의 이벤트 메타데이터를 읽습니다.
구성: 없음
요청자: addEventCallback
쿼리 서명: queryPermission('read_event_metadata')
참고: 맞춤 템플릿이 콜백의 이벤트 메타데이터를 읽도록 허용할지를 관리합니다.
예시 코드
const queryPermission = require('queryPermission');
const addEventCallback = require('addEventCallback');
if (queryPermission('read_event_metadata')) {
addEventCallback((containerId, eventMetadata) => {
// Read event metadata.
});
}
read_title
표시 이름: 문서 제목을 읽습니다.
설명: document.title
을 읽습니다.
구성: 없음
요청자: readTitle
쿼리 서명: queryPermission('read_title')
참고: 맞춤 템플릿이 document.title
을 읽을 수 있는지 여부를 지정합니다.
예시 코드
const queryPermission = require('queryPermission');
const readTitle = require('readTitle');
if (queryPermission('read_title')) {
const title = readTitle();
}
send_pixel
표시 이름: 픽셀을 전송합니다.
설명: 지정된 URL에 GET 요청을 전송합니다. 응답은 처리되지 않습니다.
구성: 허용된 URL 패턴의 목록입니다.
요청자: sendPixel
쿼리 서명: queryPermission('send_pixel', <url>)
참고: 맞춤 템플릿이 GET 요청을 전송할 수 있는지 여부 및 전송할 수 있는 출처를 지정합니다.
예시 코드
const queryPermission = require('queryPermission');
const sendPixel = require('sendPixel');
const url = 'https://www.example.com?foo=3';
if (queryPermission('send_pixel', url)) {
sendPixel(url);
}
set_cookies
표시 이름: 쿠키를 설정합니다.
설명: 지정된 이름 및 매개변수로 쿠키를 설정합니다.
구성: 허용된 쿠키 이름(이름마다 제한사항이 있을 수 있음), 도메인, 경로, secure
속성 및 만료를 나타내는 표입니다.
요청자: setCookie
쿼리 서명: queryPermission('set_cookies', <name>, <options>)
참고: 쿠키 이름, 도메인, 경로, secure
속성, 만료에 따라 쿠키를 작성할 수 있는지 여부를 지정합니다.
예시 코드
const queryPermission = require('queryPermission');
const setCookie = require('setCookie');
const options = {
'domain': 'www.example.com',
'path': '/',
'max-age': 60*60*24*365,
'secure': true
};
if (queryPermission('set_cookies', 'info', options)) {
setCookie('info', 'xyz', options);
}
write_data_layer
표시 이름: 데이터 영역을 작성합니다.
설명: dataLayer에 데이터를 씁니다.
구성: 키 일치 표현식의 집합입니다. 여기서 키 일치는 앞에 점선으로 표시된 참조가 있고 뒤에 와일드 카드가 나오는 표현식입니다. 키 일치 표현식은 데이터 영역에 쓸 수 있는 속성을 지정합니다.
요청자: gtagSet
쿼리 서명: queryPermission('write_data_layer', <data layer key to
write from>)
참고: 맞춤 템플릿이 데이터 영역에 쓰도록 허용할지를 관리합니다.
예시 코드
const queryPermission = require('queryPermission');
const gtagSet = require('gtagSet');
const dlKey = 'foo.bar';
if (queryPermission('write_data_layer', dlKey)) {
gtagSet({dlKey: 'baz'});
}