แนวทางปฏิบัติแนะนำสำหรับแท็กและเครื่องจัดการแท็ก

เพิ่มประสิทธิภาพแท็กและ Tag Manager สำหรับ Core Web Vitals

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

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

บทความนี้จะกล่าวถึงเทคนิคในการเพิ่มประสิทธิภาพแท็กและ Tag Manager และ Web Vitals แม้ว่าบทความนี้จะอ้างอิงถึง Google Tag Manager แนวคิดหลายๆ อย่างที่กล่าวถึงกันยังสามารถนำไปใช้ประโยชน์กับเครื่องจัดการแท็กอื่นๆ ได้ด้วย

ผลกระทบต่อ Core Web Vitals

Tag Manager มักส่งผลต่อ Core Web Vitals โดยอ้อมโดยใช้ทรัพยากรที่จําเป็นในการโหลดหน้าเว็บอย่างรวดเร็วและทำให้ปรับเปลี่ยนตามนั้นอยู่เสมอ แบนด์วิดท์อาจใช้ในการดาวน์โหลด JavaScript ของ Tag Manager สำหรับเว็บไซต์หรือในการเรียกใช้ครั้งต่อๆ ไปได้ เวลา CPU ในเทรดหลักอาจใช้ในการประเมินและเรียกใช้ JavaScript ที่อยู่ภายในเครื่องจัดการแท็กและแท็ก

การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) เสี่ยงต่อการถูกช่วงชิงแบนด์วิดท์ระหว่างการโหลดหน้าเว็บที่สำคัญ นอกจากนี้ การบล็อกเทรดหลักอาจเลื่อนเวลาการแสดงผล LCP ได้ด้วย

Cumulative Layout Shift (CLS) อาจได้รับผลกระทบ ไม่ว่าจะเป็นความล่าช้าในการโหลดทรัพยากรที่สำคัญก่อนการแสดงผลครั้งแรก หรือจาก Tag Manager ที่แทรกเนื้อหาลงในหน้า

การโต้ตอบกับ Next Paint (INP) มีแนวโน้มที่จะเกิดการช่วงชิง CPU ในเทรดหลัก และเราได้เห็นความสัมพันธ์ระหว่างขนาดของ Tag Manager และคะแนน INP ที่ต่ำ

ประเภทแท็ก

ผลกระทบที่แท็กมีต่อประสิทธิภาพจะแตกต่างกันไปตามประเภทแท็ก โดยทั่วไปแล้ว รูปภาพ แท็ก ("พิกเซล") มีประสิทธิภาพสูงสุด รองลงมาคือเทมเพลตที่กำหนดเอง และ สุดท้ายคือแท็ก HTML ที่กำหนดเอง แท็กผู้ให้บริการจะแตกต่างกันไปตามฟังก์ชันการทำงาน อนุญาต

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

เมื่อนึกถึงแท็ก ให้คำนึงถึงการปรับขนาด: ผลกระทบด้านประสิทธิภาพของ แท็กเดียวอาจไม่มีนัยสำคัญ แต่อาจมีนัยสำคัญในกรณีที่แท็ก 10 แท็กหรือหลายร้อยแท็ก เหล่านี้ใช้ในหน้าเดียวกัน

สคริปต์บางรายการไม่ควรโหลดโดยใช้เครื่องจัดการแท็ก

โดยทั่วไปแล้ว เครื่องจัดการแท็กไม่ใช่กลไกที่ดีในการโหลดทรัพยากรที่ ปรับใช้ภาพหรือฟังก์ชันการทำงานของประสบการณ์ของผู้ใช้ในทันที ตัวอย่างเช่น การแจ้งเตือนเกี่ยวกับคุกกี้ รูปภาพหลัก หรือฟีเจอร์ของเว็บไซต์ ใช้ Tag Manager เพื่อ การโหลดทรัพยากรเหล่านี้มักจะทำให้การนำส่งล่าช้า สิ่งนี้ไม่ดีสำหรับผู้ใช้ และยังเพิ่มเมตริกต่างๆ ได้ เช่น LCP และ CLS นอกจากนี้ โปรด โปรดทราบว่าผู้ใช้บางรายอาจบล็อกเครื่องจัดการแท็ก การใช้ Tag Manager เพื่อใช้งาน UX อาจทำให้เว็บไซต์ใช้งานไม่ได้สำหรับผู้ใช้บางราย

โปรดระวังแท็ก HTML ที่กำหนดเอง

HTML ที่กำหนดเอง แท็กทั้งหมด มีมาหลายปีแล้วและมีการใช้งานมากในเว็บไซต์ส่วนใหญ่ HTML ที่กำหนดเอง แท็กจะอนุญาตให้คุณป้อนรหัสของคุณเองโดยมีข้อจำกัดบางประการ แม้ว่าจะมีชื่อ การใช้งานหลักของแท็กนี้คือการเพิ่มเอลิเมนต์ <script> ที่กำหนดเองลงในหน้าเว็บ

แท็ก HTML ที่กำหนดเองสามารถนำไปใช้ได้หลากหลายวิธี พร้อมทั้งผลที่มีต่อประสิทธิภาพ แตกต่างกันอย่างมาก เมื่อวัดประสิทธิภาพของเว็บไซต์ โปรดทราบว่า เครื่องมือส่วนใหญ่จะระบุแหล่งที่มาของผลกระทบด้านประสิทธิภาพของแท็ก HTML ที่กำหนดเองเป็นแท็ก ที่แทรกแท็กเข้าไป แทนที่จะเป็นตัวแท็กเอง

แท็ก HTML ที่กำหนดเองสามารถแทรกองค์ประกอบลงในหน้ารอบๆ ได้ แอ็กชัน การแทรกองค์ประกอบลงในหน้าเว็บ อาจเป็นสาเหตุของปัญหาด้านประสิทธิภาพ และ ในบางกรณี อาจส่งผลให้เกิดการเปลี่ยนเลย์เอาต์ด้วย

• โดยทั่วไป ถ้าองค์ประกอบหนึ่งถูกแทรกลงในหน้าเว็บ เบราว์เซอร์ ต้องคำนวณขนาดและตำแหน่งของแต่ละรายการบนหน้าเว็บใหม่ กระบวนการนี้ เป็นที่รู้จักในชื่อ layout ผลกระทบด้านประสิทธิภาพของเลย์เอาต์เดี่ยวๆ เพียงเล็กน้อย แต่เมื่อเกิดขึ้นแล้ว มากเกินไปอาจกลายเป็นสาเหตุของปัญหาด้านประสิทธิภาพได้ ผลกระทบที่เกิดขึ้น ปรากฏการณ์จะมีขนาดใหญ่ขึ้นในอุปกรณ์ระดับล่างและหน้าเว็บที่มีจำนวนโฆษณา องค์ประกอบ DOM
• หากมีการแทรกองค์ประกอบของหน้าที่มองเห็นได้ลงใน DOM หลังจากสิ่งที่อยู่รอบๆ มีการแสดงผลพื้นที่แล้ว อาจทำให้เลย์เอาต์เกิดการเปลี่ยนแปลงได้ ปรากฏการณ์นี้ ไม่ใช่ของ Tag Manager โดยเฉพาะ แต่เป็นเพราะแท็กมักโหลดในภายหลัง โฆษณาในส่วนอื่นๆ ของหน้าเว็บ ปกติแล้วจะมีการแทรกเนื้อหาลงในส่วน DOM หลังจากที่แสดงผลหน้าเว็บรอบๆ แล้ว

ลองใช้เทมเพลตที่กำหนดเอง

การรองรับเทมเพลตที่กำหนดเอง ทำงานเหมือนกับแท็ก HTML ที่กำหนดเอง แต่สร้างขึ้นด้วยแซนด์บ็อกซ์ เวอร์ชัน JavaScript ที่มี API สำหรับการใช้งานทั่วไป เช่น การแทรกสคริปต์และการแทรกพิกเซล ซึ่งมีความหมายตามชื่อเลย สร้างเทมเพลตโดยผู้ใช้ขั้นสูงที่สามารถ สร้างเทมเพลตนี้อย่างมีประสิทธิภาพ ในใจ จากนั้นผู้ใช้ด้านเทคนิคน้อยลงจะใช้เทมเพลตได้ การตั้งค่านี้มักจะปลอดภัยกว่า มากกว่าให้สิทธิ์เข้าถึง HTML ที่กำหนดเองโดยสมบูรณ์

เนื่องจากเทมเพลตที่กำหนดเองมีข้อจำกัด แท็กเหล่านี้มีมาก มีโอกาสน้อยลงที่จะแสดงปัญหาด้านประสิทธิภาพหรือความปลอดภัย แต่สำหรับครีเอทีฟโฆษณา เทมเพลตที่กำหนดเองจะใช้ไม่ได้กับกรณีการใช้งานบางกรณี

แทรกสคริปต์ให้ถูกต้อง

การใช้เครื่องจัดการแท็กเพื่อแทรกสคริปต์เป็นกรณีการใช้งานที่พบได้บ่อยมาก วิธีการที่แนะนำคือ ใช้เทมเพลตที่กำหนดเองและ injectScript API

สำหรับข้อมูลเกี่ยวกับการใช้ injectScript API เพื่อแปลง HTML ที่กำหนดเองที่มีอยู่ โปรดดูแปลงแท็กที่มีอยู่

หากคุณต้องใช้แท็ก HTML ที่กำหนดเอง สิ่งที่ควรทราบมีดังนี้

• ควรโหลดไลบรารีและสคริปต์บุคคลที่สามขนาดใหญ่ผ่านแท็กสคริปต์ ที่ดาวน์โหลดไฟล์ภายนอก (เช่น <script src="external-scripts.js">) แทนที่จะคัดลอกและวางสคริปต์โดยตรง เนื้อหาลงในแท็ก แม้ว่าจะมีการใช้แท็ก <script> อยู่ในปัจจุบัน ยกเลิกการส่งไป-กลับแยกต่างหากเพื่อดาวน์โหลดเนื้อหาของสคริปต์ การฝึกจะเพิ่มขนาดคอนเทนเนอร์และป้องกันการแคชสคริปต์ โดยแยกตามเบราว์เซอร์
• ผู้ให้บริการหลายรายแนะนำให้วางแท็ก <script> ไว้ที่ด้านบนสุดของแท็ก <head> แต่สำหรับสคริปต์ที่โหลดผ่านเครื่องจัดการแท็ก คำแนะนำนี้ มักไม่จำเป็น: ในสถานการณ์ส่วนใหญ่ เบราว์เซอร์ได้เสร็จเรียบร้อยแล้ว แยกวิเคราะห์ <head> ตามเวลาที่ Tag Manager ดำเนินการ

ใช้พิกเซล

ในบางสถานการณ์ สคริปต์ของบุคคลที่สามอาจถูกแทนที่ด้วยรูปภาพหรือ iframe "pixels" เมื่อเทียบกับฟังก์ชันที่ใช้สคริปต์ พิกเซลอาจรองรับ มีฟังก์ชันการใช้งานน้อยกว่า จึงมักมองว่าเป็นการติดตั้งใช้งานที่ไม่เป็นที่ต้องการเนื่องจาก ของสิ่งนั้น อย่างไรก็ตาม เมื่อใช้ภายใน Tag Manager จะสามารถทำให้พิกเซลเป็นแบบไดนามิกมากขึ้นได้ เนื่องจากสามารถเริ่มทำงานในทริกเกอร์และส่งตัวแปรต่างๆ ได้ ผู้คนส่วนใหญ่ ประเภทแท็กที่มีประสิทธิภาพและมีความปลอดภัย เนื่องจากไม่มีการดำเนินการของ JavaScript หลังจาก มันก็เริ่มทำงานแล้ว พิกเซลมีขนาดทรัพยากรที่เล็กมาก (น้อยกว่า 1 KB) และมี ไม่ทำให้เลย์เอาต์เปลี่ยนแปลง

โปรดสอบถามข้อมูลเพิ่มเติมเกี่ยวกับการสนับสนุนจากผู้ให้บริการบุคคลที่สาม พิกเซล นอกจากนี้ คุณยังลองตรวจสอบโค้ดเพื่อหาแท็ก <noscript> ได้ด้วย หากผู้ให้บริการรองรับพิกเซล ก็มักจะรวมพิกเซลเหล่านั้นไว้ภายใน แท็ก <noscript>

ตัวเลือกอื่นๆ สำหรับพิกเซล

พิกเซลเริ่มได้รับความนิยมอย่างมากเพราะครั้งหนึ่งเป็นพิกเซลที่ถูกที่สุด และเชื่อถือได้มากที่สุดในการส่งคำขอ HTTP ในกรณีที่เซิร์ฟเวอร์ คำตอบไม่เกี่ยวข้อง ( เช่น เมื่อส่งข้อมูลไปยังการวิเคราะห์ ผู้ให้บริการ) navigator.sendBeacon() และ fetch() keepalive API ออกแบบมาเพื่อรองรับกรณีการใช้งานแบบเดียวกันนี้ แต่เชื่อถือได้มากกว่า กว่าพิกเซล

การที่จะใช้พิกเซลต่อไป จะไม่มีปัญหาใดๆ นั่นเป็นเพราะระบบรองรับและ มีผลกระทบด้านประสิทธิภาพน้อยที่สุด แต่ถ้าคุณสร้างบีคอนเอง จึงควรพิจารณาใช้ API เหล่านี้

sendBeacon()

navigator.sendBeacon() API ออกแบบมาสำหรับการส่งข้อมูลปริมาณเล็กน้อยไปยังเว็บเซิร์ฟเวอร์ในสถานการณ์ต่างๆ ซึ่งการตอบสนองของเซิร์ฟเวอร์นั้นไม่สำคัญ

const url = "https://example.com/analytics";
const data = JSON.stringify({
    event: "checkout",
    time: performance.now()
});

navigator.sendBeacon(url, data);

sendBeacon() มี API แบบจำกัด: รองรับเฉพาะการสร้างคำขอ POST เท่านั้นและ ไม่รองรับการตั้งค่าส่วนหัวที่กำหนดเอง ใช่เลย รองรับในเบราว์เซอร์รุ่นใหม่ทั้งหมด

fetch() keepalive

keepalive เป็นแฟล็กที่ทำให้การดึงข้อมูล API ไปยัง ใช้เพื่อสร้างคำขอที่ไม่บล็อก เช่น การรายงานเหตุการณ์และข้อมูลวิเคราะห์ ใช่เลย ที่ใช้โดยรวม keepalive: true ไว้ในพารามิเตอร์ที่ส่งไปยัง fetch()

const url = "https://example.com/analytics";
const data = JSON.stringify({
  event: "checkout",
  time: performance.now()
});

fetch(url, {
    method: 'POST',
    body: data,
    keepalive: true
});

หาก fetch() keepalive และ sendBeacon() ดูคล้ายคลึงกันมาก นั่นก็เพราะ อันที่จริง sendBeacon() ในเบราว์เซอร์ Chromium สร้างขึ้นมาจาก fetch() keepalive ในตอนนี้

เมื่อเลือกระหว่าง fetch() keepalive ถึง sendBeacon() คุณต้อง พิจารณาฟีเจอร์และการสนับสนุนเบราว์เซอร์ที่คุณต้องการ Googlebot() API คือ มีความยืดหยุ่นมากขึ้น แต่ keepalive มีเบราว์เซอร์น้อยกว่า การสนับสนุนมากกว่า sendBeacon()

ขอคำชี้แจง

แท็กมักจะสร้างขึ้นจากการปฏิบัติตามคำแนะนำจากผู้ให้บริการบุคคลที่สาม หากไม่ชัดเจนว่าโค้ดของผู้ให้บริการทำงานอย่างไร ให้ลองสอบถามผู้รู้ การได้รับความคิดเห็นที่สองจะช่วยระบุว่าแท็กมีโอกาสที่จะสร้างหรือไม่ ประสิทธิภาพหรือความปลอดภัย

ขอแนะนำให้ติดป้ายกำกับแท็กด้วยเจ้าของในเครื่องจัดการแท็กด้วย อยู่ไกลมาก ง่ายเกินไปที่จะลืมว่าใครเป็นเจ้าของแท็ก และกลัวที่จะเอาแท็กออกเผื่อไว้

ทริกเกอร์

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

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

เลือกเหตุการณ์ทริกเกอร์ที่เหมาะสม

ผลกระทบด้านประสิทธิภาพของแท็กไม่มีตายตัว: โดยทั่วไปแล้ว ที่แท็กเริ่มทำงาน จะยิ่งส่งผลต่อประสิทธิภาพมากขึ้นเท่านั้น โดยทั่วไปทรัพยากรจะเป็น ถูกจำกัดในระหว่างการโหลดหน้าเว็บเริ่มต้น ดังนั้นการโหลดหรือการดำเนินการ ทรัพยากรบางอย่าง (หรือแท็ก) นำทรัพยากรออกจากอย่างอื่น

แม้ว่าการเลือกทริกเกอร์ที่เหมาะสมสำหรับแท็กทั้งหมดถือเป็นสิ่งสำคัญ สำคัญอย่างยิ่งสำหรับแท็กที่โหลดทรัพยากรขนาดใหญ่หรือทำงานเป็นเวลานาน สคริปต์

ทริกเกอร์แท็กได้ใน การดูหน้าเว็บ (โดยทั่วไปคือ Page load, ในวันที่ DOM Ready, ใน Window Loaded) หรือตาม เหตุการณ์ที่กำหนดเอง ขอแนะนำให้เริ่มทำงานเพื่อหลีกเลี่ยงผลกระทบต่อการโหลดหน้าเว็บ แท็กที่ไม่จำเป็นหลังจาก Window Loaded

ใช้เหตุการณ์ที่กำหนดเอง

เหตุการณ์ที่กำหนดเอง ช่วยให้คุณเริ่มการทำงานของทริกเกอร์เพื่อตอบสนองต่อเหตุการณ์ในหน้าเว็บที่ไม่ครอบคลุมอยู่ใน ทริกเกอร์ในตัวของ Google Tag Manager ตัวอย่างเช่น แท็กจำนวนมากใช้ การดูหน้าเว็บ ทริกเกอร์ อย่างไรก็ตาม ช่วงเวลาระหว่าง DOM Ready ถึง Window Loaded อาจยาวนานในหลาย ซึ่งจะทำให้ปรับแต่งได้ยากเมื่อแท็กเริ่มทำงาน กำหนดเอง เหตุการณ์ต่างๆ ช่วยแก้ปัญหานี้ได้

หากต้องการใช้เหตุการณ์ที่กำหนดเอง ให้สร้างทริกเกอร์เหตุการณ์ที่กำหนดเองก่อนแล้วอัปเดตแท็ก เพื่อใช้ทริกเกอร์นี้

หากต้องการให้ทริกเกอร์เริ่มทำงาน ให้พุชเหตุการณ์ที่เกี่ยวข้องไปยังชั้นข้อมูล

// Custom event trigger that fires after 2 seconds
setTimeout(() => {
  dataLayer.push({
    'event' : 'my-custom-event'
  });
}, 2000);

ใช้เงื่อนไขทริกเกอร์ที่เฉพาะเจาะจง

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

ตัวแปรบิวท์อินสามารถ รวมอยู่ในเงื่อนไขทริกเกอร์ด้วยเพื่อจำกัดการเริ่มทำงานของแท็ก

อย่างไรก็ตาม การมีเงื่อนไขทริกเกอร์หรือข้อยกเว้นที่ซับซ้อนต้องใช้เวลา เวลาในการประมวลผลทั้งในและนอกนั้น ดังนั้นอย่าทำให้ซับซ้อนเกินไป

โหลด Tag Manager ในเวลาที่เหมาะสม

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

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

ตัวแปร

ตัวแปรช่วยให้อ่านข้อมูลจากหน้าเว็บได้ มีประโยชน์ในทริกเกอร์ และ ในแท็กโดยตรง

ตัวแปรจะส่งผลให้มีการเพิ่มโค้ด JavaScript ลงในเครื่องจัดการแท็ก เช่นเดียวกับทริกเกอร์ และอาจก่อให้เกิดปัญหาด้านประสิทธิภาพได้ ตัวแปรสามารถเป็นตัวแปรที่ค่อนข้างเรียบง่ายภายใน ประเภทที่อ่านได้ เช่น อ่านส่วนต่างๆ ของ URL, คุกกี้, ชั้นข้อมูล หรือ DOM หรืออาจเป็น JavaScript ที่กำหนดเองซึ่งไม่จำกัดการทำงานในเบื้องต้น

ทำให้ตัวแปรเรียบง่ายและน้อยที่สุด เนื่องจากตัวแปรจะต้องมีการประเมิน อย่างต่อเนื่องโดย Tag Manager นำตัวแปรเก่าที่ไม่ได้ใช้แล้วออก เพื่อลดทั้งขนาดของสคริปต์ Tag Manager และเวลาในการประมวลผล การใช้งาน

การจัดการแท็ก

การใช้แท็กอย่างมีประสิทธิภาพจะช่วยลดความเสี่ยงจากปัญหาด้านประสิทธิภาพได้

ใช้ชั้นข้อมูล

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

// Contents of the data layer
window.dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];

// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});

// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});

แม้ว่า Google Tag Manager จะสามารถใช้โดยไม่มีชั้นข้อมูล แต่การใช้งานมีดังนี้ ขอแนะนำเป็นอย่างยิ่ง ชั้นข้อมูลช่วยในการรวมข้อมูล สคริปต์ของบุคคลที่สามเข้าถึงในที่เดียว ตรวจดูการใช้งานได้ชัดเจนขึ้น นอกจากสาเหตุอื่นๆ แล้ว วิธีการนี้สามารถช่วยลด การคำนวณตัวแปรที่ซ้ำซ้อนและการทำงานของสคริปต์ การใช้ชั้นข้อมูลยัง ควบคุมข้อมูลที่แท็กเข้าถึงแทนที่จะให้ JavaScript แบบเต็ม ตัวแปรหรือการเข้าถึง DOM

นำแท็กที่ซ้ำกันและแท็กที่ไม่ได้ใช้ออก

แท็กที่ซ้ำกันอาจเกิดขึ้นเมื่อมีแท็กรวมอยู่ในมาร์กอัป HTML ของหน้าเว็บใน นอกเหนือจากการแทรกผ่าน Tag Manager

แท็กที่ไม่ได้ใช้งานควรหยุดชั่วคราวหรือนำออกแทนที่จะบล็อกผ่านการใช้ ข้อยกเว้นทริกเกอร์ การหยุดชั่วคราวหรือการนำแท็กออกจะเป็นการนำโค้ดออกจากคอนเทนเนอร์ การบล็อก ไม่ได้

เมื่อนำแท็กที่ไม่ได้ใช้ออก ทริกเกอร์และตัวแปรก็ควร เพื่อดูว่าสามารถนำออกได้ไหมหากมีการใช้งานโดย แท็กทั้งหมด.

ใช้รายการที่อนุญาตและปฏิเสธ

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

รายการที่อนุญาตและปฏิเสธจะได้รับการกำหนดค่าผ่านชั้นข้อมูล

window.dataLayer = [{
  'gtm.allowlist': ['<id>', '<id>', ...],
  'gtm.blocklist': ['customScripts']
}];

เช่น คุณอาจไม่อนุญาตให้ใช้แท็ก HTML ที่กำหนดเอง, JavaScript หรือการเข้าถึง DOM โดยตรง ซึ่งหมายถึงเฉพาะพิกเซลและแท็กที่กำหนดไว้ล่วงหน้าเท่านั้น ด้วยข้อมูลจากชั้นข้อมูล แม้ว่านี่จะเป็นข้อจำกัด ก็จะทำให้ใช้งาน Tag Manager ได้อย่างมีประสิทธิภาพมากขึ้น และปลอดภัยมากยิ่งขึ้น

ลองใช้การติดแท็กฝั่งเซิร์ฟเวอร์

การเปลี่ยนไปใช้การติดแท็กฝั่งเซิร์ฟเวอร์ไม่ใช่งานง่ายๆ แต่ก็คุ้มค่า ที่กำลังพิจารณา โดยเฉพาะอย่างยิ่งสำหรับเว็บไซต์ขนาดใหญ่ที่ต้องการควบคุม การติดแท็กฝั่งเซิร์ฟเวอร์จะนำโค้ดผู้ให้บริการออกจากไคลเอ็นต์ จะส่งการประมวลผลจากไคลเอ็นต์ไปยังเซิร์ฟเวอร์

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

โปรดทราบว่าการติดแท็กฝั่งเซิร์ฟเวอร์ใช้ได้กับบางแท็กเท่านั้น แท็กติดตาม ความเข้ากันได้จะแตกต่างกันไปตามผู้ให้บริการ

โปรดดูข้อมูลเพิ่มเติมในข้อมูลเบื้องต้นเกี่ยวกับฝั่งเซิร์ฟเวอร์ การติดแท็ก

คอนเทนเนอร์

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

ใช้คอนเทนเนอร์เพียง 1 รายการต่อหน้า

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

ไม่ค่อยมีการใช้คอนเทนเนอร์หลายรายการอย่างมีประสิทธิภาพ อย่างไรก็ตาม อาจมี กรณีที่สามารถทำได้หากควบคุมได้ดี มีดังนี้

• มี "โหลดล่วงหน้า" น้อยลง ของคอนเทนเนอร์ และ "การโหลดภายหลัง" ที่หนักขึ้น container, มากกว่าคอนเทนเนอร์ขนาดใหญ่ 1 รายการ
• มีการใช้คอนเทนเนอร์แบบจำกัดโดยผู้ใช้ด้านเทคนิคที่น้อยกว่า โดยมีปริมาณน้อยลง คอนเทนเนอร์สำหรับแท็กที่ไม่สามารถใช้ได้แต่มีการควบคุมเข้มงวดมากขึ้น ในคอนเทนเนอร์ที่ถูกจำกัด

หากคุณต้องใช้คอนเทนเนอร์หลายรายการต่อหน้า ให้ติดตาม Google Tag Manager คำแนะนำสำหรับการตั้งค่าหลายรายการ คอนเทนเนอร์

ใช้คอนเทนเนอร์แยกกันหากจำเป็น

หากคุณใช้เครื่องจัดการแท็กสำหรับพร็อพเพอร์ตี้หลายรายการ (เช่น เว็บแอปและ บนอุปกรณ์เคลื่อนที่) จำนวนคอนเทนเนอร์ที่คุณใช้อาจส่งผลหรือส่งผลเสียต่อเวิร์กโฟลว์ ประสิทธิภาพการทำงาน ทั้งยังอาจส่งผลต่อประสิทธิภาพอีกด้วย

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

การพยายามใช้คอนเทนเนอร์เดี่ยวๆ ที่กว้างเกินไปมักเพิ่มจำนวนโดยไม่จำเป็น ความซับซ้อนและขนาดคอนเทนเนอร์โดยการบังคับให้ใช้ตรรกะที่ซับซ้อน ในการจัดการแท็กและทริกเกอร์

คอยตรวจสอบขนาดคอนเทนเนอร์

ขนาดของคอนเทนเนอร์จะกำหนดโดยแท็ก ทริกเกอร์ และตัวแปรของคอนเทนเนอร์นั้น แม้ว่าคอนเทนเนอร์ขนาดเล็กก็อาจส่งผลลบต่อประสิทธิภาพของหน้าเว็บ แต่แท็ก ก็เป็นไปได้สูงเหมือนกัน

ขนาดคอนเทนเนอร์ไม่ควรเป็นเมตริกดาวเหนือของคุณเมื่อเพิ่มประสิทธิภาพแท็ก การใช้งาน; แต่คอนเทนเนอร์ขนาดใหญ่ มักเป็นสัญญาณเตือนว่า ไม่ได้รับการบำรุงรักษาอย่างดีและอาจนำไปใช้ในทางที่ผิดได้

Google Tag Manager คอนเทนเนอร์ limits ขนาดไม่เกิน 200 KB และจะเตือนเกี่ยวกับขนาดคอนเทนเนอร์ที่เริ่มต้นที่ 140 KB อย่างไรก็ตาม เว็บไซต์ส่วนใหญ่ควรมุ่งให้คอนเทนเนอร์ของตนมีขนาดเล็กกว่านี้มาก สำหรับ ค่ามัธยฐานของเว็บไซต์คอนเทนเนอร์อยู่ที่ประมาณ 50 KB

หากต้องการกำหนดขนาดคอนเทนเนอร์ ให้ดูที่ขนาดของคำตอบ https://www.googletagmanager.com/gtag/js?id=YOUR_ID ส่งคืน ช่วงเวลานี้ การตอบกลับมีไลบรารี Google เครื่องจัดการแท็กและเนื้อหาของ คอนเทนเนอร์ ตัวไลบรารี Google Tag Manager มีขนาดประมาณ 33 KB บีบอัดแล้ว

ตั้งชื่อเวอร์ชันคอนเทนเนอร์

คอนเทนเนอร์ เวอร์ชัน คือสแนปชอตของเนื้อหาของคอนเทนเนอร์ ณ เวลาใดเวลาหนึ่ง การใช้ ชื่อที่สื่อความหมาย และรวมถึงคำอธิบายสั้นๆ ว่า การเปลี่ยนแปลงต่างๆ ภายในส่วนนั้นส่งผลอย่างมาก ซึ่งจะทำให้แก้ไขข้อบกพร่องด้านประสิทธิภาพในอนาคตได้ง่ายขึ้น ปัญหา

เวิร์กโฟลว์การติดแท็ก

การจัดการการเปลี่ยนแปลงเกี่ยวกับแท็กเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าแท็กจะไม่มี อาจส่งผลลบต่อประสิทธิภาพของหน้าเว็บ

ทดสอบแท็กก่อนทำให้ใช้งานได้

การทดสอบแท็กก่อนการติดตั้งใช้งานจะช่วยตรวจจับปัญหาได้ (ประสิทธิภาพและ หรือไม่) ก่อนจัดส่ง

สิ่งที่ต้องพิจารณาเมื่อทดสอบแท็กมีดังนี้

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

โหมดแสดงตัวอย่าง

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

เวลาประมวลผลของ Google Tag Manager จะแตกต่างกัน (ช้าลงเล็กน้อย) เมื่อทำงานในโหมดแสดงตัวอย่าง เนื่องจากมีค่าใช้จ่ายเพิ่มเติมในการแสดงโฆษณา ในคอนโซลการแก้ไขข้อบกพร่อง ดังนั้น การเปรียบเทียบการวัดผลของ Web Vitals ไม่แนะนําให้เก็บรวบรวมในโหมดแสดงตัวอย่างไปยังข้อมูลที่รวบรวมในเวอร์ชันที่ใช้งานจริง อย่างไรก็ตาม ความคลาดเคลื่อนนี้ไม่ควรส่งผลต่อลักษณะการดําเนินการของแท็ก ด้วยตนเอง

การทดสอบแบบสแตนด์อโลน

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

ตรวจสอบประสิทธิภาพของแท็ก

การตรวจสอบ Google Tag Manager API ได้ ในการรวบรวมข้อมูลเกี่ยวกับการดำเนินการ เวลา ของแท็กหนึ่งๆ ข้อมูลนี้จะรายงานไปยังปลายทาง การเลือก

สำหรับข้อมูลเพิ่มเติม โปรดดูวิธีสร้าง Google Tag Manager ตรวจสอบ

ต้องได้รับอนุมัติสำหรับการเปลี่ยนแปลงคอนเทนเนอร์

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

ตรวจสอบการใช้แท็กเป็นระยะ

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

การติดป้ายกำกับแต่ละแท็กเพื่อให้เจ้าของเห็นได้ชัดเจนช่วยให้ระบุผู้ได้ง่าย ตอบสนองสำหรับแท็กนั้นและสามารถบอกได้ว่ายังจำเป็นอยู่หรือไม่

เมื่อตรวจสอบแท็ก อย่าลืมล้างทริกเกอร์และตัวแปรตาม และยังเป็นสาเหตุของปัญหาประสิทธิภาพได้ง่ายๆ เช่นกัน

สำหรับข้อมูลเพิ่มเติม โปรดดู การเก็บสคริปต์ของบุคคลที่สามไว้ภายใต้ ควบคุม