บทแนะนำ: Google Analytics

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

ข้อกำหนด

บทแนะนำนี้คาดหวังว่าคุณมีส่วนขยายสำหรับการเขียนที่ทุกคนคุ้นเคยสำหรับ Google Chrome หากคุณต้องการข้อมูลเกี่ยวกับวิธีเขียนส่วนขยาย โปรดอ่านบทแนะนำสำหรับการเริ่มต้นใช้งาน

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

การตั้งค่าข้อมูลวิเคราะห์ที่มีการกรอกข้อมูลส่วนขยาย Chrome

การติดตั้งโค้ดติดตาม

ข้อมูลโค้ดติดตาม Google Analytics มาตรฐานจะดึงไฟล์ชื่อ ga.js จาก URL ที่มีการป้องกันด้วย SSL หากโหลดหน้าเว็บปัจจุบันโดยใช้โปรโตคอล https:// ส่วนขยายและแอปพลิเคชันของ Chrome อาจใช้เฉพาะเวอร์ชันที่มีการปกป้องด้วย SSL ของga.js นโยบายรักษาความปลอดภัยเนื้อหาเริ่มต้นของ Chrome ไม่อนุญาตให้โหลด ga.js ผ่าน HTTP ที่ไม่ปลอดภัย อีกทั้งข้อเท็จจริงที่ว่าส่วนขยาย Chrome โฮสต์อยู่ภายใต้สคีมา chrome-extension:// จึงต้องปรับเปลี่ยนข้อมูลโค้ดการติดตามตามปกติเล็กน้อยเพื่อดึง ga.js จาก https://ssl.google-analytics.com/ga.js โดยตรงแทนตำแหน่งเริ่มต้น

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

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

นอกจากนี้ คุณต้องตรวจสอบว่าส่วนขยายมีสิทธิ์เข้าถึงเพื่อโหลดทรัพยากรโดยผ่อนปรนนโยบายรักษาความปลอดภัยเนื้อหาเริ่มต้น คำจำกัดความของนโยบายใน manifest.json อาจมีลักษณะดังนี้

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  ...
}

นี่คือหน้าเว็บป๊อปอัป (popup.html) ซึ่งโหลดโค้ดติดตามแบบอะซิงโครนัสผ่านไฟล์ JavaScript ภายนอก (popup.js) และติดตามการดูหน้าเว็บเดียว

<!DOCTYPE html>
<html>
 <head>
   ...
  <script src="popup.js"></script>
 </head>
 <body>
   ...
 </body>
</html>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

โปรดทราบว่าคุณควรแทนที่สตริง UA-XXXXXXXX-X ด้วยหมายเลขบัญชี Google Analytics ของคุณเอง

การติดตามการดูหน้าเว็บ

โค้ด _gaq.push(['_trackPageview']); จะติดตามการดูหน้าเว็บเดียว คุณสามารถใช้โค้ดนี้ ในหน้าใดก็ได้ในส่วนขยาย เมื่อวางบนหน้าพื้นหลัง ระบบจะบันทึกการดู 1 ครั้งต่อเซสชันของเบราว์เซอร์ เมื่อวางบนป๊อปอัป ป๊อปอัปจะบันทึกการแสดงผลทุกครั้งที่เปิดป๊อปอัป

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

มุมมอง Analytics ของเนื้อหายอดนิยมสำหรับเว็บไซต์

การตรวจสอบคำขอข้อมูลวิเคราะห์

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

หน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่แสดงคำขอ __utm.gif

เหตุการณ์การติดตาม

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

<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>

เขียนฟังก์ชันที่ส่งเหตุการณ์การคลิกไปยัง Google Analytics ดังนี้

function trackButton(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
};

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

var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', trackButtonClick);
}

หน้าภาพรวมการติดตามเหตุการณ์ของ Google Analytics จะแสดงเมตริกเกี่ยวกับจำนวนครั้งที่มีการคลิกปุ่มแต่ละปุ่ม

มุมมอง Analytics ของข้อมูลการติดตามเหตุการณ์สำหรับเว็บไซต์

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

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

รหัสตัวอย่าง

ส่วนขยายตัวอย่างที่ใช้เทคนิคเหล่านี้มีอยู่ในที่เก็บตัวอย่าง