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

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

คู่มือนี้จะแสดงวิธีตั้งค่าเหตุการณ์ที่แนะนําและเหตุการณ์ที่กําหนดเองบน เว็บไซต์โดยใช้แท็ก Google (gtag.js) หรือ Google Tag Manager คุณไม่จําเป็นต้องตั้งค่าเหตุการณ์ที่รวบรวมโดยอัตโนมัติและเหตุการณ์การวัดที่ปรับปรุงแล้ว

กลุ่มเป้าหมาย

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


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

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

และจะถือว่าคุณมีสิ่งต่อไปนี้ด้วย

  • การเข้าถึงซอร์สโค้ดของเว็บไซต์
  • บทบาทผู้แก้ไขหรือสูงกว่าในบัญชี Google Analytics

ภาพรวมของแท็ก Google (gtag.js)

ใช้ API ของแท็ก Google (gtag.js) เพื่อส่ง เหตุการณ์ไปยัง Google Analytics API มีฟังก์ชันเดียวที่เรียกว่า gtag() และเมื่อใดก็ตามที่ต้องการส่งเหตุการณ์ไปยัง Google Analytics ให้ใช้ไวยากรณ์ต่อไปนี้

gtag('event', '<event_name>', {
  <event_parameters>
});

ในตัวอย่างนี้ ฟังก์ชัน gtag() จะมีองค์ประกอบต่อไปนี้

  • คําสั่ง event ที่บอก Google ว่าคุณกําลังส่งเหตุการณ์
  • ชื่อเหตุการณ์ที่แนะนําหรือเหตุการณ์ที่กําหนดเอง
  • (ไม่บังคับ) ชุด พารามิเตอร์ ที่ให้ข้อมูลเพิ่มเติม เกี่ยวกับเหตุการณ์

ตัวอย่างเช่น เหตุการณ์ต่อไปนี้เป็นเหตุการณ์ที่แนะนําชื่อ screen_view ที่มีพารามิเตอร์ 2 รายการ

gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

เพิ่มเหตุการณ์ลงใน JavaScript

gtag() เป็นฟังก์ชัน JavaScript ดังนั้นคุณจึงต้องเพิ่มฟังก์ชันลงใน JavaScript ในหน้าเว็บ เช่น คุณสามารถเพิ่มฟังก์ชันภายใน <script>แท็ก หรือในไฟล์ JavaScript แยกต่างหากที่คุณนําเข้าไปยังหน้า HTML

คุณสามารถเพิ่มเหตุการณ์ลงใน JavaScript ที่ใดก็ได้ใต้ ข้อมูลโค้ดแท็ก Google Google จะไม่ประมวลผลข้อมูลจากเหตุการณ์ที่คุณวางไว้เหนือข้อมูลโค้ดแท็ก Google ตัวอย่างเช่น โค้ดตัวอย่างต่อไปนี้มีเหตุการณ์ที่แนะนํา ชื่อ screen_view และเหตุการณ์ที่กําหนดเองชื่อ signup_newsletter ภายในแท็ก <script>

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

    gtag('config', 'G-XXXXXXXXXX');
    </script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the page</title>
</head>
<body>
    <p>Welcome to my website!</p>
    
    <script>
      /**
      *   The following events are sent when the page loads. You send
      *   recommended and custom events the same way. You could wrap
      *   the events in JavaScript functions so they are sent when
      *   users perform specific actions.
      */
      gtag('event', 'screen_view', {
        'app_name': 'myAppName',
        'screen_name': 'Home'
      });
      gtag('event', 'signup_newsletter', {
        'method': 'web'
      });
    </script> 
</body>
</html>

หากต้องการส่งเหตุการณ์ตามการคลิกปุ่ม (หรือการกระทําอื่นๆ ของผู้ใช้) คุณสามารถเพิ่ม JavaScript เพิ่มเติมลงในเหตุการณ์ได้

ดูเหตุการณ์ใน Analytics

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

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

ก่อนหน้า
Web
ถัดไป
เพิ่มพารามิเตอร์