사이트 페이지에 사용자 정의 HTML 또는 스크립트를 삽입하세요.

코드 주입을 사용하여 사이트의 특정 부분을 향상시키는 HTML 및 스크립트를 추가할 수 있습니다. 여기에는 실시간 채팅 서비스, 사용자 지정 이메일 서비스를 위한 도메인 인증, 또는 사이트 분석이 포함될 수 있습니다.

코드 주입은 콘텐츠나 스타일을 추가하기 위한 것이 아닙니다. 사이트에 콘텐츠를 추가하려면 페이지 및 콘텐츠 기본 사항을 방문하세요. 사용자 정의 CSS를 추가하여 스타일을 지정하려면 사용자 정의 CSS 에디터를 사용하세요.

코드 주입은 코어, 플러스, 어드밴스드, 비즈니스, 커머스 베이직, 커머스 어드밴스드 요금제에서 사용할 수 있습니다. 자세히 알아보려면 적합한 Squarespace 요금제 선택하기를 방문하세요.

비디오 시청하기

시작하기 전에

• 코드 주입에 코드를 추가하면 사이트를 편집하는 동안 비활성화하라는 요청을 받을 수 있습니다.
• 코드 주입 필드에 JavaScript를 추가하려면 코드를 태그로 감싸세요.
• 사용자 정의 CSS 에디터에 코드 주입 대신 CSS를 추가할 것을 권장합니다. 코드 주입에 추가하는 경우, 코드를 태그로 감싸세요.
• 바닥글 영역은 사이트 템플릿과 버전에 의해 정의됩니다.
• Ajax 로딩이 코드 주입에 추가된 CSS가 올바르게 로드되지 않게 방해할 수 있습니다. 대신 CSS를 CSS 에디터에 추가하세요.
• 결제 페이지는 코드를 지원하지 않습니다.

코드 주입에 코드 추가

코드 주입에 사용자 지정 코드를 추가하는 방법:

1. 코드 주입 패널을 엽니다.
2. 머리말, 바닥글, 잠금 페이지, 주문 확인 페이지 또는 주문 상태 페이지의 적절한 코드 주입 필드에 유효한 HTML이나 스크립트를 추가합니다.
3. 코드를 추가한 후 저장을 클릭합니다.

머리말

여기에 주입된 코드는 사이트의 모든 페이지에 있는 태그에 삽입됩니다.

바닥글

여기에 주입된 코드는 사이트의 모든 페이지에서 닫는 태그 앞에 삽입됩니다.

주입된 코드를 쿠키 배너와 통합

사이트에 코드 주입을 사용하여 서드파티(타사) 통합 기능을 추가하는 경우(예: Google Ads), 해당 코드는 방문자의 브라우저에 쿠키를 저장할 수 있습니다. 사이트에서 쿠키 배너를 활성화하면 방문자의 쿠키 동의 여부에 따라 코드 주입을 사용하여 이러한 서드파티(타사) 통합 기능의 동작을 변경할 수 있습니다.

다음 단계를 완료하면 방문자가 동의 여부를 선택할 수 있습니다.

1. 쿠키 & 방문자 데이터 패널을 열고 쿠키 배너 옆의 토글을 켜서 쿠키 배너를 활성화합니다.
2. 옵트인 & 아웃 쿠키 배너 유형을 선택하여 고객이 사이트의 쿠키를 수락하거나 거부할 수 있는 두 개의 사용자 지정 가능한 버튼을 표시합니다.
3. 저장을 클릭합니다.
4. 필요한 코드를 추가합니다. 아래 예시를 검토하여 자세히 알아보세요.

Google Ads를 예로 들겠습니다. 코드 주입을 사용하여 사이트에 Google Ads를 추가한 경우, 이 포럼 게시물에서 예시 코드를 확인하세요. Google Ads 코드를 쿠키 배너와 통합하기 위해 추가할 수 있는 코드입니다.

공식 통합 기능을 통해 Google Analytics를 사용하는 경우, 이 필드에 코드를 추가할 필요가 없습니다. 측정 ID를 저장한 후 쿠키 배너를 활성화하세요.

참고: 동의 모드는 Google에서 제공하는 기능입니다. 자세한 내용을 보려면 Google의 문서를 방문하세요. 또한, 사용자 지정 코드 수정은 Squarespace 지원 범위에 포함되지 않습니다. 설정이나 문제 해결 관련 지원이 필요한 경우 Google Ads에 문의해야 합니다.

잠금 페이지

잠금 화면은 페이지나 사이트가 사이트 전체 또는 페이지 비밀번호 뒤에 숨겨져 있을 때 나타납니다. 여기에 주입된 코드는 잠금 화면의 비밀번호 필드 위에 표시됩니다. 사이트 체험판 기간 동안 잠금 화면에 코드를 삽입할 수 없습니다.

이 필드에 코드를 추가할 수 있지만, 잠금 페이지를 디자인할 때는 잠금 화면 패널을 사용하는 것이 좋습니다. 이렇게 하면 배경 이미지나 슬라이드쇼를 추가하고, 글꼴 스타일을 조정하고, 로고를 추가하는 등의 작업을 할 수 있습니다.

주문 확인 페이지

여기에 추가된 코드는 고객이 기프트 카드, 멤버십 및 구독을 결제한 후 나타나는 주문 확인 페이지에 주입됩니다.

고객에게 특정 정보를 삽입하기 위해 사용할 수 있는 태그는 여섯 가지입니다. 주문 처리 및 배송 프로필이 여러 개여서 한 구매가 분할된 경우, 각 주문에 대한 세부 정보가 구매 내에 표시됩니다.

• {orderId} – 확인된 주문의 주문 번호
• {orderSubtotal} – 확인된 주문의 소계
• {orderSubtotalCents} – 확인된 주문의 소계(센트 단위)
• {orderGrandTotal} – 확인된 주문의 총액
• {orderGrandTotalCents} – 확인된 주문의 총액(센트 단위)
• {customerEmailAddress} – 고객이 결제 시 '이메일' 섹션에 입력하는 이메일 주소

주문 상태 페이지

여기에 추가된 코드는 고객이 실물, 다운로드 및 서비스 제품을 결제한 후 표시되는 확인 페이지인 주문 상태 페이지에 삽입됩니다. 고객은 나중에 이 페이지로 돌아와서 주문 상태를 확인할 수 있습니다. 

고객에게 특정 정보를 삽입하기 위해 사용할 수 있는 태그는 여섯 가지입니다. 주문 처리 및 배송 프로필이 여러 개여서 한 구매가 분할된 경우, 각 주문에 대한 세부 정보가 구매 내에 표시됩니다.

• {orderId} – 확인된 주문의 주문 번호
• {orderSubtotal} – 확인된 주문의 소계
• {orderSubtotalCents} – 확인된 주문의 소계(센트 단위)
• {orderGrandTotal} – 확인된 주문의 총액
• {orderGrandTotalCents} – 확인된 주문의 총액(센트 단위)
• {customerEmailAddress} – 고객이 결제 시 '이메일' 섹션에 입력하는 이메일 주소

고객은 주문 상태 페이지를 반복해서 방문할 수 있으며, 이로 인해 추적 스크립트가 여러 번 실행될 수 있습니다. 추적 스크립트로 동일한 고객을 두 번 계산하지 않으려면, 결제 후 주문 상태 페이지를 처음 방문할 때만 실행할 스크립트를 {.if firstPageView} 태그와 {.end} 태그 사이에 배치하세요. 예를 들면 다음과 같습니다.

{.if firstPageView}

여기에 결제 후에만 실행하고자 하는 추적 스크립트를 추가하세요

{.end}

여기에 방문할 때마다 실행할 스크립트를 추가하세요

주문 확인 페이지의 사용자 지정 코드 마이그레이션하기

실물, 디지털 및 서비스 제품 주문 확인 페이지를 업데이트했습니다. 이러한 유형의 제품을 구매하는 고객은 주문 상태, 세부 정보 및 고객 계정 생성 옵션이 표시되는 페이지로 이동합니다.

코드 주입 패널에 이 배너가 표시되면, 원래 주문 확인 페이지에 코드 주입을 추가했으며 이 업데이트가 아직 사이트에 적용되지 않았음을 의미합니다. 

이 업데이트를 사이트에 적용하고 디지털, 실물 및 서비스 제품 결제 후 쇼핑객을 새 주문 확인 페이지로 보내려면 다음 방법을 따르세요. 

1. 주문 확인 페이지 필드에 코드를 복사합니다. 
2. 주문 상태 페이지 필드에 붙여 넣습니다. 
3. 저장을 클릭합니다. 
4. 사용자 지정 코드를 마이그레이션했습니다를 클릭합니다.

이 단계를 따르기 전까지는 구매 결제 후 모든 쇼핑객이 원래 주문 확인 페이지로 이동하게 됩니다.

페이지별 코드 주입

특정 페이지에 코드를 삽입할 수도 있습니다.

1. 페이지 패널에서 페이지 위에 커서를 올립니다.
2. 아이콘을 클릭합니다.
3. 고급을 클릭합니다.

페이지 머리말 코드 주입은 해당 페이지의 태그에 코드를 추가합니다.

블로그 페이지 설정에서 게시물 블로그 항목 코드 주입은 모든 블로그 게시물에 코드를 추가합니다.

코드 주입이 나타나는 방식은 사이트 버전에 따라 다릅니다.

미리보기에서 스크립트 비활성화

사용자 정의 코드가 때때로 사이트를 안전하게 편집하는 것을 방해할 수 있습니다. Squarespace가 문제 해결을 도와드릴 때, 미리보기에서 스크립트를 비활성화해 달라고 요청할 수 있습니다. 이는 본인이 로그인한 상태에서는 사용자 정의 코드를 볼 수 없지만, 방문자에게 사이트가 표시되는 방식에는 영향을 미치지 않는다는 것을 의미합니다.

코드가 방해하는 경우, 사이트 하단에 이 메시지가 표시됩니다.

사이트 미리보기를 로드하는 중 오류가 감지되었습니다. 이는 일반적으로 코드 주입으로 인해 발생합니다.

안전하게 편집하려면 사이트 하단의 미리보기에서 스크립트 비활성화를 클릭하세요. 메시지가 사이트 미리보기에서 스크립트가 비활성화되었습니다로 변경됩니다. 사용자 지정 코드를 확인하려면 브라우저에서 비공개 또는 시크릿 창을 새로 열고 페이지의 URL을 입력하세요.

스크립트 비활성화 메시지가 자동으로 나타나지 않는 경우:

1. 안전한 편집 URL 끝에서 /config 바로 뒤에 /safe를 입력한 다음 Enter 키를 눌러 메시지가 나타나게 합니다.
2. 이 방법이 효과가 없으면, 사용자 지정 코드를 추가한 영역을 확인하여 문제 해결 중에 일시적으로 제거합니다.

코드를 비활성화하고 나면 미리보기에서 스크립트 활성화 메시지가나타날 수 있습니다. 로그인한 상태에서 사이트를 미리 보고, 편집하고, 실행하는 데 방해가 될 수 있으므로 클릭하지 않는 것이 좋습니다. 이 메시지는 숨길 수 없지만 로그인한 경우에만 보이며 방문자에게는 보이지 않습니다.

사용자 지정 코드 수정은 Squarespace의 지원 범위에 포함되지 않습니다. 따라서 Squarespace가 설정이나 문제 해결에 관한 지원을 제공할 수 없습니다. 또한, 코드 기반 솔루션의 경우 기능이나 Squarespace와의 완전한 호환성이 보장되지 않습니다. 여기에는 반응형 디자인과 어떻게 작동하는지(특히 모바일 기기에서 어떻게 표시되는지), 모든 템플릿에서 작동하는지 여부가 포함됩니다. 사용자 지정 코드는 향후 플랫폼 업데이트 시 표시 문제를 일으킬 수 있습니다. 더 이상의 도움을 드릴 수는 없지만, 올바른 방향을 제시할 수 있는 리소스는 많습니다.

• 사용자 정의 코드를 추가하는 모범 사례를 배워 보세요.
• 서드파티(타사) 사용자 지정에 대한 일반 가이드를 읽어보세요.
• 고객 및 개발자 커뮤니티인 Squarespace Forum을 방문하세요.
• Squarespace Expert를 고용하여 내 사이트에 사용자 지정 코드를 구축하는 데 도움을 받으세요.