วิเคราะห์การกําหนดค่าแท็กที่มีอยู่

ก่อนติดตั้งแท็กใหม่ ให้ประเมินแท็กที่มีอยู่แล้วในเว็บไซต์หรือแอปบนอุปกรณ์เคลื่อนที่ (หากมี) เพื่อไม่ให้เพิ่มแท็กที่ซ้ำซ้อน เอกสารนี้อธิบายวิธีประเมินแท็กที่มีอยู่

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

หากต้องการประเมินแท็กที่มีอยู่ ให้ใช้แหล่งข้อมูลต่อไปนี้

• ผู้ช่วยแท็กของ Google
• ฟีเจอร์ภายใน Google Tag Manager
• เทคนิคการตรวจสอบโค้ดด้วยตนเอง

ผู้ช่วยแท็ก

ผู้ช่วยแท็กของ Google เป็นเครื่องมือวิเคราะห์แท็กสําหรับการติดตั้งแท็ก Google เมื่อเปิดใช้ ผู้ช่วยแท็กจะแสดงแผงแก้ไขข้อบกพร่องในเบราว์เซอร์เพื่อให้คุณตรวจสอบได้ว่าคำสั่ง gtag.js ใดเริ่มทำงานแล้วและเริ่มทำงานในลำดับใด ผู้ช่วยแท็กจะแสดงข้อมูลที่ส่งไปยังชั้นข้อมูลและเหตุการณ์ที่ทำให้เกิดการแลกเปลี่ยนข้อมูลดังกล่าว นอกจากนี้ยังแสดง Hit (คำขอ HTTP) และพารามิเตอร์ที่เกี่ยวข้องด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับผู้ช่วยแท็ก

Tag Manager

คุณสามารถตรวจสอบบัญชีดูแลจัดการและคอนเทนเนอร์ Tag Manager เพื่อวิเคราะห์การกำหนดค่าแท็กที่มีอยู่ได้ นอกจากนี้ Tag Manager ยังมีโหมดแสดงตัวอย่าง ซึ่งมีฟังก์ชันการทำงานคล้ายกับผู้ช่วยแท็ก

ค้นหา

ใช้แถบค้นหาในคอนเทนเนอร์ Tag Manager เพื่อค้นหาแท็ก การตั้งค่า หรือบรรทัดโค้ดในแท็ก ทริกเกอร์ และตัวแปร แถบค้นหาเป็นวิธีที่ยอดเยี่ยมในการระบุแท็กที่อาจมีการตั้งค่าหรือโค้ดที่คุณต้องประเมินอีกครั้ง

เวอร์ชัน

ฟีเจอร์เวอร์ชันใน Tag Manager จะแสดงสรุปการกำหนดค่าคอนเทนเนอร์ที่มีอยู่

1. ใน Tag Manager ให้คลิกเวอร์ชัน
2. คลิกเวอร์ชันล่าสุดในรายการเพื่อดูสถานะปัจจุบันของคอนเทนเนอร์

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 Ads
• optimize.js – ใช้สำหรับแท็ก Google Optimize
• ระบบจัดการแท็กจากบุคคลที่สามที่อาจมีแท็ก Google มองหาระบบจัดการแท็กของบุคคลที่สามที่อาจเป็นไปได้ในซอร์สโค้ด เช่น utag.js หรือ _satellite

แท็ก Google

หากคุณเพิ่มข้อมูลโค้ดแท็ก Google ลงในหน้าเว็บ คุณสามารถตรวจสอบแท็กเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวัตถุประสงค์ในการใช้งานแท็กได้ ข้อมูลโค้ดแท็ก Google ปัจจุบันมีลักษณะดังตัวอย่างต่อไปนี้

  <!-- Google tag -->
  <script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  </script>

ข้อมูลโค้ดจากเวอร์ชันก่อนหน้าจะมีลักษณะดังตัวอย่างต่อไปนี้

  <!-- Google tag (gtag.js) - Prior version snippet -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA-XXXXXX-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'GA-XXXXXX-1');
  </script>

ในการติดตั้งใช้งานที่ใช้เวอร์ชันก่อนหน้า คุณอาจเห็นบรรทัด gtag('config',...) หลายบรรทัดสำหรับผลิตภัณฑ์และบัญชีเพิ่มเติม เช่น

  <!-- Google tag (gtag.js) - Prior version snippet -->
  <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', 'GA-XXXXXX-1');
    gtag('config', 'GA-YYYYYY-2');
    gtag('config', 'TAG_ID');
  </script>

บรรทัด config แต่ละบรรทัดในเวอร์ชันก่อนหน้าจะมีคำนำหน้าผลิตภัณฑ์ (ซึ่งบ่งบอกว่ากำลังกำหนดค่าผลิตภัณฑ์ใด) ตามด้วยรหัสของบัญชีที่กำลังกำหนดค่า ดูข้อมูลเพิ่มเติมเกี่ยวกับคำนำหน้าผลิตภัณฑ์

คำนำหน้าผลิตภัณฑ์สำหรับแท็ก Google

หน้าเว็บที่กำหนดค่าด้วยแท็ก Google อาจใช้รหัสคอนเทนเนอร์ GTM- หรือรหัสเฉพาะปลายทาง เช่น G- (Google Analytics), AW- (Google Ads), DC- (Floodlight) หรือ MC- (Merchant Center) หากหน้าเว็บโหลดแท็ก Google ที่มีรหัสใดรหัสหนึ่งเหล่านี้อยู่แล้ว คุณสามารถเชื่อมต่อปลายทางเพิ่มเติมใน Google Tag Manager แทนการเพิ่มข้อมูลโค้ดแท็กอื่นลงในหน้าเว็บ ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่ารหัสแท็ก

Google Tag Manager

หน้าเว็บที่กำหนดค่าด้วย Tag Manager จะมีแท็กคอนเทนเนอร์ติดตั้งอยู่ซึ่งมีลักษณะคล้ายกับตัวอย่างต่อไปนี้ คุณสามารถระบุรหัสคอนเทนเนอร์ของ Tag Manager ได้โดยตรวจสอบโค้ดคอนเทนเนอร์ รหัสคอนเทนเนอร์จะขึ้นต้นด้วย "GTM-" ดูตัวอย่างตำแหน่งของรหัสคอนเทนเนอร์ได้ที่ด้านล่าง

<!-- Google tag -->
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

ข้อมูลโค้ดจากเวอร์ชันก่อนหน้าจะมีลักษณะดังตัวอย่างต่อไปนี้

<!-- 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 แล้วคลิก search เพื่อค้นหารหัสนี้ จากนั้นคุณจะตรวจสอบ[การกําหนดค่าแท็ก ทริกเกอร์ และตัวแปร]การกําหนดค่าแท็กสําหรับเว็บไซต์ได้