커스텀 코드

“커스텀 코드” 메뉴는 Top bar 에서 고른 사이트의 페이지 스크립트 목록을 보여 줍니다. 사이트 화면의 “페이지 스크립트” 카드에서도 같은 목록을 엽니다. 표에는 “이름”, “상태”(“초안”, “게시됨”, “일시 중지”, “보관됨”), “실행 시점”, “적용 페이지”, “최근 수정” 열이 있고, 게시한 뒤 저장한 변경이 있으면 “미게시 변경”이 붙습니다.

페이지 스크립트는 방문자 페이지 안에서 실행되는 고객 자신의 코드입니다. HTML 은 body 끝에, CSS 는 문서 전체에 들어가고, JavaScript 는 bzw 와 함께 실행됩니다. 콘솔 안에서는 실행되지 않습니다 — 편집기의 “격리 미리보기”만 격리된 프레임에서 코드를 실행합니다.

스크립트는 만든 순서대로 실행되고, 게시해야 방문자에게 실행됩니다. 커스텀 코드 위젯(HTML·CSS·JS 로 만드는 위젯)은 위젯 메뉴에서 종류 “커스텀 코드”로 만들고, 그 위젯의 코드 이력은 위젯 편집기의 “코드 이력” 탭에 있습니다.

목록 아래 “사이트 보안 정책(CSP) 안내” 카드는 사이트에 Content-Security-Policy 가 있을 때 커스텀 코드가 실행되려면 무엇을 허용해야 하는지 알려 줍니다.

1. 1단계 · 스크립트를 추가합니다

   “스크립트 추가”를 누르고 “이름”과 “실행 시점”을 고른 뒤 “추가”를 누르세요. 초안으로 만들어지고 편집기가 열립니다.

2. 2단계 · 코드를 씁니다

   편집기 “코드” 탭에서 HTML·CSS·JavaScript 를 쓰고 “저장”을 누르세요. 칸마다 지금 글자 수와 한도가 보이고, 옆의 “격리 미리보기”가 지금 코드를 샘플 페이지에서 실행해 결과(“스크립트를 실행했습니다” 또는 오류 코드)를 알려 줍니다.

3. 3단계 · 적용 페이지를 정합니다

   “적용 페이지” 탭에서 포함·제외 조건을 더하고 “테스트 URL” 칸으로 어떤 주소에서 실행될지 확인한 뒤 저장하세요. 조건이 없으면 모든 페이지에서 실행됩니다.

4. 4단계 · 게시합니다

   화면 머리의 “게시”를 누르고 확인 창에서 한 번 더 누르세요. 사이트의 스냅숏 새 버전이 만들어지고, 다음 페이지 로드부터 방문자에게 실행됩니다. 저장하지 않은 변경이 있으면 먼저 저장해야 합니다.

5. 5단계 · 이력을 보고 복원합니다

   “코드 이력” 탭에서 버전마다 작성자·시각·다이제스트를 보고, “이전”·“이후”를 골라 “비교”를 누르면 줄 단위 차이가 글자로 보입니다. 행의 복원 버튼을 누르고 확인 창의 “복원”을 누르면 그 버전의 코드로 새 버전이 만들어집니다.

“기본 정보” 카드에서 “이름”과 “실행 시점”을 고칩니다. “즉시 (스냅숏 도착 때)”와 “본문 뒤 (페이지가 그려진 뒤)”는 동의 모드와 상관없이 실행되고, “동의 뒤 (추적 동의가 있을 때만)”는 방문자가 동의했거나 사이트가 동의를 요구하지 않을 때만 실행됩니다. 분석·추적 태그는 “동의 뒤”를 고르세요.

“코드” 카드의 HTML·CSS·JavaScript 칸은 각각 32,768자까지입니다. HTML 안의 <script> 는 실행되지 않으니 JavaScript 는 JavaScript 칸에 쓰세요. CSS 는 위젯 CSS 와 달리 Shadow DOM 으로 격리되지 않고 문서 전체에 적용됩니다.

위젯 표시 규칙의 페이지 조건과 같습니다. 포함 조건 중 하나라도 맞고 제외 조건이 하나도 맞지 않는 페이지에서만 실행됩니다. “테스트 URL” 칸에 주소를 넣으면 실행 여부를 바로 판정합니다.

조건이 틀리면 저장할 때 이 탭이 열리고 칸 아래에 이유가 보입니다.

코드(HTML·CSS·JS)가 바뀐 저장마다 버전이 하나씩 남습니다. 이름·실행 시점·적용 페이지만 바꾼 저장은 버전을 만들지 않습니다. 표에는 “버전”, “시각”, “작성자”, “다이제스트”(앞 12자), “크기”, “복원 원본” 열이 있습니다. 버전은 고칠 수도 지울 수도 없습니다.

버전 두 개 이상이면 “두 버전 비교” 카드가 보입니다. 비교 결과는 파일별 줄 차이를 글자로만 보여 주며 코드를 실행하지 않습니다. 행의 보기 버튼은 그 버전의 코드를 글자로 엽니다.

복원은 게시가 아닙니다. 복원한 코드는 새 버전으로 저장되고, 게시된 스크립트라면 “미게시 변경”이 붙습니다 — 방문자에게 내보내려면 게시하세요.

스크립트 추가

목록 화면 머리에 Owner·Admin 에게만 보입니다. 이름과 실행 시점을 정해 초안 스크립트를 만듭니다. 요금제에 커스텀 코드 기능이 없거나 조직이 읽기 전용이면 눌리지 않습니다.

저장

편집기에서 고친 이름·실행 시점·코드·적용 페이지를 저장합니다. 코드가 바뀌었으면 코드 버전이 하나 늘어납니다.

게시

확인 창을 거쳐 스크립트를 사이트의 새 스냅숏 버전에 싣습니다. 이미 게시된 스크립트는 저장한 변경이 있을 때만 다시 게시됩니다.

일시 중지

게시된 스크립트를 새 스냅숏 버전에서 뺍니다. 다음 페이지 로드부터 실행되지 않습니다.

재개

일시 중지한 스크립트를 지금 저장된 코드로 다시 게시합니다.

보관

초안이나 일시 중지 상태의 스크립트를 보관합니다. 코드 이력은 남습니다. 게시 중인 스크립트는 먼저 일시 중지하세요.

되살리기

보관한 스크립트를 초안으로 되돌립니다.

비교

“코드 이력” 탭에서 고른 두 버전의 줄 단위 차이를 보여 줍니다.

복원

확인 창의 버튼입니다. 고른 버전의 코드로 새 버전을 만듭니다. 게시는 따로 해야 합니다.

Owner·Admin·Editor 는 페이지 스크립트와 코드 이력을 볼 수 있습니다(code.view). 만들기·저장·게시·일시 중지·보관·복원은 Owner·Admin 만 할 수 있습니다(code.manage). Editor 에게는 “코드는 볼 수만 있습니다…” 안내가 보이고 코드 칸은 읽기 전용입니다.

Analyst 에게는 메뉴와 사이트 화면의 카드가 보이지 않고, 주소를 직접 열면 권한 없음 안내가 나옵니다. 게시 이력의 스냅숏 JSON 에서도 스크립트 코드는 null 로 보입니다.

지원 열람 중인 플랫폼 관리자는 고객 코드를 보거나 바꿀 수 없습니다.

“지금 요금제에 커스텀 코드 기능이 없습니다.”가 보입니다.

요금제에 커스텀 코드 기능이 없으면 스크립트 추가·코드 변경·게시·재개·복원이 거절됩니다. 이미 게시한 스크립트는 방문자에게 실행되지 않고, 게시 이력의 “게시에서 빠진 위젯” 안내에 나옵니다. 일시 중지·보관·이름 변경은 할 수 있습니다.

“한 사이트에 보관하지 않은 스크립트는 최대 20개입니다.”가 나옵니다.

사이트마다 보관하지 않은 스크립트는 20개까지입니다. 쓰지 않는 스크립트를 보관하면 새로 추가할 수 있습니다.

게시가 “게시할 수 없습니다”로 거절되고 코드 합계가 한도를 넘는다고 합니다.

한 사이트에서 함께 게시되는 페이지 스크립트의 코드 합계에는 한도가 있습니다. 쓰지 않는 스크립트를 일시 중지하거나 코드를 줄이세요.

사이트에서 스크립트가 실행되지 않습니다.

게시했는지, 지금 페이지가 적용 페이지 조건에 맞는지(“테스트 URL”), 실행 시점이 “동의 뒤”라면 방문자가 동의했는지 확인하세요. 사이트에 CSP 가 있으면 “사이트 보안 정책(CSP) 안내” 카드의 항목을 허용해야 합니다. 이때도 사이트 페이지는 정상이고 진단만 남습니다.

복원했는데 방문자에게 그대로입니다.

복원은 저장이지 게시가 아닙니다. “미게시 변경”이 붙은 스크립트를 게시해야 방문자에게 나갑니다.

“플랫폼 운영팀이 이 사이트의 커스텀 코드를 껐습니다”가 보입니다.

플랫폼 운영팀이 이 사이트(또는 조직 전체)의 커스텀 코드를 껐습니다. 배너의 사유를 확인하세요. 그동안 페이지 스크립트와 커스텀 코드 위젯은 방문자에게 표시되지 않고, 게시·재개는 거절됩니다. 코드는 고치고 저장할 수 있으니 고친 뒤 지원팀에 문의하세요. 문의는 계정 메뉴의 “문의”로 보내세요.