กำหนดค่าผลิตภัณฑ์ 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 รหัส ได้แก่ รหัสเดิม 1 รหัส (AW) และรหัสแท็ก Google 1 รหัส (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

คำสั่ง 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

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีที่เป็นไปได้ 1 วิธีในการวัดการสมัครรับจดหมายข่าวเมื่อผู้ใช้คลิกปุ่ม ตัวอย่างนี้ใช้เหตุการณ์ที่กําหนดเองและส่งไปยังพร็อพเพอร์ตี้ 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" onlick="newsletterSignup()">Sign me up!</button>
   ...
</body>

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

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

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

คำสั่งจะมีรูปแบบดังต่อไปนี้

gtag('set', 'parameterName');

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

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

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