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

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

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

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

1. ส่งเหตุการณ์ไปยังผลิตภัณฑ์ของ Google โดยใช้คำสั่ง event
2. ตั้งค่าที่ส่งพร้อมกับทุกเหตุการณ์โดยใช้คำสั่ง set

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

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

• ทำความคุ้นเคยกับวิธีการทำงานของแท็ก Google
• ติดตั้งแท็ก Google แล้ว

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง

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

ตัวอย่างต่อไปนี้แสดงวิธีอัปเดตโค้ดเพื่อโหลดแท็ก 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 ที่เกี่ยวข้องกับผลิตภัณฑ์แต่ละรายการ โปรดอ่านเอกสารเฉพาะผลิตภัณฑ์ ดังนี้

• Conversion ของ Google Ads และรีมาร์เก็ตติ้ง
• Campaign Manager และ Display & Video 360
• Search Ads 360
• Google Analytics

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

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

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

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

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

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

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

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

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

ตัวอย่าง

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

<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 Analytics: ตรวจสอบรายงานแบบเรียลไทม์
   • Google Ads: ตรวจสอบตารางการกระทำที่ถือเป็น Conversion และดูคอลัมน์สถานะ (อาจใช้เวลาถึง 24 ชั่วโมงในการอัปเดต)
   • Floodlight: ใช้ผู้ช่วยแท็กเพื่อยืนยันว่าแท็ก Floodlight เริ่มทำงาน

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

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

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