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

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

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

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

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

คำสั่ง เนื้อหา
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 โดยไม่มีฟีเจอร์โฆษณาใดๆ 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

หากต้องการใช้แท็ก 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 เมื่อเรียกใช้ในบริบทที่ปลอดภัย 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

Service Worker

หากต้องการใช้ Service Worker สำหรับการจับคู่ที่ปรับปรุงแล้ว บีคอนข้อมูลผู้ใช้ และ Conversion ของโฆษณา CSP ต้องอนุญาตสิ่งต่อไปนี้

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

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

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

  1. เปิดผู้ช่วยแท็ก แล้วป้อน URL ของเว็บไซต์ เว็บไซต์จะเปิดขึ้นในแท็บใหม่

  2. หากนโยบายรักษาความปลอดภัยเนื้อหาในหน้าเว็บของคุณบล็อกทรัพยากร ปัญหา CSP จะแสดงในส่วนปัญหาในหน้าเว็บของผู้ช่วยแท็ก

    ภาพหน้าจอของผู้ช่วยแท็กที่แสดงปัญหา CSP

  3. เลือกดูปัญหาข้างปัญหา CSP เพื่อดูรายการทรัพยากรทั้งหมดที่ถูกบล็อกในหน้าเว็บ ภาพหน้าจอผู้ช่วยแท็กที่แสดงแถบเลื่อนปัญหา CSP

  4. เพิ่มทรัพยากรที่ถูกบล็อกทั้งหมดลงในนโยบายรักษาความปลอดภัยเนื้อหา