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

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

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

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

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

จากนั้นใช้โค้ดคอนเทนเนอร์ 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 ของ CSP

ต้องมีคำสั่งต่อไปนี้ใน CSP เพื่อใช้วิธีนี้

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

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

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

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

Google Analytics 4 (Google Analytics)

หากต้องการใช้แท็ก Google Analytics 4 (Google Analytics) CSP ต้องมีคําสั่งต่อไปนี้

สําหรับการติดตั้งใช้งาน Google Analytics 4 (Google Analytics) โดยใช้ Google Signals นั้น CSP ต้องมีคําสั่งต่อไปนี้

Google Ads

หากต้องการใช้แท็ก Conversion, รีมาร์เก็ตติ้ง หรือ Conversion Linker ของ Google Ads CSP ต้องมีคําสั่งต่อไปนี้

บีคอนข้อมูลผู้ใช้ Google Ads

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

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

Floodlight

ผู้ใช้ Floodlight สามารถเปิดใช้ CSP ได้โดยใช้การกำหนดค่าต่อไปนี้ แทนที่ค่า <FLOODLIGHT-CONFIG-ID> ด้วยรหัสผู้ลงโฆษณา Floodlight ที่เฉพาะเจาะจง หรือ * เพื่ออนุญาตให้ใช้รหัสผู้ลงโฆษณาใดก็ได้

สำหรับผู้ใช้ทุกคน

สำหรับบีคอน "สคริปต์ที่กำหนดเอง" ให้ทำดังนี้

สำหรับแท็กรูปภาพ ให้ทำดังนี้

Service Worker

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

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

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

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

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

   

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

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