Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

ใช้ Tag Manager กับนโยบายรักษาความปลอดภัยเนื้อหา

นโยบายรักษาความปลอดภัยเนื้อหา (CSP) เป็นมาตรฐานความปลอดภัยบนเว็บที่ได้รับการสนับสนุนอย่างกว้างขวาง ซึ่งมีจุดประสงค์เพื่อป้องกันการโจมตีแบบแทรกบางประเภทโดยให้นักพัฒนาแอปควบคุมทรัพยากรที่แอปพลิเคชันโหลดได้ ใช้คู่มือนี้เพื่อทำความเข้าใจวิธีติดตั้งใช้งาน Google Tag Manager ในเว็บไซต์ที่ใช้ CSP

เปิดใช้แท็กคอนเทนเนอร์เพื่อใช้ CSP

หากต้องการใช้ Google Tag Manager ในหน้าเว็บที่มี CSP หน้าเว็บนั้นต้องอนุญาตให้เรียกใช้โค้ดคอนเทนเนอร์ Tag Manager โค้ดนี้สร้างขึ้นเป็นโค้ด JavaScript ในบรรทัดที่แทรกสคริปต์ gtm.js ซึ่งทำได้หลายวิธี เช่น การใช้ Nonce หรือแฮช วิธีที่แนะนำคือการใช้ nonce ซึ่งควรเป็นค่าสุ่มที่คาดเดาไม่ได้ที่เซิร์ฟเวอร์สร้างขึ้นสำหรับการตอบกลับแต่ละรายการ ระบุค่า Nonce ในคำสั่ง Content-Security-Policy script-src-elem เป็น nonce-{SERVER-GENERATED-NONCE} และใช้โค้ดคอนเทนเนอร์ Tag Manager ในบรรทัดเวอร์ชันที่รับรู้ 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 -->

จากนั้น Tag Manager จะส่งต่อ Nonce ไปยังสคริปต์ที่เพิ่มลงในหน้าเว็บ

ยังมีวิธีอื่นๆ ในการเปิดใช้การเรียกใช้สคริปต์ในบรรทัด เช่น การระบุแฮชของสคริปต์ในบรรทัดใน CSP

หากวิธีใช้ Nonce หรือแฮชที่แนะนำไม่สามารถทำได้ คุณสามารถเปิดใช้สคริปต์ในบรรทัดของ Tag Manager ได้โดยเพิ่มคำสั่ง 'unsafe-inline' ลงในส่วน script-src-elem ของ CSP

เราไม่แนะนำให้ใช้ 'unsafe-inline' คุณควรพิจารณาผลกระทบด้านความปลอดภัยของการเพิ่มคำสั่งนี้ลงใน CSP อย่างรอบคอบก่อนที่จะใช้วิธีนี้

CSP ต้องอนุญาตสิ่งต่อไปนี้เพื่อใช้วิธีนี้

คำสั่ง	เนื้อหา
`script-src-elem`	`https://www.googletagmanager.com 'unsafe-inline'`
`img-src`	`https://www.googletagmanager.com`
`connect-src`	`https://www.googletagmanager.com https://www.google.com`

ตัวแปร JavaScript ที่กำหนดเอง

เนื่องจากวิธีใช้ตัวแปร JavaScript ที่กำหนดเอง ตัวแปรจะประเมินเป็น undefined เมื่อมี CSP เว้นแต่จะมีการระบุคำสั่ง 'unsafe-eval' ในส่วน script-src ของ CSP

โปรดใช้ 'unsafe-eval' เฉพาะเมื่อจำเป็นจริงๆ เพื่อหลีกเลี่ยงช่องโหว่ด้านความปลอดภัยที่อาจเกิดขึ้น

คำสั่ง	เนื้อหา
`script-src`	`'unsafe-eval'`

โหมดแสดงพรีวิว

หากต้องการใช้โหมดแสดงตัวอย่างของ Google Tag Manager, CSP ต้องอนุญาตสิ่งต่อไปนี้

คำสั่ง	เนื้อหา
`script-src-elem`	`https://www.googletagmanager.com https://tagmanager.google.com`
`style-src`	`https://www.googletagmanager.com https://tagmanager.google.com https://fonts.googleapis.com`
`img-src`	`https://www.googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com`
`font-src`	`https://fonts.gstatic.com data:`

Google Analytics

หากต้องการใช้ Google Analytics นโยบายรักษาความปลอดภัยเนื้อหา (CSP) ต้องอนุญาตสิ่งต่อไปนี้

คำสั่ง	เนื้อหา
`script-src-elem`	`https://www.googletagmanager.com`
`img-src`	`https://www.googletagmanager.com https://.google-analytics.com https://.google.com https://.google.<TLD> https://.g.doubleclick.net`
`connect-src`	`https://www.googletagmanager.com https://.google-analytics.com https://.google.com https://.google.<TLD> https://.g.doubleclick.net https://pagead2.googlesyndication.com`
`frame-src`	`https://www.googletagmanager.com`

หากต้องการใช้ Google Analytics โดยไม่มีฟีเจอร์ Google Ads นโยบายรักษาความปลอดภัยเนื้อหา (CSP) ต้องอนุญาตสิ่งต่อไปนี้

คำสั่ง	เนื้อหา
`script-src-elem`	`https://www.googletagmanager.com`
`img-src`	`https://www.googletagmanager.com https://*.google-analytics.com`
`connect-src`	`https://www.googletagmanager.com https://.google-analytics.com https://.google.com`

Google Ads

หากต้องการใช้แท็ก Conversion, รีมาร์เก็ตติ้ง หรือ Conversion Linker ของ Google Ads นโยบาย CSP ต้องอนุญาตสิ่งต่อไปนี้

คำสั่ง	เนื้อหา
`script-src-elem`	`https://www.googletagmanager.com https://www.googleadservices.com https://www.google.com`
`img-src`	`https://www.googletagmanager.com https://www.googleadservices.com https://googleads.g.doubleclick.net https://pagead2.googlesyndication.com https://www.google.com https://www.google.<TLD>`
`connect-src`	`https://www.googletagmanager.com https://www.googleadservices.com https://googleads.g.doubleclick.net https://pagead2.googlesyndication.com https://www.google.com https://www.google.<TLD> https://ad.doubleclick.net`
`frame-src`	`https://www.googletagmanager.com`

ข้อมูลผู้ใช้ Google Ads

หากต้องการใช้บีคอนข้อมูลผู้ใช้ Google Ads เมื่อทำงานในบริบทที่ปลอดภัย CSP ต้องอนุญาตสิ่งต่อไปนี้

คำสั่ง	เนื้อหา
`script-src-elem`	`https://www.googletagmanager.com`
`connect-src`	`https://www.google.com`
`frame-src`	`https://www.googletagmanager.com`

บีคอนข้อมูลผู้ใช้ Google Ads ไม่ทำงานในบริบทที่ไม่ปลอดภัย ดังนั้นการกำหนดค่า CSP ในกรณีดังกล่าวจึงไม่เกี่ยวข้อง

Floodlight

หากต้องการใช้ Floodlight, CSP ต้องอนุญาตสิ่งต่อไปนี้

คำสั่ง	เนื้อหา
`img-src`	`https://www.googletagmanager.com https://ad.doubleclick.net https://ade.googlesyndication.com https://adservice.google.com`
`connect-src`	`https://pagead2.googlesyndication.com https://www.google.com https://www.googleadservices.com https://ad.doubleclick.net`
`frame-src`	`https://www.googletagmanager.com`

หากต้องการใช้สคริปต์ที่กำหนดเองของ Floodlight, CSP ต้องอนุญาตสิ่งต่อไปนี้ด้วย (นอกเหนือจากที่กล่าวไปก่อนหน้านี้)

คำสั่ง	เนื้อหา
`frame-src`	`https://*.fls.doubleclick.net`

Merchant Center

หากต้องการใช้ Merchant Center, CSP ต้องอนุญาตสิ่งต่อไปนี้

คำสั่ง	เนื้อหา
`script-src-elem`	`https://www.googletagmanager.com`
`img-src`	`https://*.merchant-center-analytics.goog`
`connect-src`	`https://*.merchant-center-analytics.goog`

เกตเวย์แท็ก Google สำหรับผู้ลงโฆษณา

เมื่อใช้เกตเวย์แท็ก Google สำหรับผู้ลงโฆษณา ระบบจะโหลดแท็ก Google จากเส้นทางการวัดผลในเว็บไซต์และส่งข้อมูลไปยังเส้นทางดังกล่าว (เช่น https://www.example.com/metrics) แท็กบางแท็กยังคงส่งคำขอไปยังโดเมน Google ดังนั้นให้เก็บคำสั่งที่ระบุไว้สำหรับแต่ละผลิตภัณฑ์ และอนุญาตสิ่งต่อไปนี้ด้วย

คำสั่ง	เนื้อหา	วัตถุประสงค์
`script-src-elem`	`'self'`	การโหลดแท็ก Google จากเส้นทางการวัดผล
`img-src`	`'self'`	คำขอการวัดผล
`connect-src`	`'self'`	คำขอการวัดผล
`worker-src`	`'self'`	Service Worker

ตรวจสอบว่า CDN หรือเว็บเซิร์ฟเวอร์ไม่ได้เพิ่มส่วนหัว Content-Security-Policy ของเว็บไซต์ลงในการตอบกลับจากเส้นทางการวัดผล มิฉะนั้น เบราว์เซอร์อาจบล็อก Service Worker ได้

การติดแท็กฝั่งเซิร์ฟเวอร์

เมื่อแท็ก Google ส่งข้อมูลไปยังคอนเทนเนอร์ของเซิร์ฟเวอร์ CSP ต้องอนุญาตเซิร์ฟเวอร์การติดแท็กด้วย คำสั่งเหล่านี้ไม่ได้แทนที่คำสั่งที่ระบุไว้สำหรับผลิตภัณฑ์แต่ละรายการ เช่น https://www.googletagmanager.com สิ่งที่คุณเพิ่มจะขึ้นอยู่กับตำแหน่งที่โฮสต์เซิร์ฟเวอร์การติดแท็ก ดังนี้

คำสั่ง	การตั้งค่าต้นทางเดียวกัน	การตั้งค่าโดเมนย่อย	วัตถุประสงค์
`img-src`	`'self'`	`https://TAGGING_SERVER_DOMAIN`	คำขอการวัดผล
`connect-src`	`'self'`	`https://TAGGING_SERVER_DOMAIN`	คำขอการวัดผล
`frame-src`	`'self'`	`https://TAGGING_SERVER_DOMAIN`	Service Worker
`worker-src`	`'self'`	ไม่จำเป็น	Service Worker
`script-src-elem`	`'self'`	`https://TAGGING_SERVER_DOMAIN`	เฉพาะในกรณีที่คุณโหลดแท็ก Google จากเซิร์ฟเวอร์การติดแท็ก

ในการตั้งค่าแบบต้นทางเดียวกัน เซิร์ฟเวอร์การติดแท็กจะแสดงจากเส้นทางในเว็บไซต์ของคุณ (เช่น https://www.example.com/metrics) ในการตั้งค่าโดเมนย่อย ให้แทนที่ TAGGING_SERVER_DOMAIN ด้วยโดเมนเซิร์ฟเวอร์การติดแท็ก (เช่น sgtm.example.com)

ในการตั้งค่าต้นทางเดียวกัน ให้ตรวจสอบว่า CDN หรือเว็บเซิร์ฟเวอร์ไม่ได้เพิ่มส่วนหัว Content-Security-Policy ของเว็บไซต์ลงในการตอบกลับจากเส้นทางการติดแท็ก มิฉะนั้น เบราว์เซอร์อาจบล็อก Service Worker ได้

Service Worker

แท็ก Google จะใช้ Service Worker ก็ต่อเมื่อคุณใช้เกตเวย์แท็ก Google สำหรับผู้ลงโฆษณาหรือการติดแท็กฝั่งเซิร์ฟเวอร์เท่านั้น ดูคำสั่งที่การตั้งค่าแต่ละรายการต้องการได้ที่เกตเวย์แท็ก Google สำหรับผู้ลงโฆษณาและการติดแท็กฝั่งเซิร์ฟเวอร์ หากใช้ทั้ง 2 อย่าง CSP ต้องอนุญาตทั้ง 2 อย่าง

แก้ปัญหาด้วยผู้ช่วยแท็ก

หากต้องการแก้ปัญหาเกี่ยวกับนโยบายรักษาความปลอดภัยเนื้อหา (CSP) ให้ใช้ผู้ช่วยแท็ก ผู้ช่วยแท็กจะแสดงรายการทรัพยากรที่ถูกบล็อกโดยนโยบายรักษาความปลอดภัยเนื้อหา

เปิดผู้ช่วยแท็ก แล้วป้อน URL ของเว็บไซต์ เว็บไซต์จะเปิดขึ้นในแท็บใหม่
หากนโยบายรักษาความปลอดภัยเนื้อหาในหน้าเว็บกำลังบล็อกทรัพยากร ปัญหา CSP จะแสดงในส่วนปัญหาเกี่ยวกับหน้าเว็บของผู้ช่วยแท็ก
เลือกดูปัญหาข้างปัญหา CSP เพื่อดูรายการทรัพยากรที่ถูกบล็อกทั้งหมดในหน้าเว็บ
เพิ่มทรัพยากรที่ถูกบล็อกทั้งหมดลงในนโยบายรักษาความปลอดภัยเนื้อหา