ก่อนติดตั้งแท็กใหม่ ให้ประเมินแท็กที่มีอยู่แล้วในเว็บไซต์หรือแอปบนอุปกรณ์เคลื่อนที่ (หากมี) จะได้ไม่ต้องเพิ่มแท็กซ้ำซ้อน บทความนี้จะอธิบายถึงวิธีประเมินแท็กที่มีอยู่
ถึงแม้ว่าจะประเมินเบื้องต้นไปแล้ว คุณก็ควรนำการตรวจสอบมาใช้เป็นส่วนหนึ่งของกระบวนการจัดการแท็กมาตรฐาน การประเมินแท็กที่ทำงานในเว็บไซต์หรือแอปเป็นประจำมีความสำคัญต่อการคุ้มครองข้อมูลและความปลอดภัย
หากต้องการประเมินแท็กที่มีอยู่ ให้ใช้แหล่งข้อมูลต่อไปนี้
- ผู้ช่วยแท็กของ Google
- ฟีเจอร์ใน Google Tag Manager
- เทคนิคการตรวจสอบโค้ดด้วยตนเอง
ผู้ช่วยแท็ก
ผู้ช่วยแท็กของ Google เป็นเครื่องมือวิเคราะห์แท็ก สําหรับการติดตั้งแท็ก Google (gtag.js) เมื่อเปิดใช้ ผู้ช่วยแท็กจะแสดงแผงแก้ไขข้อบกพร่องในเบราว์เซอร์เพื่อให้คุณตรวจสอบได้ว่าคำสั่ง gtag.js ใดเริ่มทำงานแล้วและอยู่ในลำดับใด ผู้ช่วยแท็กจะแสดงข้อมูลที่ส่งไปยังชั้นข้อมูลและเหตุการณ์ที่ทําให้เกิดการแลกเปลี่ยนข้อมูลเหล่านั้น และยังแสดง Hit (คำขอ HTTP) และพารามิเตอร์ที่เกี่ยวข้องอีกด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับผู้ช่วยแท็ก
Tag Manager
คุณสามารถตรวจสอบบัญชีและคอนเทนเนอร์ Tag Manager เพื่อวิเคราะห์การกำหนดค่าแท็กที่มีอยู่ได้ นอกจากนี้ Tag Manager ยังมีโหมดแสดงตัวอย่าง ซึ่งมีฟังก์ชันคล้ายกับผู้ช่วยแท็กด้วย
ค้นหา
ใช้แถบค้นหาในคอนเทนเนอร์ Tag Manager เพื่อค้นหาแท็ก การตั้งค่า หรือบรรทัดของโค้ดในแท็ก ทริกเกอร์ และตัวแปร แถบค้นหาเป็นวิธีที่ยอดเยี่ยมในการ ระบุแท็กที่อาจมีการตั้งค่าหรือโค้ดที่คุณต้องประเมินอีกครั้ง
ฉบับ
ฟีเจอร์เวอร์ชันใน Tag Manager แสดงสรุปของการกำหนดค่าคอนเทนเนอร์ที่มีอยู่
- คลิกเวอร์ชันใน Tag Manager
- คลิกเวอร์ชันล่าสุดในรายการเพื่อดูสถานะปัจจุบันของคอนเทนเนอร์
Tag Manager จะคืนค่าแท็ก ทริกเกอร์ ตัวแปร และเทมเพลตที่กำหนดเองในมุมมองนี้
โหมดแสดงตัวอย่าง
โหมดแสดงตัวอย่างใน Tag Manager แสดงแท็กที่เริ่มทํางานในหน้าเว็บ เหตุการณ์ใดที่ทริกเกอร์แท็กเหล่านั้น และข้อมูลที่มีการพุชไปยังชั้นข้อมูล โหมดแสดงตัวอย่างทำงานในลักษณะเดียวกันกับผู้ช่วยแท็ก ดูข้อมูลเพิ่มเติมเกี่ยวกับโหมดแสดงตัวอย่าง
การตรวจสอบโค้ดด้วยตนเอง
หากต้องการการวิเคราะห์การกำหนดค่าแท็กที่มีอยู่อย่างละเอียดมากขึ้น ให้ลองตรวจสอบโค้ดด้วยตนเอง ค้นหาซอร์สโค้ดของแท็กทั่วไปเหล่านี้ เพื่อช่วยระบุการกำหนดค่าแท็กที่เป็นไปได้
gtag(
– นี่คือการเปิดสำหรับคำสั่งgtag()
และส่วนย่อยโค้ดเหล่านี้มักมีการใช้เครื่องมือเพิ่มเติมgoogletagmanager.com
– โดเมนนี้จะโหลดทั้งฟังก์ชันการทำงานของ Tag Manager และ gtag.js และสามารถช่วยคุณค้นหาแท็กประเภทเหล่านั้นได้
หากมี gtag.js หรือ Google Tag Manager อยู่แล้ว ก็อาจอัปเดตแท็กหรือการใช้เครื่องมือที่มีอยู่แทนการติดตั้งใช้งานการกําหนดค่าใหม่ได้
dataLayer
– สามารถใช้เพื่อดูว่ามีการสร้างโค้ดชั้นข้อมูลหรือไม่ และการเรียกใช้dataLayer.push()
รายการพร้อมการใช้เครื่องมือสำหรับเหตุการณ์ที่เฉพาะเจาะจงanalytics.js
หรือga.js
– ชื่อไฟล์ของไลบรารีที่ใช้สำหรับการติดตั้งใช้งาน Google Analytics แบบเดิมconversion.js
หรือconversion_async.js
- ชื่อไฟล์ของไลบรารีที่ใช้สำหรับการวัด Conversion ของ Google Adsoptimize.js
– ใช้สำหรับแท็ก Google Optimize- ระบบจัดการแท็กของบุคคลที่สามที่อาจมีแท็ก Google ดูในซอร์สโค้ดเพื่อหาระบบการจัดการแท็กที่อาจเป็นของบุคคลที่สาม เช่น
utag.js
หรือ_satellite
แท็ก Google (gtag.js)
หากเพิ่มข้อมูลโค้ดแท็ก Google ลงในหน้าเว็บแล้ว คุณสามารถตรวจสอบแท็กเพื่อหาข้อมูลเพิ่มเติมเกี่ยวกับวัตถุประสงค์การใช้งานได้ แท็กหลักจะมีลักษณะ ดังตัวอย่างต่อไปนี้
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXX-1');
</script>
คุณอาจเห็น gtag('config',...)
หลายบรรทัดสำหรับผลิตภัณฑ์และบัญชีเพิ่มเติม เช่น
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXX-1');
gtag('config', 'UA-YYYYYY-2');
gtag('config', 'TAG_ID');
</script>
config
แต่ละบรรทัดจะมีคำนำหน้าผลิตภัณฑ์ (ซึ่งเป็นสัญญาณว่ากำลังกำหนดค่าผลิตภัณฑ์ใด) ตามด้วยรหัสสำหรับบัญชีที่กำหนดค่าอยู่ คุณดูข้อมูลเพิ่มเติมเกี่ยวกับคำนำหน้าผลิตภัณฑ์ได้ที่ด้านล่าง
คำนำหน้าผลิตภัณฑ์สำหรับแท็ก Google
รหัสแท็กจะระบุแท็ก Google แท็ก Google รายการเดียวมีรหัสแท็กได้หลายรหัส ตัวอย่างเช่น หากคุณใช้ Google Ads ตอนนี้แท็กจะมีรหัส 2 รหัส ได้แก่ รหัสเดิม 1 รหัส (AW) และรหัสแท็ก Google 1 รหัส (GT)![หน้าจอแสดงแท็ก Google ภายใน Google Ads พร้อมรหัสแท็ก 2 รหัส](https://developers-dot-devsite-v2-prod.appspot.com/static/tag-platform/images/manage-google-tag.png?authuser=9&hl=th)
คำนำหน้า | ประเภทรหัส | คำอธิบาย |
---|---|---|
GT-XXXXXX | แท็ก Google | แท็ก Google ที่สร้างขึ้นใหม่แต่ละแท็กจะมีคํานําหน้า GT และรหัสที่ไม่ซ้ำกัน |
G-XXXXXX | แท็ก Google (คํานําหน้าเดิม) | แท็ก Google Analytics 4 คือแท็ก Google ที่มีคํานําหน้า G และรหัสที่ไม่ซ้ำกัน |
AW-XXXXXX | แท็ก Google (คํานําหน้าเดิม) | แท็ก Google Ads คือแท็ก Google ที่มีคำนำหน้า AW และรหัสที่ไม่ซ้ำกัน |
DC-XXXXXX | แท็ก Google (คํานําหน้าเดิม) | แท็ก Google Floodlight คือแท็ก Google ที่มีคำนำหน้า DC และรหัสที่ไม่ซ้ำกัน |
หน้าเว็บที่กําหนดค่าด้วยแท็ก Google อาจมีรหัสที่นําหน้า "G" หรือ "AW" คํานําหน้า "G" หมายความว่าแท็ก Google เดิมสร้างขึ้นใน Google Analytics คํานําหน้า "AW" หมายความว่าแท็ก Google สร้างขึ้นใน Google AdWords ตั้งแต่แรก รหัสทั้ง 2 รหัสเป็นรหัสแท็กคนละเวอร์ชันและใช้แทนกันได้ หากคุณเห็นรหัสที่มีคำนำหน้าหนึ่ง คุณก็ไม่จำเป็นต้องเพิ่มรหัสด้วยคำนำหน้าอื่น ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่ารหัสแท็ก
Google Tag Manager
หน้าเว็บที่กำหนดค่าด้วย Tag Manager จะมีคอนเทนเนอร์แท็กติดตั้งอยู่ซึ่งมีลักษณะคล้ายกับตัวอย่างต่อไปนี้ คุณระบุรหัสคอนเทนเนอร์ของ Tag Manager ได้โดยการตรวจสอบโค้ดคอนเทนเนอร์ รหัสคอนเทนเนอร์ขึ้นต้นด้วย "GTM-
" และไฮไลต์ตัวอย่างตําแหน่งรหัสคอนเทนเนอร์ไว้ด้านล่างนี้
<!-- 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://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<:!-- End Google Tag Manager -->
เมื่อคุณมีรหัสคอนเทนเนอร์แล้ว ให้เปิดหน้าจอบัญชี Google Tag Manager และคลิก เพื่อค้นหารหัสนี้ จากนั้นคุณสามารถตรวจสอบการกำหนดค่าแท็ก ทริกเกอร์ และตัวแปรของเว็บไซต์