บทแนะนำนี้สาธิตการใช้ Google Analytics เพื่อติดตามการใช้งานส่วนขยายของคุณ หากคุณพัฒนาแอปแพลตฟอร์ม โปรดดู Analytics สำหรับแอป เนื่องจากแอปมีข้อจำกัดจากส่วนขยาย
ข้อกำหนด
บทแนะนำนี้คาดหวังว่าคุณมีส่วนขยายสำหรับการเขียนที่ทุกคนคุ้นเคยสำหรับ Google Chrome หากคุณต้องการข้อมูลเกี่ยวกับวิธีเขียนส่วนขยาย โปรดอ่านบทแนะนำสำหรับการเริ่มต้นใช้งาน
และคุณจะต้องตั้งค่าบัญชี Google Analytics เพื่อติดตามส่วนขยายด้วย โปรดทราบว่าขณะตั้งค่าบัญชี คุณสามารถใช้ค่าใดก็ได้ในช่อง URL ของเว็บไซต์ เนื่องจากส่วนขยายของคุณจะไม่มี URL ของตัวเอง
การติดตั้งโค้ดติดตาม
ข้อมูลโค้ดติดตาม 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 ครั้งต่อเซสชันของเบราว์เซอร์ เมื่อวางบนป๊อปอัป ป๊อปอัปจะบันทึกการแสดงผลทุกครั้งที่เปิดป๊อปอัป
เมื่อดูข้อมูลการดูหน้าเว็บของแต่ละหน้าในส่วนขยาย คุณจะทราบได้ว่าผู้ใช้มีการโต้ตอบกับส่วนขยายกี่ครั้งในแต่ละเซสชันของเบราว์เซอร์
การตรวจสอบคำขอข้อมูลวิเคราะห์
หากต้องการตรวจสอบว่ามีการส่งข้อมูลการติดตามจากส่วนขยายไปยัง Google Analytics คุณสามารถตรวจสอบหน้าของส่วนขยายในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้ (ดูบทแนะนำการแก้ไขข้อบกพร่องสำหรับข้อมูลเพิ่มเติม) ดังที่แสดงในรูปต่อไปนี้ คุณควรเห็นคำขอสำหรับไฟล์ชื่อ __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 จะแสดงเมตริกเกี่ยวกับจำนวนครั้งที่มีการคลิกปุ่มแต่ละปุ่ม
คุณจะเห็นว่าส่วนใดของส่วนขยายที่ได้รับน้อยหรือใช้มากเกินไป ข้อมูลนี้สามารถช่วยเป็นแนวทางในการตัดสินใจเกี่ยวกับการออกแบบ UI ใหม่หรือฟังก์ชันการทำงานเพิ่มเติมในการนำไปใช้
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้การติดตามเหตุการณ์ โปรดดูเอกสารสำหรับนักพัฒนาซอฟต์แวร์ของ Google Analytics
รหัสตัวอย่าง
ส่วนขยายตัวอย่างที่ใช้เทคนิคเหล่านี้มีอยู่ในที่เก็บตัวอย่าง