Data Layer ของ Google Tag Manager: รูปแบบคำสั่ง Variable และอีคอมเมิร์ซ GA4

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

บทความนี้อธิบายว่า data layer คืออะไร รูปแบบคำสั่ง dataLayer.push และคีย์ event, data layer variable ใน GTM ทำงานอย่างไร, data layer สำหรับอีคอมเมิร์ซที่อีเวนต์ purchase ของ GA4 ต้องใช้, การ push ทำให้ทริกเกอร์ทำงานอย่างไร, การดีบักในโหมด Preview, ข้อผิดพลาดที่ทำให้ระบบพังบ่อยที่สุด และใครควรเป็นเจ้าของงานนี้

Data layer คืออะไร

เมื่อโค้ดคอนเทนเนอร์ของ Google Tag Manager โหลด มันจะมองหาอาร์เรย์ส่วนกลางชื่อ window.dataLayer อะไรก็ตามที่เว็บไซต์ push เข้าไปในอาร์เรย์นี้ Tag Manager จะประมวลผลตามลำดับ Tag Manager เก็บโมเดลข้อมูลภายในที่สร้างจากการ push ทุกครั้ง ออบเจกต์ใหม่แต่ละตัวจะถูกรวม (merge) เข้ากับโมเดลนั้น ค่าที่ push ไว้ก่อนหน้าจึงยังใช้ได้กับแท็กที่ทำงานทีหลัง จนกว่าจะมีค่าใหม่มาเขียนทับ

หัวใจของ data layer คือการแยกหน้าที่ เว็บไซต์รู้ข้อเท็จจริง (order ID, SKU ของสินค้า, ระดับสมาชิกของลูกค้า) และเขียนลงใน data layer ตามรูปแบบที่ตกลงกันไว้ Tag Manager อ่านค่าเหล่านั้นแล้วตัดสินว่าแท็กไหนจะได้รับ การรีดีไซน์ที่เปลี่ยน class ของปุ่มหรือข้อความบนหน้าจะไม่ทำให้การติดตามพัง เพราะแท็กไม่เคยพึ่งรายละเอียดเหล่านั้นตั้งแต่แรก

ถ้าต้องการส่งค่าตอนโหลดหน้า อาร์เรย์ต้องมีอยู่ก่อนที่โค้ดคอนเทนเนอร์จะทำงาน รูปแบบมาตรฐานคือประกาศแบบป้องกันไว้เหนือโค้ด GTM:

window.dataLayer = window.dataLayer || [];

บรรทัดนี้สร้างอาร์เรย์ถ้ายังไม่มี และไม่ไปยุ่งกับมันถ้าสคริปต์อื่นสร้างไว้แล้ว การเขียน dataLayer = [] ทีหลังในหน้าเดียวกันเป็นบั๊กคลาสสิก เพราะจะแทนที่อาร์เรย์เดิมและอาจตัดการเชื่อมต่อกับ Tag Manager

รูปแบบคำสั่ง dataLayer.push และคีย์ event

คุณเพิ่มข้อมูลด้วย dataLayer.push() โดยส่งออบเจกต์หนึ่งตัวที่มีคู่ key-value การ push ระดับหน้าอาจหน้าตาแบบนี้:

dataLayer.push({ pageType: 'product', userStatus: 'logged_in', language: 'th' });

การ push นี้แค่เก็บค่า ไม่มีอะไรทำงานเพราะมัน ถ้าต้องการบอก Tag Manager ว่ามีบางอย่างเกิดขึ้น ให้ใส่คีย์สงวนชื่อ event:

dataLayer.push({ event: 'newsletter_signup', formLocation: 'footer' });

ค่าของ event คือชื่อที่ทริกเกอร์ประเภท Custom Event รอฟังอยู่ ค่าอื่นทั้งหมดในออบเจกต์จะใช้ได้กับแท็กที่ทำงานบนอีเวนต์นั้นและอีเวนต์ถัดไป เพราะพฤติกรรมการ merge ที่อธิบายไว้ข้างต้น

กฎไม่กี่ข้อที่ช่วยให้การ push คาดเดาได้:

• ชื่อคีย์แยกตัวพิมพ์เล็กพิมพ์ใหญ่ formLocation กับ formlocation เป็นคนละคีย์ และ variable ที่ตั้งไว้สำหรับคีย์หนึ่งจะคืนค่า undefined สำหรับอีกคีย์
• ใช้รูปแบบการตั้งชื่อเดียวทั้งเว็บไซต์ จะเป็น camelCase หรือ snake_case ก็ได้ และเขียนเป็นเอกสารไว้
• รักษาชื่ออีเวนต์ให้คงที่ การเปลี่ยนชื่อ add_to_basket เป็น add_to_cart โดยไม่แก้ทริกเกอร์จะทำให้แท็กหยุดทำงานแบบเงียบๆ
• push หลังจากข้อมูลมีอยู่จริงแล้ว การ push ยอดคำสั่งซื้อก่อนที่ระบบหลังบ้านจะยืนยันออเดอร์ จะบันทึกรายได้ที่อาจไม่มีวันเกิดขึ้น

Data layer variable ใน GTM

แท็กไม่ได้อ่าน data layer โดยตรง คุณต้องสร้าง variable ใน Tag Manager ประเภท Data Layer Variable ใส่ชื่อคีย์ แล้วนำ variable นั้นไปใช้ในแท็กและทริกเกอร์ในรูปแบบ {{ชื่อ Variable}}

Data Layer Variable มีการตั้งค่าเวอร์ชัน เวอร์ชัน 2 ซึ่งเป็นค่าเริ่มต้นรองรับ dot notation สำหรับค่าที่ซ้อนอยู่ ถ้าการ push มี ecommerce: { transaction_id: 'T1001', value: 1250 } variable ที่ใช้ชื่อคีย์ ecommerce.transaction_id จะคืนค่า T1001 เวอร์ชัน 1 ถือว่าจุดเป็นส่วนหนึ่งของชื่อคีย์ ecommerce.transaction_id จึงถูกอ่านเป็นคีย์ชื่อเดียว ไม่ใช่ค่าที่ซ้อนอยู่

คีย์จากการ push ครั้งก่อนยังค้างอยู่ในโมเดลที่ merge แล้วจนกว่าจะมีค่าใหม่มาเขียนทับ นี่คือต้นเหตุของบั๊กอีคอมเมิร์ซหลายแบบ และเป็นเหตุผลที่ตัวอย่างอีคอมเมิร์ซของ Google ล้างออบเจกต์ ecommerce ก่อนทุกอีเวนต์ใหม่

คุณตั้งค่า default ให้ variable ได้ สำหรับกรณีที่ไม่เคยมีการ push คีย์นั้น วิธีนี้มีประโยชน์ในการชี้จุดที่ขาดหายในรายงาน เช่น ตั้งค่า default เป็น "not_set" สำหรับ content group ที่นักพัฒนาลืมใส่ในบางเทมเพลต

Data layer อีคอมเมิร์ซสำหรับอีเวนต์ purchase ของ GA4

GA4 แนะนำชุดอีเวนต์อีคอมเมิร์ซที่มีชื่อและพารามิเตอร์ตายตัว ได้แก่ view_item, add_to_cart, begin_checkout และ purchase เมื่อเว็บไซต์ push อีเวนต์เหล่านี้ในรูปแบบที่กำหนด แท็กอีเวนต์ GA4 ใน Tag Manager จะส่งข้อมูลอีคอมเมิร์ซได้ด้วยตัวเลือก "Send Ecommerce data" โดยใช้ data layer เป็นแหล่งข้อมูล แทนการจับคู่ทุกฟิลด์ด้วยมือ

การ push อีเวนต์ purchase อยู่บนหน้ายืนยันคำสั่งซื้อ หรือทำงานเมื่อยืนยันการชำระเงินแล้ว:

dataLayer.push({ ecommerce: null });

dataLayer.push({ event: 'purchase', ecommerce: { transaction_id: 'T1001', value: 1200.00, currency: 'THB', shipping: 50.00, items: [{ item_id: 'SKU_123', item_name: 'Cotton shirt', price: 600.00, quantity: 2 }] } });

ค่าในตัวอย่างนี้เป็นเพียงตัวอย่างประกอบ ส่วนกฎเบื้องหลังมาจากเอกสารอีคอมเมิร์ซ GA4 ของ Google:

• transaction_id จำเป็นสำหรับ purchase และเป็นค่าที่ GA4 ใช้ตัดอีเวนต์ purchase ซ้ำที่มี ID เดียวกัน
• currency ต้องส่งเมื่อมีการตั้ง value โดยใช้รหัส ISO 4217 สามตัวอักษร เช่น THB ถ้าไม่มี ตัวชี้วัดรายได้จะคำนวณไม่ถูกต้อง
• items เป็นอาร์เรย์ของสินค้า แต่ละชิ้นต้องมีอย่างน้อย item_id หรือ item_name
• value ควรเป็นตัวเลข ไม่ใช่สตริงที่มีสัญลักษณ์สกุลเงินหรือเครื่องหมายคั่นหลักพัน

บรรทัดแรกที่ push ecommerce เป็น null มีไว้ล้างออบเจกต์ ecommerce ก่อนหน้า เพราะพฤติกรรมการ merge ถ้าข้ามขั้นตอนนี้ คีย์ที่ค้างจากอีเวนต์อีคอมเมิร์ซก่อนหน้า เช่น คูปองหรือชื่อรายการสินค้า อาจติดเข้าไปในอีเวนต์ purchase

ตารางด้านล่างจับคู่จังหวะสำคัญในอีคอมเมิร์ซกับชื่ออีเวนต์ GA4 และคีย์ที่สำคัญที่สุด

อีเวนต์ใน data layer ทำให้ทริกเกอร์ทำงานอย่างไร

Tag Manager ประเมินทริกเกอร์ทุกครั้งที่มีการ push พร้อมคีย์ event อีเวนต์ในตัวของระบบเองก็ใช้รูปแบบเดียวกัน คือ gtm.js หมายถึงคอนเทนเนอร์โหลดแล้ว (แสดงใน Preview ว่า Container Loaded) gtm.dom หมายถึง DOM Ready และ gtm.load หมายถึง Window Loaded ส่วนคลิก การส่งฟอร์ม และความลึกในการสกรอลล์ จะถูก push เป็น gtm.click, gtm.formSubmit และอื่นๆ โดยตัวดักฟังในตัวระบบ

อีเวนต์ของคุณเองทำงานผ่านทริกเกอร์ Custom Event ตั้งชื่ออีเวนต์เป็น purchase แล้วทริกเกอร์จะทำงานทุกครั้งที่มีการ push ที่ event เท่ากับ purchase ทริกเกอร์จับคู่ด้วย regular expression ได้ เช่น รูปแบบที่ครอบคลุมทั้ง add_to_cart และ remove_from_cart และเพิ่มเงื่อนไขได้ เช่น "pageType equals product" ซึ่งจะอ่าน data layer variable ณ จังหวะที่อีเวนต์เกิด

จังหวะเวลาสำคัญ variable จะมีเฉพาะค่าที่อยู่ ณ ตอนที่อีเวนต์นั้นถูกประมวลผล ถ้าหน้าเว็บ push event: 'purchase' แล้วค่อย push ข้อมูลออเดอร์ในการเรียกครั้งที่สอง แท็กบนอีเวนต์ purchase จะไม่เห็นข้อมูลออเดอร์ ให้ใส่คีย์ event ไว้ใน push เดียวกับข้อมูลที่อีเวนต์นั้นอธิบาย

การดีบักในโหมด Preview

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

• Tags: แท็กไหนทำงานและแท็กไหนไม่ทำงานบนอีเวนต์นั้น
• Variables: ค่าของทุก variable ณ จังหวะนั้น เป็นจุดที่คุณจะจับได้ว่าคีย์ที่สะกดผิดคืนค่า undefined
• Data Layer: ออบเจกต์ที่ถูก push จริง และโมเดลข้อมูลหลัง merge
• Errors: ข้อผิดพลาดระดับแท็กที่เทมเพลตรายงาน

สำหรับ GA4 โดยเฉพาะ ให้ใช้โหมด Preview คู่กับ DebugView ใน GA4 ซึ่งแสดงอีเวนต์ที่มาจากเบราว์เซอร์ที่กำลังดีบักแบบเกือบเรียลไทม์ รวมถึงพารามิเตอร์ items ของ purchase ทดสอบเส้นทางเต็มตั้งแต่ดูสินค้าจนถึงซื้อ ในสภาพแวดล้อม staging ด้วยวิธีชำระเงินสำหรับทดสอบ เพื่อให้หน้ายืนยันคำสั่งซื้อแสดงผลจริง

ข้อผิดพลาดที่พบบ่อยใน data layer

• เขียนทับอาร์เรย์ การเขียน dataLayer = [] ทีหลัง หรือปลั๊กอินที่ประกาศอาร์เรย์ใหม่ จะตัดการเชื่อมต่อระหว่างการ push กับ Tag Manager
• push หลังเปลี่ยนหน้า การ push ที่ผูกกับการคลิกปุ่มซึ่งโหลดหน้าใหม่ทันที อาจไม่ถูกประมวลผลเลย ให้ push ในหน้าถัดไป หรือใช้แท็กที่ส่งแบบ beacon
• purchase ยิงทุกครั้งที่รีโหลด ถ้าหน้ายืนยันคำสั่งซื้อ push purchase ทุกครั้งที่โหลด การรีเฟรชจะบันทึกอีเวนต์เพิ่มอีกครั้ง GA4 ตัดซ้ำด้วย transaction_id แต่แท็กของแพลตฟอร์มโฆษณาอาจไม่ทำ จึงควรกันการ push ซ้ำที่ระบบหลังบ้าน
• ส่งสตริงแทนตัวเลข value: '1,250 THB' นำมารวมกันไม่ได้ ให้ส่ง 1250
• ข้อมูลส่วนบุคคลใน data layer การ push อีเมลหรือเบอร์โทรศัพท์แบบข้อความธรรมดาเข้า data layer ทำให้ทุกแท็กในคอนเทนเนอร์เห็นข้อมูลนั้น นโยบายของ Google ห้ามส่งข้อมูลที่ระบุตัวบุคคลได้ไปยัง GA4 ให้ใช้ค่าที่แฮชแล้วเฉพาะเมื่อฟีเจอร์อย่าง enhanced conversions ต้องการ และอยู่ภายใต้ consent
• ชื่อไม่ตรงกัน นักพัฒนา push productID แต่ variable อ่าน product_id ควรตกลงสเปกเป็นลายลักษณ์อักษรก่อนที่ใครจะเริ่มเขียนโค้ด

ใครเป็นคนเขียน data layer ระหว่างนักพัฒนากับนักการตลาด

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

สเปกที่ดีจะระบุสำหรับทุกอีเวนต์ว่า ชื่ออีเวนต์คืออะไร หน้าหรือการกระทำใดที่ทำให้เกิด คีย์แต่ละตัวพร้อมชนิดข้อมูลและค่าตัวอย่าง และแท็กที่ใช้ค่านั้น แพลตฟอร์มอีคอมเมิร์ซและปลั๊กอินจำนวนมากมี data layer สำหรับ GA4 มาให้สำเร็จรูป ให้ตรวจในโหมด Preview ว่าตัวเหล่านั้น push อะไรก่อนจะเขียนเอง เพราะการ push purchase ซ้ำจากปลั๊กอินบวกกับ push ที่เขียนเอง เป็นสาเหตุที่พบบ่อยของรายได้ที่ถูกนับซ้ำ

สิ่งที่นักการตลาดไทยควรรู้

ร้านค้าในไทยมักขายเป็นเงินบาทแต่รันบางแคมเปญเป็นดอลลาร์สหรัฐ data layer จึงควรส่งสกุลเงินของธุรกรรมนั้นเสมอ แล้วให้ GA4 แปลงเป็นสกุลเงินที่ใช้รายงานของ property เอง ชื่อสินค้าภาษาไทยใน item_name ใช้ได้เพราะ GA4 รองรับ Unicode แต่ควรรักษา item_id เป็น SKU ที่คงที่ เพื่อให้รายงานเชื่อมกันได้ระหว่างสินค้าเดียวกันในเวอร์ชันภาษาไทยและอังกฤษ ในกรณีที่ขั้นตอนชำระเงินอยู่บนมาร์เก็ตเพลสหรือหน้าชำระเงินบนโดเมนอื่น การ push purchase อาจไม่เกิดขึ้นบนเว็บไซต์ของคุณเลย กรณีนั้นการรายงานออเดอร์จากฝั่งเซิร์ฟเวอร์หรือระบบหลังบ้านเป็นแหล่งข้อมูลเดียวที่เชื่อถือได้

บริการติดตั้งและย้ายระบบ GA4 ครอบคลุมการเขียนสเปก data layer และทดสอบแบบครบเส้นทาง และทีม การตลาดอีคอมเมิร์ซ ใช้ข้อมูลนั้นในการปรับแคมเปญ ถ้าคุณลงโฆษณาบน Google ด้วย มูลค่าการซื้อที่แม่นยำจะไหลเข้าสู่การ bidding ของ Google Ads โดยตรง

คำถามที่พบบ่อยเกี่ยวกับ data layer ของ Google Tag Manager

ต้องมี data layer ถึงจะใช้ Google Tag Manager ได้ไหม

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

dataLayer.push ที่มีและไม่มีคีย์ event ต่างกันอย่างไร

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

ทำไม data layer variable ถึงแสดงค่า undefined

สาเหตุที่พบบ่อยที่สุดคือชื่อคีย์สะกดผิดหรือตัวพิมพ์ไม่ตรง ค่าถูก push หลังอีเวนต์ที่แท็กทำงาน หรืออ่านคีย์ที่ซ้อนอยู่โดยไม่ใช้ dot notation ใน variable เวอร์ชัน 2 ให้ตรวจแท็บ Variables ในโหมด Preview ณ อีเวนต์นั้นพอดี

ทำไมต้อง push ecommerce เป็น null ก่อนทุกอีเวนต์อีคอมเมิร์ซ

เพื่อล้างออบเจกต์ ecommerce ก่อนหน้าออกจากโมเดลข้อมูลที่ merge แล้วของ Tag Manager ถ้าไม่ทำ items หรือค่าจากอีเวนต์ก่อนหน้าอาจติดไปถึงอีเวนต์ถัดไป

ใส่อีเมลลูกค้าใน data layer ได้ไหม

ไม่ควรใส่แบบข้อความธรรมดา นโยบายของ Google ห้ามส่งข้อมูลที่ระบุตัวบุคคลได้ไปยัง GA4 และทุกอย่างใน data layer ทุกแท็กในคอนเทนเนอร์อ่านได้

Data layer ที่สะอาดคือฐานรากที่การปรับปรุงการวัดผลอื่นๆ ทั้งหมดต้องอาศัย ถ้ารายได้ใน GA4 ไม่ตรงกับออเดอร์ในร้านของคุณ Relevant Audience ช่วยตรวจได้ว่าเว็บไซต์ของคุณ push อะไรอยู่ในตอนนี้ และเขียนสเปกที่นักพัฒนาของคุณนำไปสร้างต่อได้