ชั้นข้อมูลคือออบเจ็กต์ที่ Google Tag Manager และ gtag.js ใช้เพื่อส่งข้อมูลไปยังแท็ก คุณส่งเหตุการณ์หรือตัวแปรผ่านชั้นข้อมูลได้ และตั้งค่าทริกเกอร์ตามค่าของตัวแปรได้
เช่น หากคุณเรียกใช้แท็กรีมาร์เก็ตติ้ง
เมื่อค่าของ purchase_total มากกว่า $100 หรืออิงตาม
เหตุการณ์ที่เฉพาะเจาะจง เช่น เมื่อมีการคลิกปุ่ม คุณสามารถกําหนดค่าชั้นข้อมูล
เพื่อให้ข้อมูลนั้นพร้อมใช้งานสําหรับแท็กได้ ออบเจ็กต์ชั้นข้อมูลมีโครงสร้างเป็น JSON เช่น
{
event: "checkout_button",
gtm: {
uniqueEventId: 2,
start: 1639524976560,
scrollThreshold: 90,
scrollUnits: "percent",
scrollDirection: "vertical",
triggers: "1_27"
},
value: "120"
}
แท็ก Google ออกแบบมาเพื่อให้ง่ายต่อการอ้างอิงข้อมูลที่เพิ่มลงใน Data Layer ในลักษณะที่เป็นระเบียบและคาดการณ์ได้ แทนที่จะต้องแยกวิเคราะห์ ตัวแปร ข้อมูลธุรกรรม หมวดหมู่หน้าเว็บ และสัญญาณอื่นๆ ที่กระจายอยู่ ทั่วทั้งหน้าเว็บ การใช้ชั้นข้อมูลที่ป้อนข้อมูลด้วยตัวแปรและค่าที่เกี่ยวข้องจะช่วยให้มั่นใจได้ว่าจะมีข้อมูลที่เกี่ยวข้องเมื่อแท็กต้องการ
การติดตั้ง
สําหรับการติดตั้งหน้าเว็บ Tag Manager คุณต้องสร้างชั้นข้อมูล โค้ดที่ไฮไลต์ด้านล่างแสดงตำแหน่งที่สร้างชั้นข้อมูลก่อนที่จะโหลด Tag Manager
<script>
window.dataLayer = window.dataLayer || [];
</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 -->
ในการติดตั้งใช้งาน gtag.js มาตรฐานที่คัดลอกแท็กจากภายในผลิตภัณฑ์และเพิ่มลงในหน้าเว็บ ระบบจะระบุโค้ดเพื่อสร้างชั้นข้อมูล ในการติดตั้งใช้งานแท็ก Google ที่กำหนดเอง ให้เพิ่มโค้ดชั้นข้อมูล ที่จุดเริ่มต้นของสคริปต์ ดังที่แสดงในตัวอย่างที่ไฮไลต์ด้านล่าง
<!-- 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', 'TAG_ID');
</script>
วิธีการประมวลผลข้อมูลในชั้นข้อมูล
เมื่อโหลดคอนเทนเนอร์แล้ว Tag Manager จะเริ่มประมวลผลข้อความแบบพุชในชั้นข้อมูลทั้งหมดที่อยู่ในคิว Tag Manager จะประมวลผลข้อความตามลำดับการรับข้อความ โดยจะประมวลผลทีละข้อความตามลำดับที่ได้รับ หากข้อความเป็นเหตุการณ์ แท็กที่มีเงื่อนไขทริกเกอร์ตรงกันจะเริ่มทำงานก่อนที่ Tag Manager จะไปยังข้อความถัดไป
หากโค้ดเรียกใช้ gtag() หรือ dataLayer.push() ในหน้าเว็บ ในเทมเพลตที่กำหนดเอง หรือในแท็ก HTML ที่กำหนดเอง ข้อความที่เกี่ยวข้องจะเข้าคิวและประมวลผลหลังจากข้อความอื่นๆ ทั้งหมดที่รอดำเนินการได้รับการประเมินแล้ว ซึ่งหมายความว่าไม่มีการรับประกันว่าค่าชั้นข้อมูลที่อัปเดตแล้วจะใช้ได้กับเหตุการณ์ถัดไป
หากต้องการจัดการกรณีเหล่านี้ คุณควรเพิ่มชื่อเหตุการณ์ลงในข้อความเมื่อมีการพุชเข้าไปในชั้นข้อมูล แล้วรอรับชื่อเหตุการณ์นั้นด้วยทริกเกอร์เหตุการณ์ที่กําหนดเอง
ใช้ชั้นข้อมูลกับตัวแฮนเดิลเหตุการณ์
ออบเจ็กต์ dataLayer ใช้คําสั่ง event เพื่อเริ่มการส่งเหตุการณ์
แท็ก Google และ Tag Manager ใช้ตัวแปรชั้นข้อมูลพิเศษที่เรียกว่า
event ซึ่งใช้โดยเครื่องมือตรวจหาเหตุการณ์ JavaScript เพื่อทําให้แท็กทํางานเมื่อผู้ใช้
โต้ตอบกับองค์ประกอบของเว็บไซต์ เช่น คุณอาจต้องการเรียกใช้แท็กเครื่องมือวัด Conversion เมื่อผู้ใช้คลิกปุ่มยืนยันการซื้อ ระบบอาจเรียกใช้เหตุการณ์เมื่อใดก็ตามที่ผู้ใช้โต้ตอบกับองค์ประกอบของเว็บไซต์ เช่น ลิงก์ ปุ่ม
การเลื่อน ฯลฯ
ฟังก์ชันการทำงานนี้จะดำเนินการโดยการเรียกใช้ dataLayer.push() เมื่อเกิดเหตุการณ์
ขึ้น ไวยากรณ์สำหรับการส่งเหตุการณ์ด้วย dataLayer.push() มีดังนี้
dataLayer.push({'event': 'event_name'});
โดยที่ event_name คือสตริงที่อธิบายเหตุการณ์ เช่น 'login',
purchase หรือ search
ใช้ dataLayer.push() เพื่อส่งข้อมูลเหตุการณ์เมื่อมีการดำเนินการที่คุณต้องการวัด
ตัวอย่างเช่น หากต้องการส่งเหตุการณ์เมื่อผู้ใช้คลิกปุ่ม ให้แก้ไขตัวแฮนเดิลonclickของปุ่มเพื่อเรียกใช้ dataLayer.push() ดังนี้
<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>
คุณสามารถพุชตัวแปรชั้นข้อมูลไปยังชั้นข้อมูลแบบไดนามิกเพื่อบันทึกข้อมูล เช่น ค่าที่ป้อนหรือเลือกในแบบฟอร์ม ข้อมูลเมตาที่เชื่อมโยงกับวิดีโอที่ผู้เข้าชมกำลังเล่น สีของผลิตภัณฑ์ (เช่น รถยนต์) ที่ผู้เข้าชมปรับแต่ง URL ปลายทางของลิงก์ที่คลิก ฯลฯ
เช่นเดียวกับเหตุการณ์ ฟังก์ชันการทำงานนี้จะดำเนินการโดยการเรียกใช้ push() API
เพื่อเพิ่มหรือแทนที่ตัวแปรชั้นข้อมูลในชั้นข้อมูล ไวยากรณ์พื้นฐานสำหรับการ
ตั้งค่าตัวแปรชั้นข้อมูลแบบไดนามิกมีดังนี้
dataLayer.push({'variable_name': 'variable_value'});
โดย 'variable_name' คือสตริงที่ระบุชื่อของตัวแปรชั้นข้อมูลที่จะตั้งค่า และ 'variable_value' คือสตริงที่ระบุค่าของตัวแปรชั้นข้อมูลที่จะตั้งค่าหรือแทนที่
ตัวอย่างเช่น หากต้องการตั้งค่าตัวแปรชั้นข้อมูลที่มีค่ากำหนดสีเมื่อผู้เข้าชม มีส่วนร่วมกับเครื่องมือปรับแต่งผลิตภัณฑ์ คุณอาจพุชตัวแปรชั้นข้อมูลแบบไดนามิกต่อไปนี้
dataLayer.push({'color': 'red'});
การพุชครั้งเดียว ตัวแปรหลายรายการ
คุณสามารถส่งตัวแปรและเหตุการณ์หลายรายการพร้อมกันได้
dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customize'
});
เก็บตัวแปรชั้นข้อมูลไว้
หากต้องการคงตัวแปรชั้นข้อมูลระหว่างหน้าเว็บ ให้เรียกใช้ dataLayer.push() หลังจากสร้างอินสแตนซ์ชั้นข้อมูลในการโหลดหน้าเว็บแต่ละครั้ง และพุชตัวแปรไปยังชั้นข้อมูล หากต้องการให้ตัวแปรชั้นข้อมูลเหล่านี้พร้อมใช้งานใน Tag Manager เมื่อโหลดคอนเทนเนอร์ ให้เพิ่มการเรียกใช้ dataLayer.push() เหนือโค้ดคอนเทนเนอร์ของ Tag Manager ดังที่แสดงด้านล่าง
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'Pageview',
'pagePath': 'https://www.googleanalytics.dev/pancakes',
'pageTitle': 'Pancake Event Signup',
'visitorType': 'customer'
});
</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 -->
ตัวแปรแต่ละรายการที่ประกาศภายในออบเจ็กต์ชั้นข้อมูลจะยังคงอยู่ตราบใดที่ผู้เข้าชมยังคงอยู่ในหน้าปัจจุบัน ตัวแปรชั้นข้อมูลที่เกี่ยวข้อง
ในหน้าต่างๆ (เช่น visitorType) ต้องประกาศในชั้นข้อมูลในแต่ละหน้า
ของเว็บไซต์ แม้ว่าคุณไม่จำเป็นต้องใส่ชุดตัวแปรเดียวกันในชั้นข้อมูลในทุกหน้า แต่คุณควรใช้รูปแบบการตั้งชื่อที่สอดคล้องกัน กล่าวคือ หากคุณตั้งค่าหมวดหมู่หน้าเว็บในหน้าลงชื่อสมัครใช้โดยใช้ตัวแปรที่ชื่อ pageCategory หน้าผลิตภัณฑ์และหน้าซื้อควรใช้ตัวแปร pageCategory ด้วย
การแก้ปัญหา
เคล็ดลับการแก้ปัญหาชั้นข้อมูลมีดังนี้
อย่าเขียนทับตัวแปร window.dataLayer: เมื่อใช้ data
layer โดยตรง (เช่น dataLayer = [{'item': 'value'}])) ระบบจะเขียนทับค่าที่มีอยู่ทั้งหมดใน dataLayer การติดตั้ง Tag Manager ควรสร้างอินสแตนซ์ของชั้นข้อมูลไว้สูงที่สุดเท่าที่จะเป็นไปได้ในซอร์สโค้ด เหนือข้อมูลโค้ดคอนเทนเนอร์ โดยใช้ window.dataLayer =
window.dataLayer || []; หลังจากประกาศ dataLayer แล้ว ให้ใช้
dataLayer.push({'item': 'value'}) เพื่อเพิ่มค่าอื่นๆ ลงในค่าดังกล่าว และหากค่าเหล่านั้น
ต้องพร้อมใช้งานใน Tag Manager เมื่อหน้าเว็บโหลด dataLayer.push() การเรียกใช้ดังกล่าวจะต้องอยู่เหนือโค้ดคอนเทนเนอร์ Tag Manager ด้วย
ชื่อออบเจ็กต์ dataLayerต้องคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่: หากคุณพยายามพุชตัวแปร
หรือเหตุการณ์โดยใช้ตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ไม่ถูกต้อง การพุชจะไม่ทำงาน
datalayer.push({'pageTitle': 'Home'}); // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'}); // Good (dataLayer in camel case)
ต้องเรียกใช้ dataLayer.push ด้วยออบเจ็กต์ JavaScript ที่ถูกต้อง ชื่อตัวแปรของชั้นข้อมูลทั้งหมดควรอยู่ในเครื่องหมายคำพูด
dataLayer.push({new-variable: 'value'}); // Bad - no quote marks
dataLayer.push({'new-variable': 'value'}); // Good - proper quote marks
ตั้งชื่อตัวแปรให้สอดคล้องกันในทุกหน้า: หากคุณใช้ชื่อตัวแปรที่แตกต่างกันสำหรับแนวคิดเดียวกันในหน้าต่างๆ แท็กจะเรียกใช้ในตำแหน่งที่ต้องการทั้งหมดอย่างสอดคล้องกันไม่ได้
ไม่ดี:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});
ดี:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});
เปลี่ยนชื่อชั้นข้อมูล
ชื่อเริ่มต้นของออบเจ็กต์ชั้นข้อมูลที่เริ่มต้นโดยแท็ก Google หรือ Tag Manager คือ dataLayer หากต้องการใช้ชื่ออื่นสำหรับชั้นข้อมูล คุณสามารถทำได้โดยแก้ไขค่าพารามิเตอร์ชั้นข้อมูลในข้อมูลโค้ดแท็ก Google หรือข้อมูลโค้ดคอนเทนเนอร์ Tag Manager ด้วยชื่อที่คุณเลือก
gtag.js
เพิ่มพารามิเตอร์การค้นหาชื่อ "l" ลงใน URL เพื่อตั้งชื่อชั้นข้อมูลใหม่
เช่น l=myNewName อัปเดตอินสแตนซ์ทั้งหมดของ dataLayer ในข้อมูลโค้ดแท็ก Google
เป็นชื่อใหม่
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
Tag Manager
แทนที่ค่าพารามิเตอร์ Data Layer (ไฮไลต์ไว้ด้านล่าง) ในข้อมูลโค้ดคอนเทนเนอร์ ด้วยชื่อที่คุณเลือก
<!-- 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','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
เมื่อเปลี่ยนชื่อแล้ว การอ้างอิงทั้งหมดไปยังชั้นข้อมูล (เช่น เมื่อประกาศชั้นข้อมูล
เหนือข้อมูลโค้ด หรือเมื่อพุชเหตุการณ์หรือตัวแปรชั้นข้อมูลแบบไดนามิก
ไปยังชั้นข้อมูลด้วยคำสั่ง .push()) จะต้องได้รับการปรับให้สอดคล้องกับ
ชื่อชั้นข้อมูลที่กำหนดเอง
<script>
myNewName = window.dataLayer || [];
myNewName.push({'variable_name': 'variable_value'});
</script>
วิธีการชั้นข้อมูลที่กำหนดเอง
หากคุณพุชฟังก์ชันไปยังเลเยอร์ข้อมูล ระบบจะเรียกใช้ฟังก์ชันดังกล่าวโดยตั้งค่านี้เป็น โมเดลข้อมูลแบบนามธรรม โมเดลข้อมูลเชิงนามธรรมนี้สามารถรับและตั้งค่าให้กับที่เก็บคีย์ ค่า รวมถึงมีวิธีรีเซ็ต Data Layer ด้วย
ตั้งค่า
ฟังก์ชัน set ในโมเดลข้อมูลเชิงนามธรรมช่วยให้คุณตั้งค่าเพื่อดึงข้อมูล
ผ่าน get ได้
window.dataLayer.push(function() {
this.set('time', new Date());
});
รับ
get ฟังก์ชันในโมเดลข้อมูลเชิงนามธรรมช่วยให้คุณดึงค่าที่ตั้งไว้ได้
window.dataLayer.push(function() {
const existingTime = this.get('time');
if (existingTime !== null) {
// Change behavior based on whether or not this value exists...
} else {
// ...
}
})
รีเซ็ต
ฟังก์ชัน reset ในโมเดลข้อมูลเชิงนามธรรมช่วยให้คุณรีเซ็ตข้อมูลใน
data layer ได้ ซึ่งจะมีประโยชน์มากที่สุดกับหน้าเว็บที่จะยังคงเปิดอยู่และขนาดของ Data
Layer จะเพิ่มขึ้นเรื่อยๆ เมื่อเวลาผ่านไป หากต้องการรีเซ็ต Data Layer ให้ใช้โค้ดต่อไปนี้
window.dataLayer.push(function() {
this.reset();
})