ชั้นข้อมูล

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

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

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

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

ใช้ชั้นข้อมูลกับตัวแฮนเดิลเหตุการณ์

ออบเจ็กต์ 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 ปลายทางของลิงก์ที่คลิก เป็นต้น

ฟังก์ชันการทำงานนี้ทำได้โดยการเรียกใช้ API push() เพื่อเพิ่มหรือแทนที่ตัวแปรชั้นข้อมูลในชั้นข้อมูล เช่นเดียวกับเหตุการณ์ ไวยากรณ์พื้นฐานสำหรับการตั้งค่าตัวแปรชั้นข้อมูลแบบไดนามิกมีดังนี้

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>

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

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

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

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

ตั้งค่า

ฟังก์ชัน 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();
})