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

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

ประเภทกิจกรรม

เหตุการณ์ Google Analytics จัดกลุ่มเป็น 4 หมวดหมู่ดังนี้

ประเภทเหตุการณ์ ลิงก์ ต้องตั้งค่าไหม คำอธิบายและกรณีการใช้งาน
รวบรวมโดยอัตโนมัติ ดูข้อมูลเพิ่มเติม ไม่ ระบบจะรวบรวมโดยค่าเริ่มต้นเมื่อคุณตั้งค่าแท็ก Google Analytics ในเว็บไซต์หรือแอป ตัวอย่างเช่น first_visit, session_start และ user_engagement
การวัดที่ปรับปรุงแล้ว ดูข้อมูลเพิ่มเติม ไม่ (โดยปกติ) ระบบจะรวบรวมโดยอัตโนมัติเมื่อเปิดใช้การวัดที่ปรับปรุงแล้วใน UI ของ Google Analytics วัดการโต้ตอบบนเว็บทั่วไป เช่น scroll, click และ file_download
แนะนำ ข้อมูลอ้างอิงเหตุการณ์ที่แนะนำ มี เหตุการณ์ที่ได้มาตรฐานสำหรับธุรกิจประเภทต่างๆ (เช่น ค้าปลีก การท่องเที่ยว เกม) ซึ่งจะปลดล็อกแผงการรายงานที่สร้างไว้ล่วงหน้า ตัวอย่าง: purchase, login, sign_up
กำหนดเอง ดูข้อมูลเพิ่มเติม มี เหตุการณ์ที่คุณกําหนดเองเนื่องจากไม่มีเหตุการณ์อัตโนมัติ เหตุการณ์ที่ปรับปรุงแล้ว หรือเหตุการณ์ที่แนะนําที่สร้างไว้ล่วงหน้าซึ่งตรงกับความต้องการของคุณ เข้าถึงได้โดยใช้รายงานที่กำหนดเอง

คู่มือนี้จะแสดงวิธีตั้งค่าเหตุการณ์ที่แนะนําและเหตุการณ์ที่กําหนดเองใน เว็บไซต์โดยใช้แท็ก 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 บางอย่างลงในเหตุการณ์ได้

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

การติดตามการโต้ตอบต่างๆ ของผู้ใช้เกี่ยวข้องกับการใช้gtag('event', ...)การเรียกหลายครั้งทั่วทั้ง JavaScript ของเว็บไซต์ โดยแต่ละครั้งจะทริกเกอร์ตามการกระทําหรือเงื่อนไขที่เฉพาะเจาะจง ตัวอย่างใช้ทั้งเหตุการณ์ที่แนะนําและเหตุการณ์ที่กําหนดเอง

เช่น หากต้องการติดตามกิจกรรมต่างๆ เช่น การเข้าสู่ระบบของผู้ใช้ การแชร์เนื้อหา และการดูบทแนะนำจนจบ ให้ใช้gtag('event', ...) การเรียกแยกกัน ดังนี้

ตัวอย่าง: การติดตามการเข้าสู่ระบบ

ข้อมูลโค้ดนี้จะรวมอยู่ในฟังก์ชัน JavaScript ที่จัดการ การเข้าสู่ระบบของผู้ใช้ที่สำเร็จ

// Send a 'login' event when a user signs in
gtag('event', 'login', {
  method: 'Email' // Example parameter indicating login method
});

ตัวอย่าง: การติดตามการแชร์เนื้อหา

ข้อมูลโค้ดนี้จะเชื่อมโยงกับกิจกรรมการคลิกของปุ่มแชร์

// Send a 'share' event when a user clicks a share button
gtag('event', 'share', {
  method: 'Facebook',
  content_type: 'Article',
  item_id: 'C12345' // Example parameter for the shared item
});

ตัวอย่าง: การติดตามเหตุการณ์ที่กําหนดเอง

ระบบจะเรียกใช้ข้อมูลโค้ดนี้เมื่อผู้ใช้ดูบทแนะนำในเว็บไซต์จนจบ

// Send a custom event
gtag('event', 'tutorial_complete', {
  tutorial_name: 'Introduction to GA4'
});

คุณฝังgtag('event', ...)การเรียกเหล่านี้ไว้ในจุดต่างๆ ในโค้ดของเว็บไซต์ เพื่อบันทึกข้อมูลในเวลาที่เหมาะสม ระบบจะส่งเหตุการณ์แต่ละรายการไปยัง Google Analytics เมื่อเกิดเหตุการณ์ขึ้น ไม่มีการใช้ไวยากรณ์พิเศษหรือการเรียกครั้งเดียวเพื่อกำหนดหรือ ส่งเหตุการณ์ประเภทต่างๆ หลายรายการเป็นกลุ่มด้วย gtag.js คุณเรียก gtag('event', ...) สำหรับแต่ละเหตุการณ์ที่ต้องการส่ง

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

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

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

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