กำหนดค่าผลิตภัณฑ์ 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 เริ่มเหตุการณ์ pageview

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

ขั้นตอนที่ 2: ส่งข้อมูลด้วย 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" onlick="newsletterSignup()">Sign me up!</button>
   ...
</body>

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

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

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

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

gtag('set', 'parameterName');

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

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

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