Google의 새로운 태그 플랫폼 문서를 미리 확인해 주셔서 감사합니다. 이 사이트는 공개 베타 버전입니다 (의견 보내기).

콘텐츠 보안 정책과 함께 태그 관리자 사용

콘텐츠 보안 정책(CSP)은 특정 유형의 삽입 기반 공격을 방지하기 위해 널리 지원되는 웹 보안 표준으로, 개발자가 애플리케이션에 의해 로드되는 리소스를 관리할 수 있습니다. 이 가이드를 사용하여 CSP를 사용하는 사이트에 Google 태그 관리자를 배포하는 방법을 알아보세요.

CSP를 사용하도록 컨테이너 태그 사용 설정

CSP가 있는 페이지에서 Google 태그 관리자를 사용하려면 CSP가 태그 관리자 컨테이너 코드 실행을 허용해야 합니다. 이 코드는 gtm.js 스크립트를 삽입하는 인라인 자바스크립트 코드로 빌드됩니다. nonce 또는 해시를 사용하는 등 여러 가지 방법으로 이를 달성할 수 있습니다. 권장되는 방법은 서버가 각 응답에 대해 개별적으로 생성하는 추측 불가능한 임의의 값인 nonce를 사용하는 것입니다. Content-Security-Policy script-src 지시어에 nonce 값을 제공합니다.

Content-Security-Policy: script-src 'nonce-{SERVER-GENERATED-NONCE}'; img-src www.googletagmanager.com

그런 다음 인라인 태그 관리자 컨테이너 코드의 nonce 인식 버전을 사용합니다. 인라인 스크립트 요소의 nonce 속성을 다음과 동일한 값으로 설정합니다.

<!-- Google Tag Manager -->
<script nonce='{SERVER-GENERATED-NONCE}'>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

그러면 태그 관리자가 페이지에 추가하는 모든 스크립트에 nonce를 전파합니다.

CSP에서 인라인 스크립트의 해시를 제공하는 것과 같은 다른 방법으로 인라인 스크립트 실행을 사용 설정할 수도 있습니다. 자세한 내용은 CSP 문서를 참고하세요.

권장되는 nonce 또는 해시 접근 방법을 사용할 수 없는 경우 CSP의 script-src 섹션에 'unsafe-inline' 지시어를 추가하여 태그 관리자 인라인 스크립트를 사용 설정할 수 있습니다.

이 방법을 사용하려면 CSP에 다음 지시어가 필요합니다.

script-src: 'unsafe-inline' https://www.googletagmanager.com
img-src: www.googletagmanager.com

맞춤 자바스크립트 변수

맞춤 자바스크립트 변수가 구현되는 방식으로 인해, CSP가 있는 경우 CSP의 script-src 섹션에 'unsafe-eval' 지시어가 주어지지 않으면 맞춤 자바스크립트 변수는 undefined에 대해 평가합니다.

script-src: 'unsafe-eval'

미리보기 모드

Google 태그 관리자의 미리보기 모드를 사용하려면 CSP에 다음 지시어가 포함되어야 합니다.

script-src: https://tagmanager.google.com
style-src: https://tagmanager.google.com https://fonts.googleapis.com
img-src: https://ssl.gstatic.com https://www.gstatic.com
font-src: https://fonts.gstatic.com data:

유니버설 애널리틱스(Google 애널리틱스)

유니버설 애널리틱스(Google 애널리틱스) 태그를 사용하려면 CSP에 다음 지시어가 포함되어야 합니다.

script-src: https://www.google-analytics.com https://ssl.google-analytics.com
img-src: https://www.google-analytics.com
connect-src: https://www.google-analytics.com

Google 최적화 도구

Google 최적화 도구 태그를 사용하려면 CSP에 다음 지시어가 포함되어야 합니다.

script-src: https://www.google-analytics.com

Google Ads 전환 태그를 사용하려면 CSP에 다음 지시어가 포함되어야 합니다.

보안 연결의 경우 다음과 같습니다.

script-src: https://www.googleadservices.com https://www.google.com
img-src: https://googleads.g.doubleclick.net https://www.google.com

비보안 연결의 경우 다음과 같습니다.

script-src: www.googleadservices.com www.google.com
img-src: googleads.g.doubleclick.net www.google.com

Google Ads 리마케팅 태그를 사용하려면 CSP에 다음 지시어가 포함되어야 합니다.

보안 연결의 경우 다음과 같습니다.

script-src: https://www.googleadservices.com https://googleads.g.doubleclick.net https://www.google.com
img-src: https://www.google.com
frame-src: https://bid.g.doubleclick.net

비보안 연결의 경우 다음과 같습니다.

script-src: www.googleadservices.com googleads.g.doubleclick.net www.google.com
img-src: www.google.com
frame-src: bid.g.doubleclick.net

플러드라이트

플러드라이트 사용자는 다음 구성을 통해 CSP를 사용 설정할 수 있습니다. <FLOODLIGHT-CONFIG-ID> 값은 특정 플러드라이트 광고주 ID 또는 *로 대체하여 모든 광고주 ID를 허용해야 합니다.

모든 사용자의 경우 다음과 같습니다.

img-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net

태그 관리자의 '맞춤 스크립트' 비콘의 경우 다음과 같습니다.

frame-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net

이미지 태그의 경우 다음과 같습니다.

img-src: https://ad.doubleclick.net

동의 모드의 경우 다음과 같습니다.

img-src: https://ade.googlesyndication.com