การส่งข้อมูลไปยัง Google Analytics

บรรทัดสุดท้ายของข้อมูลโค้ดการวัด JavaScript จะเพิ่มคำสั่ง send ลงในคิวคำสั่ง ga() เพื่อส่งการดูหน้าเว็บไปยัง Google Analytics ดังนี้

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

ออบเจ็กต์ที่กำลังส่งคือเครื่องมือติดตามที่ตั้งเวลาสำหรับการสร้างในบรรทัดโค้ดก่อนหน้า และข้อมูลที่ส่งจะเป็นข้อมูลที่จัดเก็บไว้ในเครื่องมือติดตามนั้น

คู่มือนี้อธิบายวิธีการต่างๆ ในการส่งข้อมูลไปยัง Google Analytics และอธิบายวิธีควบคุมข้อมูลที่ส่ง

Hit, ประเภท Hit และ Measurement Protocol

เมื่อเครื่องมือติดตามส่งข้อมูลไปยัง Google Analytics จะเรียกว่าการส่ง Hit และทุก Hit ต้องมีประเภท Hit แท็ก Google Analytics จะส่ง Hit ประเภท pageview ส่วน Hit ประเภทอื่นๆ ได้แก่ screenview, event, transaction, item, social, exception และ timing คู่มือนี้จะสรุปแนวคิดและวิธีการที่พบได้ทั่วไปสำหรับ Hit ทุกประเภท คำแนะนำแต่ละรายการสำหรับ Hit แต่ละประเภทจะอยู่ในส่วนการวัดการโต้ตอบทั่วไปของผู้ใช้ในแถบนำทางด้านซ้าย

Hit คือคำขอ HTTP ซึ่งประกอบด้วยคู่ฟิลด์และค่าที่เข้ารหัสเป็นสตริงข้อความค้นหา และส่งไปยัง Measurement Protocol

หากคุณเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ไว้เมื่อโหลดหน้าเว็บที่ใช้ analytics.js คุณจะเห็น Hit ที่กำลังส่งในแท็บเครือข่าย มองหาคำขอที่ส่งไปยัง google-analytics.com/collect

ข้อมูลที่ส่ง

เมื่อส่ง Hit ไปยัง Measurement Protocol เครื่องมือติดตามจะส่งช่องทั้งหมดที่จัดเก็บไว้ในปัจจุบันและเป็นพารามิเตอร์ Measurement Protocol ที่ถูกต้อง ตัวอย่างเช่น มีการส่งช่องอย่าง title และ location แต่ไม่ได้ส่ง cookieDomain และ hitCallback

ในบางกรณี คุณต้องการส่งช่องไปยัง Google Analytics สำหรับ Hit ปัจจุบัน แต่ไม่ต้องส่งสำหรับ Hit ที่ตามมา ตัวอย่างนี้คือ Event Hit ที่ช่อง eventAction และ eventLabel เกี่ยวข้องกับ Hit ปัจจุบันเท่านั้น

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

วิธีการส่ง

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

การใช้คิวคำสั่ง ga()

ลายเซ็นสำหรับเพิ่มคำสั่ง send ในคิวคำสั่ง ga() มีดังนี้

ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

ดังที่กล่าวไว้ข้างต้น ระบบจะส่งค่าที่ระบุผ่านพารามิเตอร์ hitType, ...fields และ fieldsObject สำหรับ Hit ปัจจุบันเท่านั้น ระบบจะไม่จัดเก็บไว้ในออบเจ็กต์ตัวติดตาม และจะไม่มีการส่งพร้อมกับ Hit ที่ตามมา

หากมีการตั้งค่าช่องใดที่ส่งด้วยคำสั่ง send ในออบเจ็กต์เครื่องมือติดตามอยู่แล้ว ระบบจะใช้ค่าที่ส่งผ่านในคำสั่งแทนค่าที่จัดเก็บไว้ในเครื่องมือติดตาม

การเรียกคำสั่ง send ต้องระบุ hitType และอาจต้องใช้พารามิเตอร์อื่นๆ ด้วย ทั้งนี้ขึ้นอยู่กับประเภทที่ระบุ โปรดดูรายละเอียดเพิ่มเติมในคําแนะนําแต่ละรายการเกี่ยวกับการวัดการโต้ตอบทั่วไปของผู้ใช้ในแถบนำทางด้านซ้าย

วิธีที่ง่ายที่สุดในการใช้คำสั่ง send ซึ่งใช้ได้กับ Hit ทุกประเภทคือการส่งทุกช่องโดยใช้พารามิเตอร์ fieldsObject เช่น

ga('send', {
  hitType: 'event',
  eventCategory: 'Video',
  eventAction: 'play',
  eventLabel: 'cats.mp4'
});

เพื่อความสะดวก Hit บางประเภทจะอนุญาตให้ส่งผ่านช่องที่ใช้กันโดยทั่วไปโดยตรงเป็นอาร์กิวเมนต์ในคำสั่ง send เช่น คำสั่ง send ข้างต้นสำหรับประเภท Hit "เหตุการณ์" อาจเขียนใหม่เป็น

ga('send', 'event', 'Video', 'play', 'cats.mp4');

ดูรายการที่สมบูรณ์ของฟิลด์ที่สามารถส่งผ่านเป็นอาร์กิวเมนต์สำหรับ Hit ประเภทต่างๆ ได้ที่ส่วน "พารามิเตอร์" ของข้อมูลอ้างอิงวิธีการส่ง

การใช้ตัวติดตามที่มีชื่อ

หากใช้เครื่องมือติดตามที่มีชื่อแทนที่จะเป็นเครื่องมือติดตามเริ่มต้น คุณสามารถส่งชื่ออุปกรณ์ติดตามในสตริงคำสั่งได้

ระบบจะเรียกใช้คำสั่ง send ต่อไปนี้ในเครื่องมือติดตามชื่อ "myTracker":

ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');

ในออบเจ็กต์ตัวติดตามเอง

หากมีการอ้างอิงไปยังออบเจ็กต์เครื่องมือติดตาม คุณจะเรียกใช้เมธอด send ของเครื่องมือติดตามนั้นได้โดยตรง โดยทำดังนี้

ga(function(tracker) {
  tracker.send('event', 'Video', 'play', 'cats.mp4');
});

การรู้ว่ามีการส่ง Hit เมื่อใด

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

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

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

hitCallback

หากต้องการรับการแจ้งเตือนเมื่อมีการส่ง Hit เสร็จสิ้น ให้ตั้งค่าช่อง hitCallback hitCallback เป็นฟังก์ชันที่จะเรียกทันทีที่ส่ง Hit สำเร็จ

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

// 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: function() {
      form.submit();
    }
  });
});

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

ตัวอย่างด้านบนทำงานได้เป็นอย่างดี แต่มีปัญหาร้ายแรงอย่างหนึ่ง หากโหลดไลบรารี analytics.js ไม่สำเร็จ (ไม่ว่าด้วยเหตุผลใดก็ตาม) ฟังก์ชัน hitCallback จะไม่ทำงาน และหากฟังก์ชัน hitCallback ไม่ทํางาน ผู้ใช้จะส่งแบบฟอร์มไม่ได้

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

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

// 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);

  // Keeps track of whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where `hitCallback` 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: submitForm
  });
});

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

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

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

ตอนนี้คุณสามารถรวมฟังก์ชัน hitCallback ทั้งหมดด้วยการหมดเวลาได้อย่างง่ายดายเพื่อดูแลให้เว็บไซต์ทำงานได้ตามที่คาดไว้แม้ในกรณีที่ Hit ส่งไม่สำเร็จหรือไลบรารี analytics.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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: createFunctionWithTimeout(function() {
      form.submit();
    })
  });
});

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

โดยค่าเริ่มต้น analytics.js จะเลือกวิธี HTTP และกลไกการส่งที่เพื่อส่ง Hit ได้อย่างมีประสิทธิภาพสูงสุด ทั้ง 3 ตัวเลือกคือ 'image' (โดยใช้ออบเจ็กต์ Image), 'xhr' (ใช้ออบเจ็กต์ XMLHttpRequest) หรือ 'beacon' โดยใช้เมธอด navigator.sendBeacon ใหม่

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

ถ้าเบราว์เซอร์ของผู้ใช้สนับสนุน navigator.sendBeacon คุณสามารถระบุ 'beacon' เป็นกลไก transport และไม่ต้องห่วงเรื่องการตั้งค่าการเรียกกลับของ Hit

โค้ดต่อไปนี้กำหนดกลไกการส่งเป็น 'beacon' ในเบราว์เซอร์ที่รองรับ

ga('create', 'UA-XXXXX-Y', 'auto');

// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');

ปัจจุบัน analytics.js จะใช้ navigator.sendBeacon เท่านั้นหากตั้งค่ากลไกการส่งเป็น 'beacon' แต่ในอนาคต analytics.js มีแนวโน้มที่จะเปลี่ยนไปใช้ 'beacon' เป็นกลไกเริ่มต้นในเบราว์เซอร์ที่รองรับ

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

บางครั้งการวัดการโต้ตอบของผู้ใช้บางประเภทอาจต้องใช้การติดตั้งใช้งานที่ซับซ้อน อย่างไรก็ตาม ในหลายๆ กรณีการติดตั้งเหล่านี้ได้รับการพัฒนาและให้บริการเป็นปลั๊กอิน analytics.js แล้ว คำแนะนำถัดไปอธิบายวิธีใช้ปลั๊กอิน analytics.js กับคิวคำสั่ง ga()