หน้านี้ได้รับการแปลโดย Cloud Translation API

โหมดบุคคลที่หนึ่ง: โหลดสคริปต์ Google ผ่านการติดแท็กฝั่งเซิร์ฟเวอร์

บทความนี้มีไว้สําหรับนักพัฒนาซอฟต์แวร์ที่ใช้การติดแท็กฝั่งเซิร์ฟเวอร์และต้องการแสดงสคริปต์ Google จากเซิร์ฟเวอร์ของตนเอง

การติดแท็กฝั่งเซิร์ฟเวอร์ช่วยให้คุณโหลดสคริปต์ Google เช่น gtm.js หรือ gtag.js ได้โดยตรงจากเซิร์ฟเวอร์การติดแท็กแทนจากเซิร์ฟเวอร์ของ Google ซึ่งจะช่วยให้คุณแสดงข้อมูลในบริบทของบุคคลที่หนึ่งได้

ก่อนเริ่มต้น

คู่มือนี้จะถือว่าคุณได้ดำเนินการต่อไปนี้แล้ว

เลือกตัวเลือกการติดตั้งใช้งานเพื่อเริ่มต้น

ขั้นตอนที่ 1: กำหนดค่าไคลเอ็นต์

หากต้องการสร้างบริบทของบุคคลที่หนึ่งระหว่างคอนเทนเนอร์เว็บกับเซิร์ฟเวอร์การติดแท็ก คุณต้องโหลดสคริปต์ Google ผ่านเซิร์ฟเวอร์

วิธีโหลดสคริปต์ Google ผ่านคอนเทนเนอร์เซิร์ฟเวอร์

เปิด Google Tag Manager
ในคอนเทนเนอร์เซิร์ฟเวอร์ ให้คลิกไคลเอ็นต์
คลิกใหม่
เลือกประเภทไคลเอ็นต์ Google Tag Manager: คอนเทนเนอร์ฝั่งเว็บ
ในการกําหนดค่าไคลเอ็นต์ ให้ทําดังนี้
- เพิ่มรหัสคอนเทนเนอร์: ป้อนรหัสคอนเทนเนอร์ของคอนเทนเนอร์เว็บ Tag Manager ที่จะใช้ในเว็บไซต์
- แสดงสคริปต์ Google ทั้งหมดที่ต้องใช้โดยอัตโนมัติ: เมื่อเปิดใช้ (การตั้งค่าเริ่มต้น) เซิร์ฟเวอร์การติดแท็กจะแสดงสคริปต์ที่จําเป็นสําหรับสคริปต์ Google หลักโดยอัตโนมัติ ซึ่งทำให้คุณไม่ต้องเพิ่มคอนเทนเนอร์แต่ละรายการที่ต้องใช้สคริปต์ Google ลงในรายการที่อนุญาต หากต้องการแสดงเฉพาะคอนเทนเนอร์เริ่มต้นจากเซิร์ฟเวอร์การติดแท็ก ให้ยกเลิกการเลือกตัวเลือกนี้
- เปิดใช้การตั้งค่าเฉพาะภูมิภาค: ใช้ตัวเลือกนี้เพื่อทริกเกอร์แท็กบางรายการตามสถานที่ตั้งของผู้ใช้ ดูข้อมูลเพิ่มเติม
ตั้งชื่อลูกค้าแล้วบันทึก
เผยแพร่พื้นที่ทำงาน

ขั้นตอนที่ 2: อัปเดตโดเมนแหล่งที่มาของสคริปต์

โดยค่าเริ่มต้น Tag Manager หรือ gtag.js จะโหลดทรัพยากร Dependency จากเซิร์ฟเวอร์ที่ Google เป็นเจ้าของ เช่น https://example.com/metrics คุณต้องอัปเดต URL ของสคริปต์ในเว็บไซต์เพื่อโหลดทรัพยากร Dependency ผ่านเซิร์ฟเวอร์ของคุณเอง

วิธีโหลดโค้ด GTM ผ่านคอนเทนเนอร์เซิร์ฟเวอร์

ค้นหาโค้ด Tag Manager ที่มีอยู่ในหน้าเว็บ

แทนที่สตริง https://example.com/metrics ด้วยชื่อโดเมนของเซิร์ฟเวอร์การติดแท็กใน <head> และ <body> ของโค้ดการติดตั้ง Google Tag Manager

Head:

<!-- Google Tag Manager -->
<script>(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://example.com/metrics/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Body:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://example.com/metrics/ns.html?id=TAG_ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

ขั้นตอนที่ 3: ยืนยันแหล่งที่มาของสคริปต์

วิธีการต่อไปนี้แสดงวิธีทดสอบโดยใช้ Google Chrome คุณใช้เบราว์เซอร์ใดก็ได้ แต่ขั้นตอนอาจแตกต่างกันไป

วิธีทดสอบว่าคอนเทนเนอร์ของเซิร์ฟเวอร์โหลดทรัพยากร ดังนี้

เปิดเว็บไซต์ในแท็บใหม่ของเบราว์เซอร์
เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ ใน Google Chrome คุณสามารถคลิกขวาที่ใดก็ได้ในหน้าเว็บ แล้วเลือกตรวจสอบ
ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ให้เปิดแท็บแหล่งที่มา หน้าต่างนี้จะแสดงรายการที่เกี่ยวข้องทั้งหมดที่โหลดเมื่อคุณเปิดเว็บไซต์
- ✅ การติดตั้งใช้งานถูกต้องหากโหลด gtm.js จากแหล่งที่มาที่คุณระบุ
- ❌ หากแท็บแหล่งที่มาแสดง www.googletagmanager.com เป็นแหล่งที่มาของ gtm.js แสดงว่าระบบยังคงโหลดทรัพยากร Dependency จากเซิร์ฟเวอร์ของ Google
- ตรวจสอบว่าคุณได้แก้ไข URL ต้นทางในโค้ดแล้วหรือยัง โปรดดูขั้นตอนที่ 2
- ตรวจสอบว่ารหัสเผยแพร่อยู่

ขั้นตอนถัดไป

หากใช้โหมดความยินยอม คุณจะตั้งค่าลักษณะการทํางานของแท็กเฉพาะภูมิภาคเพื่อให้ควบคุมได้มากยิ่งขึ้น