Google Tag Manager - ชั้นข้อมูล

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

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

ให้เรายกตัวอย่างเว็บไซต์อีคอมเมิร์ซข้อกำหนดทางธุรกิจอาจรวมถึง -

• ข้อมูลการทำธุรกรรมมีรายละเอียดเกี่ยวกับสิ่งที่ซื้อ

• ข้อมูลผู้เยี่ยมชมเกี่ยวกับผู้ที่ซื้อ

• รายละเอียดอื่น ๆ เกี่ยวกับการซื้อเช่นสถานที่ซื้อและเวลาใด

• สุดท้ายนี้ข้อมูลเกี่ยวกับปัจจัยอื่น ๆ เช่นผู้เยี่ยมชมสมัครรับการอัปเดตอีเมลหรือไม่

ดังนั้นโดยสรุปชั้นข้อมูลจะมีข้อมูลที่สามารถใช้โดยเครื่องมือ / ผู้ใช้ / ผู้มีส่วนได้ส่วนเสียต่างๆได้ตามต้องการ

ใน Google Tag Manager dataLayer คืออาร์เรย์ JavaScript ประกอบด้วยคู่คีย์ - ค่า ต่อไปนี้เป็นตัวอย่างสั้น ๆ ของ dataLayer ที่มีประเภทข้อมูลต่างๆ -

dataLayer = [{
   'products': [{
      'name': 'Western Cotton',
      'tuning': 'High-G',
      'price': 49.75
   },
   {
      'name': 'Fenda Speakers',
      'tuning': 'Drop-C',
      'price': 199
   }],
   'stores': ['Hyderabad', 'Bangloer],
   'date': Sat Sep 13 2017 17:05:32 GMT+0530 (IST),
   'employee': {'name': 'Raghav}
}];

ที่นี่เรามีค่าที่แตกต่างกันเช่นอาร์เรย์ของวัตถุ (ผลิตภัณฑ์) ค่าตัวเลข (ราคา) อาร์เรย์ของสตริง (ร้านค้า) วัตถุวันที่และวัตถุ (ชื่อ)

อีกประการหนึ่งเมื่อคุณวางโค้ดคอนเทนเนอร์ Google Tag Manager ในเว็บไซต์ของคุณชั้นข้อมูลจะถูกสร้างขึ้นโดยอัตโนมัติ

ในตัวของมันเองชั้นข้อมูลเป็นแนวคิดที่ค่อนข้างซับซ้อนที่จะเข้าใจในครั้งแรก บทนี้จะให้ข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับวิธีโต้ตอบกับชั้นข้อมูล

เหตุการณ์ชั้นข้อมูล

ตัวอย่างสั้น ๆ ของเหตุการณ์ชั้นข้อมูลอาจเป็นแบบฟอร์มสมัครรับจดหมายข่าวซึ่งไม่สามารถติดตามได้ง่ายด้วยผู้ฟัง GTM อัตโนมัติ นักพัฒนาเว็บไซต์สามารถสนับสนุนให้คุณพุชเหตุการณ์ชั้นข้อมูลเมื่อสมาชิกใหม่ได้ป้อนอีเมลของตนบนเว็บไซต์ของคุณ โค้ดของเหตุการณ์นี้ควรมีลักษณะดังนี้ -

push({‘event’: ‘new_subscriber’});

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

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'formLocation': ‘footer’,
   'event': new_subscriber
});

นอกจากนี้ Google Tag Manager จะพุชชุดของค่าบางอย่างไปยังชั้นข้อมูลของเว็บแอปพลิเคชันโดยค่าเริ่มต้น ค่าเหล่านี้คือ -

• gtm.js - ส่งไปที่ชั้นข้อมูลทันทีที่ Google Tag Manager พร้อมทำงาน

• gtm.dom - ส่งไปยังชั้นข้อมูลเมื่อ DOM พร้อม

• gtm.load - ผลักไปที่ชั้นข้อมูลเมื่อหน้าต่างโหลดจนเต็ม

การตรวจสอบชั้นข้อมูล

ดังที่เราทราบแล้วในตอนนี้มีเหตุการณ์บางอย่างที่สร้างขึ้นจากการโต้ตอบใด ๆ บนหน้าจอ

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

Step 1 - คลิก Window Loaded แล้วคลิก Data Layer

ข้อมูลที่แสดงในแท็บชั้นข้อมูลเกี่ยวกับเหตุการณ์ Window Loaded

แสดงเป็น - {event: 'gtm.load', gtm.uniqueEventId: 3}

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

Step 2- เมื่อคุณอยู่ในบล็อกของคุณให้คลิกขวาที่ส่วนใดก็ได้ในหน้า ในเมนูบริบทที่ปรากฏขึ้นให้คลิกตรวจสอบ แผงจะแสดงที่ด้านขวาของหน้าจอโดยเปิดใช้งานแท็บองค์ประกอบ

Step 3- คลิกคอนโซล เมื่ออยู่ในโหมดคอนโซลให้คลิกไอคอนมุมบนซ้ายเพื่อล้างข้อความทั้งหมดที่แสดง ดูภาพหน้าจอต่อไปนี้สำหรับการอ้างอิง

Step 4- เมื่อล้างหน้าต่างสำหรับข้อความก่อนหน้าแล้วให้พิมพ์ dataLayer ตรวจสอบให้แน่ใจว่าการใช้อักษรตัวพิมพ์ใหญ่สำหรับ L เสร็จสิ้น ชื่อนี้กำหนดโดย Google Tag Manager ในชั้นข้อมูล อย่างไรก็ตามนักพัฒนาของคุณอาจกำหนดชื่ออื่นตามและเมื่อจำเป็น

Step 5- กด Enter หลัง dataLayer มันจะแสดงรายละเอียดดังต่อไปนี้

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

ค่าที่มีอยู่เกิดจาก Gadget ของ Blogger ที่ใช้งานอยู่ที่ตำแหน่ง / ช่องว่างนั้น ๆ นี่คือเหตุผลว่าทำไมจึงมีข้อมูลบางอย่างอยู่ที่นั่น

ถ้าคุณดูที่วัตถุที่ 1 คุณจะสังเกตได้ว่าเหตุการณ์ที่ยิงเป็น - gtm.dom GTM เริ่มทำงานในขณะโหลดหน้า

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

ตัวแปรในชั้นข้อมูล

เมื่อเราคุ้นเคยกับชั้นข้อมูลแล้วให้เราลองอ่านตัวแปรตัวใดตัวหนึ่งโดยใช้อินเทอร์เฟซ Google Tag Manager

ที่นี่เราจะพยายามอ่านเหตุการณ์โดยใช้ตัวแปรชั้นข้อมูล

ถ้าเราเห็นตัวเลขดังกล่าวข้างต้นเหตุการณ์ตัวแปรถือgtm.dom เราจะสร้างตัวแปรจากอินเทอร์เฟซ GTM และดูว่าตัวแปรนั้นแสดงผลอย่างไรในแท็บตัวแปรภายใต้ Google Tag Manager

Step 1- ในอินเทอร์เฟซ Google Tag Manager ให้ไปที่ตัวแปร เลื่อนลงไปที่ตัวแปรที่ผู้ใช้กำหนด คลิกใหม่

Step 2 - ตั้งชื่อให้กับตัวแปรใหม่นี้ให้เราเรียกมันว่า varEvent

Step 3 - คลิกเลือกประเภทตัวแปรเพื่อเริ่มการตั้งค่า ...

Step 4 - เลือกตัวแปรชั้นข้อมูลจากรายการ

Step 5 - เมื่อคุณเลือกตัวแปรชั้นข้อมูลคุณจะต้องระบุชื่อและเวอร์ชัน

ชื่อนี้มาจากชั้นข้อมูลจริงของ Google Tag Manager ตามที่กล่าวไว้ก่อนหน้านี้ตัวแปรที่เราจะติดตามคือ - เหตุการณ์

Step 6 - ป้อนเหตุการณ์ในชื่อตัวแปรชั้นข้อมูล

Step 7 - คลิกบันทึก

Step 8 - คลิกดูตัวอย่างเพื่อดูการเปลี่ยนแปลงที่แสดงในดีบักเกอร์

Step 9- เมื่อโหลดหน้าแล้วให้คลิก Window Loaded จากนั้นเลือกตัวแปร เลื่อนไปที่ด้านล่างสุดของส่วนตัวแปรคุณจะเห็น varEvent ตามที่ไฮไลต์ไว้ในภาพหน้าจอด้านบน

ดังที่เห็นในภาพหน้าจอด้านบนค่าจะเป็น gtm.load

ด้วยวิธีนี้เราสามารถตรวจสอบชั้นข้อมูลและจับค่าในชั้นข้อมูลได้ตามต้องการ