ส่งข้อมูลไปยัง Google Analytics ด้วย gtag.js

หน้านี้จะอธิบายวิธีใช้คำสั่ง gtag.js เพื่อส่งข้อมูลจากเว็บไซต์ไปยัง Google Analytics

ส่งข้อมูลด้วยคำสั่ง event

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

gtag('event', 'login', {'method': 'Google'});

ดูข้อมูลเพิ่มเติมเกี่ยวกับคำสั่ง event ในเอกสารอ้างอิง API

กำหนดเส้นทางข้อมูลไปยังกลุ่มและพร็อพเพอร์ตี้

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

ตัวอย่างเช่น ตัวอย่างโค้ดต่อไปนี้แสดงวิธีกำหนดเส้นทางเหตุการณ์ sign_in ไปยังกลุ่ม "เอเจนซี" ที่มีพร็อพเพอร์ตี้ Google Analytics 2 รายการ

// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });

// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีจัดกลุ่มและกำหนดเส้นทางข้อมูล

รับทราบเมื่อมีการส่งกิจกรรม

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

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

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

ใช้ฟังก์ชันเรียกกลับของเหตุการณ์

คุณสามารถใช้ฟังก์ชันเรียกกลับของเหตุการณ์ที่จะเรียกใช้ทันทีที่ส่งเหตุการณ์สำเร็จ

ตัวอย่างต่อไปนี้แสดงวิธียกเลิกการส่งเริ่มต้นของแบบฟอร์ม ส่งเหตุการณ์ไปยัง Google Analytics แล้วส่งแบบฟอร์มอีกครั้งโดยใช้ฟังก์ชันเรียกกลับของเหตุการณ์

// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevent the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Send the event to Google Analytics and
  // resubmit the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});

จัดการระยะหมดเวลา

ตัวอย่างข้างต้นมีข้อด้อยอยู่ 1 ข้อคือ หากโหลดไลบรารี gtag.js ไม่สำเร็จ ฟังก์ชันเรียกกลับของเหตุการณ์จะไม่ทำงานและผู้ใช้จะส่งแบบฟอร์มนี้ไม่ได้

เมื่อใดก็ตามที่คุณใส่ฟังก์ชันการทำงานของเว็บไซต์ที่สำคัญภายในฟังก์ชันโค้ดเรียกกลับของเหตุการณ์ คุณควรใช้ฟังก์ชันระยะหมดเวลาทุกครั้งเพื่อจัดการกรณีที่ไลบรารี gtag.js โหลดไม่สำเร็จ

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

// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Creates a timeout to call submitForm after one second.
  setTimeout(submitForm, 1000);

  // Monitors whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where the event callback function fires normally.
  var formSubmitted = false;

  function submitForm() {
    if (!formSubmitted) {
      formSubmitted = true;
      form.submit();
    }
  }

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': submitForm
  });
});

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

ฟังก์ชันยูทิลิตีต่อไปนี้จะยอมรับฟังก์ชันเป็นอินพุตและแสดงผลฟังก์ชันใหม่ หากมีการเรียกฟังก์ชันการแสดงผลก่อนระยะหมดเวลา (ระยะหมดเวลาเริ่มต้นคือ 1 วินาที) ระบบจะล้างระยะหมดเวลาและเรียกใช้ฟังก์ชันอินพุต หากไม่มีการเรียกใช้ฟังก์ชันที่แสดงผลก่อนระยะหมดเวลา ระบบจะเรียกใช้ฟังก์ชันอินพุตโดยไม่คำนึงถึง

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

ตอนนี้คุณสามารถรวมฟังก์ชันโค้ดเรียกกลับของเหตุการณ์ทั้งหมดโดยมีระยะหมดเวลาเพื่อให้เว็บไซต์ทํางานตามที่คาดไว้ได้ แม้ว่าในกรณีที่ส่งเหตุการณ์ไม่สําเร็จหรือไลบรารี gtag.js ไม่โหลดขึ้นมาก็ตาม

// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  gtag('event', 'signup_form', { 'event_callback': {
    createFunctionWithTimeout(function() {
      form.submit();
    })
  }});
});

ระบุกลไกการขนส่งแบบต่างๆ

โดยค่าเริ่มต้น gtag.js จะเลือกวิธี HTTPS และกลไกการรับส่งข้อมูลที่จะส่ง Hit ได้อย่างมีประสิทธิภาพ ตัวเลือกทั้ง 3 อย่าง ได้แก่

  • "image" (โดยใช้ออบเจ็กต์ Image)
  • "xhr" (โดยใช้ออบเจ็กต์ XMLHttpRequest)
  • "บีคอน" (โดยใช้เมธอด navigator.sendBeacon)

วิธีการ 2 แบบแรกจะแชร์ปัญหาที่อธิบายไว้ในส่วนก่อนหน้า นั่นคือ ระบบจะไม่ส่ง Hit หากมีการยกเลิกการโหลดหน้าเว็บ เมธอด navigator.sendBeacon แก้ปัญหานี้ด้วยการส่ง Hit แบบไม่พร้อมกันไปยังเว็บเซิร์ฟเวอร์โดยไม่ต้องตั้งค่าโค้ดเรียกกลับของ Hit

รหัสต่อไปนี้จะกำหนดกลไกการส่งไปยัง 'beacon' สำหรับเบราว์เซอร์ที่รองรับ

gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});