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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

เผยแพร่เมื่อวันที่ 29 กรกฎาคม 2021

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

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

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

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

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

Largest Contentful Paint (LCP) มีความเสี่ยงต่อการแย่งแบนด์วิดท์ในช่วงเวลาสำคัญที่หน้าเว็บโหลด นอกจากนี้ การบล็อกเทรดหลักอาจทำให้เวลาในการแสดงผล LCP ล่าช้า

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

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

เลือกประเภทแท็กที่เหมาะสม

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

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

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

ไม่ควรโหลดสคริปต์ทั้งหมดด้วย Tag Manager

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

นอกจากนี้ ผู้ใช้บางรายยังบล็อก Tag Manager ด้วย การใช้ Tag Manager เพื่อติดตั้งใช้งานฟีเจอร์ UX อาจทำให้เว็บไซต์ใช้งานไม่ได้สำหรับผู้ใช้บางราย

โปรดใช้ความระมัดระวังกับแท็ก HTML ที่กำหนดเอง

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

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

การสร้างแท็กที่กำหนดเองใน Google Tag Manager

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

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

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

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

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

เทมเพลตที่กำหนดเองใน Google Tag Manager

แทรกสคริปต์อย่างถูกต้อง

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

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

หากคุณต้องใช้แท็ก HTML ที่กำหนดเอง โปรดคำนึงถึงสิ่งต่อไปนี้

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

ใช้พิกเซล

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

พิกเซลเป็นแท็กประเภทที่มีประสิทธิภาพและปลอดภัยที่สุดเนื่องจากไม่มีการเรียกใช้ JavaScript หลังจากเริ่มทำงาน พิกเซลมีขนาดทรัพยากรที่เล็กมาก (น้อยกว่า 1 KB) และไม่ทำให้เลย์เอาต์เปลี่ยนไป

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

แท็กรูปภาพที่กำหนดเองใน Google Tag Manager

ทางเลือกอื่นนอกเหนือจากพิกเซล

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

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

sendBeacon()

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

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

navigator.sendBeacon(url, data);

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

Fetch API keepalive

keepalive เป็นแฟล็กที่อนุญาตให้ใช้ Fetch 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() ดูคล้ายกันมาก นั่นเป็นเพราะทั้ง 2 อย่างนี้มีความคล้ายคลึงกันจริงๆ อันที่จริงแล้ว ในเบราว์เซอร์ Chromium ตอนนี้ sendBeacon() สร้างขึ้นบน fetch() keepalive

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

ทำความเข้าใจหน้าที่ของแท็ก

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

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

ทริกเกอร์

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

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

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

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

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

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

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

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

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

ทริกเกอร์เหตุการณ์ที่กำหนดเองใน Google Tag Manager

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

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

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

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

เงื่อนไขทริกเกอร์ใน Google Tag Manager

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

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

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

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

ตัวแปร

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

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

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

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

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

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

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

นอกจากนี้ยังใช้ชั้นข้อมูลเพื่อเรียกให้แท็กทำงานได้ด้วย

// 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 อย่างเต็มรูปแบบ

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

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

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

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

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

แท็กที่หยุดชั่วคราวจะส่งผลต่อขนาดคอนเทนเนอร์ แต่เพย์โหลดทั้งหมดจะเล็กกว่าเมื่อแท็กทำงานอยู่

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

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

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

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

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

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

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

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

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

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

คอนเทนเนอร์

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

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

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

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

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

หากต้องใช้คอนเทนเนอร์หลายรายการต่อหน้า ให้ทำตามคำแนะนำของ Google Tag Manager ในการตั้งค่าคอนเทนเนอร์หลายรายการ

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

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

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

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

คอยสังเกตขนาดคอนเทนเนอร์

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

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

Google Tag Manager จำกัดขนาดคอนเทนเนอร์ไว้ที่ 300 KB และจะเตือนเกี่ยวกับขนาดคอนเทนเนอร์หลังจากที่ถึง 70% ของขีดจำกัดขนาด

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

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

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

เวิร์กโฟลว์ของแท็ก

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

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

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

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

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

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

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

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

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

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

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

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

ดูข้อมูลเพิ่มเติมได้ที่วิธีสร้างเครื่องมือตรวจสอบ Google Tag Manager

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

โดยปกติแล้ว โค้ดของบุคคลที่หนึ่งจะผ่านการตรวจสอบและทดสอบก่อนการติดตั้งใช้งาน โปรดดูแลแท็กของคุณในลักษณะเดียวกัน

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

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

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

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

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

ดูข้อมูลเพิ่มเติมได้ที่การควบคุมสคริปต์ของบุคคลที่สาม