ส่งข้อมูลไปยัง 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 ที่ตามมา ตัวอย่างนี้คือ 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 ประเภท "event" Hit อาจเขียนใหม่เป็น

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

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

การใช้เครื่องมือติดตามที่มีชื่อ

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

คําสั่ง 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()