ชั้นข้อมูล

ชั้นข้อมูลคือออบเจ็กต์ที่ 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 ประมวลผลข้อความตามลำดับก่อนและได้ก่อน พื้นฐาน: ข้อความแต่ละข้อความจะได้รับการประมวลผลทีละรายการตามลำดับที่ได้รับ ถ้า ข้อความคือเหตุการณ์ ซึ่งเป็นแท็กที่มีเงื่อนไขทริกเกอร์ซึ่งเป็นไปตามเงื่อนไข จะเริ่มทำงานก่อนที่เครื่องจัดการแท็กจะไปยังข้อความถัดไป

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

สำคัญ: อย่าใช้แท็ก HTML ที่กำหนดเองเพื่อทำให้โค้ดแบบ gtag.js ใช้งานได้ แต่ให้ใช้เทมเพลตแท็กต้นทางของ Tag Manager กับ Google Ads, Analytics แทน และ Floodlight

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

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

ใช้ชั้นข้อมูลกับเครื่องจัดการเหตุการณ์

ออบเจ็กต์ dataLayer ใช้คำสั่ง event เพื่อเริ่มการส่งเหตุการณ์

แท็ก Google และเครื่องจัดการแท็กใช้ตัวแปรชั้นข้อมูลพิเศษที่เรียกว่า 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() หลังจาก ชั้นข้อมูลจะถูกสร้างขึ้นในการโหลดหน้าเว็บแต่ละครั้ง และพุชตัวแปร กับชั้นข้อมูล หากคุณต้องการให้ตัวแปรชั้นข้อมูลเหล่านี้ใช้กับแท็กได้ ตัวจัดการเมื่อโหลดคอนเทนเนอร์แล้ว ให้เพิ่มการเรียก 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'}) เพื่อเพิ่มค่าอื่นๆ ลงใน URL และถ้าค่าเหล่านั้น จะต้องพร้อมใช้ใน 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>

หมายเหตุ: หน้าเว็บหนึ่งหน้ารองรับ dataLayer ออบเจ็กต์เพียง 1 รายการเท่านั้น

วิธีการชั้นข้อมูลที่กำหนดเอง

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

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

ตั้งค่า

ฟังก์ชัน set ในโมเดลข้อมูลแบบนามธรรมช่วยให้คุณกำหนดค่าเพื่อดึง ผ่านการได้รับ

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 ในโมเดลข้อมูลนามธรรมช่วยให้คุณรีเซ็ตข้อมูลใน ของ Google Analytics วิธีนี้มีประโยชน์มากที่สุดเมื่อมีหน้าที่เปิดไว้ และข้อมูล ขนาดของเลเยอร์จะขยายตัวขึ้นเรื่อยๆ ในการรีเซ็ตชั้นข้อมูล ให้ใช้ รหัสต่อไปนี้:

window.dataLayer.push(function() {
  this.reset();
})