ส่งข้อมูลไปยัง 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 "เหตุการณ์" อาจเขียนใหม่ได้ดังนี้

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 แล้ว คำแนะนำถัดไปจะอธิบายวิธีใช้ปลั๊กอิน analytics.js กับคิวคำสั่ง ga()