ชั้นข้อมูลคือออบเจ็กต์ที่ 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 ออกแบบมาให้อ้างอิงข้อมูลที่เพิ่มลงในชั้นข้อมูลได้ง่ายๆ อย่างเป็นระเบียบและคาดการณ์ได้ แทนที่จะแยกวิเคราะห์ตัวแปร ข้อมูลธุรกรรม หมวดหมู่หน้าเว็บ และสัญญาณอื่นๆ ที่กระจายทั่วหน้าเว็บ การใช้ชั้นข้อมูลที่มีตัวแปรและค่าที่เกี่ยวข้องจะช่วยให้มั่นใจว่าข้อมูลที่เกี่ยวข้องจะพร้อมใช้งานเมื่อแท็กของคุณจำเป็นต้องใช้
บริการติดตั้ง
สําหรับการติดตั้งหน้าเว็บ 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
ซึ่ง Listener เหตุการณ์ของ 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
: เมื่อคุณใช้ชั้นข้อมูลโดยตรง (เช่น 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
แทนที่ค่าพารามิเตอร์ชั้นข้อมูล (ตามที่ไฮไลต์ด้านล่าง) ในข้อมูลโค้ดคอนเทนเนอร์ด้วยชื่อที่ต้องการ
<!-- 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>
วิธีการชั้นข้อมูลที่กำหนดเอง
หากคุณพุชฟังก์ชันไปยังชั้นข้อมูล ฟังก์ชันดังกล่าวจะเรียกใช้ด้วยชุดนี้ไปยังโมเดลข้อมูลนามธรรม โมเดลข้อมูลแบบนามธรรมนี้สามารถรับและกำหนดการตั้งค่าไปยังที่เก็บคีย์ค่า รวมถึงแสดงวิธีรีเซ็ตชั้นข้อมูลด้วย
ตั้งค่า
ฟังก์ชัน 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
ในโมเดลข้อมูลนามธรรมช่วยให้คุณรีเซ็ตข้อมูลในชั้นข้อมูลได้ วิธีนี้มีประโยชน์มากที่สุดสำหรับหน้าที่จะยังคงเปิดอยู่ และขนาดของชั้นข้อมูลยังคงเพิ่มขึ้นเรื่อยๆ เมื่อเวลาผ่านไป หากต้องการรีเซ็ตชั้นข้อมูล
ให้ใช้โค้ดต่อไปนี้
window.dataLayer.push(function() {
this.reset();
})