กำหนดค่าผลิตภัณฑ์ Google และส่งข้อมูลเหตุการณ์

หน้านี้มีไว้สําหรับนักพัฒนาแอปที่ต้องกําหนดค่าแท็ก Google โดยใช้ gtag.js นอกจากนี้ แท็ก Google ยังช่วยให้คุณปรับการตั้งค่าบางอย่างในอินเทอร์เฟซผู้ใช้ได้ด้วย โปรดดูที่กําหนดค่าการตั้งค่าแท็ก Google

หลังจากติดตั้งแท็ก Google แล้ว คุณจะเรียกใช้คําสั่ง gtag() ได้ทุกที่ในโค้ด หลังจาก ข้อมูลโค้ดแท็ก Google

หน้านี้จะแสดงวิธีดำเนินการต่อไปนี้

  1. สร้างโฟลว์ข้อมูลระหว่างเว็บไซต์กับผลิตภัณฑ์ของ Google โดยใช้คําสั่ง config
  2. ส่งเหตุการณ์ไปยังผลิตภัณฑ์ของ Google โดยใช้คําสั่ง event
  3. ตั้งค่าที่จะส่งไปพร้อมกับทุกเหตุการณ์โดยใช้คําสั่ง set

ก่อนเริ่มต้น

คู่มือนี้จะถือว่าคุณได้ดำเนินการต่อไปนี้แล้ว

หากต้องการตั้งค่าโฟลว์ข้อมูล คุณต้องมีสิ่งต่อไปนี้

  • สิทธิ์เข้าถึงโค้ดเว็บไซต์ที่คุณติดตั้งแท็ก Google
  • รหัสแท็กของผลิตภัณฑ์ Google ที่คุณต้องการเชื่อมต่อกับแท็ก Google

รหัสแท็กคืออะไรและดูได้จากที่ใด รหัสแท็กจะระบุแท็ก Google แท็ก Google รายการเดียวมีรหัสแท็กได้หลายรหัส ตัวอย่างเช่น หากคุณใช้ Google Ads ตอนนี้แท็กของคุณจะมี 2 รหัส ได้แก่ รหัสเดิม (AW) และรหัสแท็ก Google (GT) หน้าจอแสดงแท็ก Google ภายใน Google Ads ที่มีรหัสแท็ก 2 รายการ รหัสแท็กใช้แทนกันได้ ตารางต่อไปนี้แสดงภาพรวมของแท็กที่เข้ากันได้กับแท็ก Google
คำนำหน้า ประเภทรหัส คำอธิบาย
GT-XXXXXX แท็ก Google แท็ก Google ที่สร้างขึ้นใหม่แต่ละรายการจะมีคํานําหน้า GT และรหัสที่ไม่ซ้ำกัน
G-XXXXXX แท็ก Google (คํานําหน้าเดิม) แท็ก Google Analytics 4 คือแท็ก Google ที่มีคํานําหน้า G และรหัสที่ไม่ซ้ำกัน
AW-XXXXXX แท็ก Google (คํานําหน้าเดิม) แท็ก Google Ads คือแท็ก Google ที่มีคํานําหน้า AW และรหัสที่ไม่ซ้ำกัน
DC-XXXXXX แท็ก Google (คํานําหน้าเดิม) แท็ก Google Floodlight คือแท็ก Google ที่มีคํานําหน้า DC และรหัสที่ไม่ซ้ำกัน
แท็ก Universal Analytics (UA) เข้ากันไม่ได้กับแท็ก Google (GT)

ค้นหารหัสแท็ก โดยทำดังนี้

ขั้นตอนที่ 1: เชื่อมต่อผลิตภัณฑ์ของ Google กับแท็ก

ใช้คําสั่ง config เพื่อสร้างโฟลว์ข้อมูลไปยังผลิตภัณฑ์ของ Google

เกี่ยวกับคําสั่ง config

คําสั่ง config จะระบุผลิตภัณฑ์ของ Google ที่คุณต้องการส่งข้อมูลเหตุการณ์ไปให้ คําสั่งนี้มีรูปแบบดังนี้

gtag('config', 'TAG_ID', {<additional_config_params>});

พารามิเตอร์การกําหนดค่าเพิ่มเติม

คุณสามารถปรับและขยายคําสั่ง config ได้โดยการระบุพารามิเตอร์ใน ออบเจ็กต์ {<additional_config_params>} ที่ไม่บังคับ ตัวอย่างเช่น การเพิ่มพารามิเตอร์ต่อไปนี้จะป้องกันไม่ให้ระบบส่งการดูหน้าเว็บของ Google Analytics โดยอัตโนมัติ

gtag('config', 'TAG_ID', {'send_page_view': false});

ตั้งค่าการเก็บรวบรวมข้อมูล

หากต้องการตั้งค่าการเก็บรวบรวมข้อมูลสําหรับผลิตภัณฑ์ของ Google ให้เพิ่มคําสั่ง config พร้อมรหัสแท็ก

ตัวอย่าง

แท็ก Google (GT-XXXXXX) จะส่งข้อมูลไปยัง ปลายทางที่คุณ กําหนดไว้ เช่น Google Ads และ GA4

ตัวอย่างต่อไปนี้แสดงวิธีอัปเดตโค้ดเพื่อโหลดแท็ก Google ที่ 2 ซึ่งเชื่อมต่อกับปลายทาง Floodlight

หากต้องการส่งข้อมูลไปยัง Floodlight (รหัสแท็ก DC-ZZZZZZ) ให้เพิ่มคําสั่ง config อีกรายการหลังจากเริ่มต้นแท็ก Google รายการแรก (รหัสแท็ก GT-XXXXXX)

<head>
 ...
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());
  gtag('config', 'GT-XXXXXX');
  gtag('config', 'DC-ZZZZZZ');
</script>
</head>

ลักษณะการทํางาน config เฉพาะผลิตภัณฑ์

คําสั่ง config อาจเริ่มทํางานบางอย่างสําหรับผลิตภัณฑ์นั้นด้วย ทั้งนี้ขึ้นอยู่กับผลิตภัณฑ์ที่ระบุใน TAG_ID ตัวอย่างเช่น ในบางกรณีคําสั่ง config จะบอกให้ gtag.js เริ่มเหตุการณ์การดูหน้าเว็บ

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับลักษณะการทํางานของคําสั่ง config ที่เกี่ยวข้องกับผลิตภัณฑ์แต่ละรายการ โปรดอ่านเอกสารเฉพาะผลิตภัณฑ์ ดังนี้

ขั้นตอนที่ 2: ส่งข้อมูลด้วย event

หลังจากกําหนดค่าการเชื่อมต่อกับผลิตภัณฑ์ของ Google แล้ว คุณต้องใช้คําสั่ง event เพื่อส่งข้อมูล

เกี่ยวกับคําสั่ง event

คําสั่ง event ช่วยให้คุณส่งข้อมูลเหตุการณ์ไปยังผลิตภัณฑ์ที่คุณระบุด้วย config ได้ คําสั่งนี้มีรูปแบบดังนี้

gtag('event', 'event_name', {
  'key': 'value',
});

เกี่ยวกับชื่อเหตุการณ์และคู่คีย์-ค่า

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

เหตุการณ์ที่กําหนดเอง: หากต้องการกําหนดเหตุการณ์และโครงสร้างข้อมูลของคุณเอง คุณสามารถป้อนค่าที่กําหนดเองเพื่อส่งเหตุการณ์ที่กําหนดเองได้

ตั้งค่าเหตุการณ์

คุณสามารถเรียกใช้เมธอด event ได้ทุกที่ในโค้ด หลังจาก เริ่มต้นแท็ก Google

  1. กําหนดเหตุการณ์ หากใช้เหตุการณ์ที่แนะนํา โปรดตรวจสอบว่าคุณใช้ ชื่อเหตุการณ์ที่เป็นมาตรฐาน และ คีย์-ค่าที่กำหนดไว้แล้ว

  2. กําหนดเวลาที่จะทริกเกอร์เหตุการณ์ เช่น หากระบบจะส่งเหตุการณ์เมื่อการโหลดหน้าเว็บหรือเมื่อมีคนคลิกปุ่ม

ตัวอย่าง

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

<head>
   ...
   /* 1. Initialize the Google tag and gtag.js library */
   <!-- 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>
</head>

<body>
   <script>
     let date = Date.now();
     /* 2. Define your event. */
     function newsletterSignup() {
       gtag('event', 'newsletter_signup', {
       'time': date,
       });
   }
   </script>
   ...
   /* 3. Trigger your event */
   <button type="submit" onclick="newsletterSignup()">Sign me up!</button>
   ...
</body>

ไม่บังคับ: ส่งข้อมูลไปพร้อมกับทุกเหตุการณ์โดยใช้ set

คําสั่ง set ช่วยให้คุณกําหนดพารามิเตอร์ที่จะเชื่อมโยงกับเหตุการณ์ต่อๆ ไปทั้งหมดในหน้าเว็บได้

ตัวอย่างเช่น คุณสามารถแชร์ พารามิเตอร์ แคมเปญเพื่อให้แท็กหลายรายการในหน้าเดียวกันเข้าถึงได้

คําสั่งนี้มีรูปแบบดังนี้

gtag('set', 'parameterName');

ขั้นตอนที่ 3: ตรวจสอบการตั้งค่า

วิธีตรวจสอบว่าระบบส่งข้อมูลเหตุการณ์อย่างถูกต้อง

  1. เปิดผลิตภัณฑ์ของ Google ที่คุณคาดว่าจะเห็นข้อมูล
  2. ตรวจสอบว่ามีข้อมูลเข้ามาหรือไม่ ผลิตภัณฑ์แต่ละรายการจะมีตําแหน่งที่แตกต่างกันซึ่งคุณสามารถตรวจสอบได้ว่าระบบได้รับข้อมูลหรือไม่ ดังนี้

ขั้นตอนถัดไป

หลังจากตั้งค่าผลิตภัณฑ์และเหตุการณ์ของ Google แล้ว คุณก็ตั้งค่าแท็ก Google ขั้นพื้นฐานเสร็จเรียบร้อย

หากคุณจัดการผลิตภัณฑ์หลายรายการและต้องการจัดการโฟลว์ข้อมูลของผลิตภัณฑ์เหล่านั้นในรายละเอียดเพิ่มเติม โปรดดู จัดกลุ่มและกำหนดเส้นทางข้อมูล