ไลบรารี analytics.js (หรือที่เรียกว่า "แท็ก Google Analytics") เป็นไลบรารี JavaScript สําหรับการวัดวิธีที่ผู้ใช้โต้ตอบกับเว็บไซต์ของคุณ เอกสารนี้อธิบายวิธีเพิ่มแท็ก Google Analytics ลงในเว็บไซต์
แท็ก Google Analytics
คุณควรเพิ่มแท็ก Google Analytics ไว้ใกล้ด้านบนของแท็ก <head> และก่อนสคริปต์หรือแท็ก CSS อื่นๆ และเพิ่มรหัสพร็อพเพอร์ตี้ของพร็อพเพอร์ตี้ Google Analytics ที่ต้องการทํางานด้วย
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
โค้ดด้านบนมี 4 สิ่งหลักดังนี้
- สร้างเอลิเมนต์
<script>ที่เริ่มดาวน์โหลดไลบรารี JavaScript analytics.js แบบไม่พร้อมกันจากhttps://www.google-analytics.com/analytics.js - เริ่มต้นฟังก์ชัน
gaส่วนกลาง (เรียกว่าคิวคําสั่งga()) ซึ่งจะช่วยให้คุณกําหนดเวลาเรียกใช้คําสั่งได้เมื่อไลบรารี analytics.js โหลดและพร้อมใช้งานแล้ว - เพิ่มคําสั่งไปยังคิวคําสั่ง
ga()เพื่อสร้างออบเจ็กต์เครื่องมือติดตามใหม่สําหรับพร็อพเพอร์ตี้ที่ระบุผ่านพารามิเตอร์'GA_MEASUREMENT_ID' - เพิ่มคําสั่งอีกรายการหนึ่งลงในคิวคําสั่ง
ga()เพื่อส่งการดูหน้าเว็บไปยัง Google Analytics สําหรับหน้าปัจจุบัน
การติดตั้งใช้งานที่กําหนดเองอาจต้องแก้ไขแท็ก Google Analytics 2 บรรทัดสุดท้าย (คําสั่ง create และ send) หรือการเพิ่มโค้ดเพิ่มเติมเพื่อบันทึกการโต้ตอบเพิ่มเติม แต่คุณไม่ควรเปลี่ยนโค้ดที่โหลดไลบรารี analytics.js หรือเริ่มต้นฟังก์ชันคิวคําสั่ง ga()
แท็ก async ทางเลือก
แม้ว่าแท็ก Google Analytics ที่อธิบายไว้ข้างต้นจะช่วยให้มั่นใจได้ว่าสคริปต์จะโหลดและโหลดแบบไม่พร้อมกันในทุกเบราว์เซอร์ แต่ข้อเสียคือไม่อนุญาตให้เบราว์เซอร์ที่ทันสมัยโหลดสคริปต์ล่วงหน้า
แท็ก async สํารองด้านล่างจะเพิ่มการสนับสนุนสําหรับการโหลดล่วงหน้า ซึ่งจะช่วยเพิ่มประสิทธิภาพเล็กๆ น้อยๆ ในเบราว์เซอร์รุ่นใหม่ แต่สามารถลดความสามารถในการโหลดและการทํางานแบบพร้อมกันในเบราว์เซอร์ IE 9 และเบราว์เซอร์รุ่นเก่าบนอุปกรณ์เคลื่อนที่ที่ระบุแอตทริบิวต์สคริปต์ async ไม่ได้ ใช้การกําหนดค่าแท็กนี้เฉพาะในกรณีที่ผู้เข้าชมใช้เบราว์เซอร์ที่ทันสมัยเพื่อเข้าถึงเว็บไซต์ของคุณเป็นหลัก
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
แท็ก Google Analytics บันทึกข้อมูลใด
เมื่อคุณเพิ่มแท็กใดแท็กหนึ่งต่อไปนี้ลงในเว็บไซต์ คุณจะส่งการดูหน้าเว็บสําหรับแต่ละหน้าที่ผู้ใช้เข้าชม Google Analytics จะประมวลผลข้อมูลนี้และอนุมานข้อมูลจํานวนมากได้ เช่น
- เวลาทั้งหมดที่ผู้ใช้อยู่บนเว็บไซต์ของคุณ
- เวลาที่ผู้ใช้อยู่ในแต่ละหน้าและลําดับการเข้าชมหน้าเว็บเหล่านั้น
- ลิงก์ภายในที่มีการคลิก (อิงตาม URL ของการดูหน้าเว็บครั้งถัดไป)
นอกจากนี้: ที่อยู่ IP, สตริง User Agent และการตรวจสอบหน้าเริ่มต้นที่ analytics.js ดําเนินการเมื่อสร้างออบเจ็กต์เครื่องมือติดตามใหม่จะใช้เพื่อระบุสิ่งต่างๆ เช่น
- สถานที่ตั้งทางภูมิศาสตร์ของผู้ใช้
- เบราว์เซอร์และระบบปฏิบัติการที่ใช้งาน
- ขนาดหน้าจอและการติดตั้ง Flash หรือ Java
- เว็บไซต์ที่อ้างอิง
ขั้นตอนถัดไป
สําหรับการรายงานเบื้องต้น ข้อมูลที่เก็บรวบรวมผ่านแท็ก Google Analytics อาจเพียงพอได้ แต่ในหลายๆ กรณีมีคําถามเพิ่มเติมที่คุณต้องการคําตอบเกี่ยวกับผู้ใช้
คู่มือในเว็บไซต์นี้อธิบายวิธีวัดการโต้ตอบที่คุณสนใจด้วย analytics.js แต่ก่อนที่จะใช้ฟีเจอร์ที่เฉพาะเจาะจง ขอแนะนําอย่างยิ่งให้อ่านคู่มือที่ระบุไว้ในส่วนข้อมูลพื้นฐานที่การนําทางด้านซ้าย คู่มือเหล่านี้จะช่วยให้คุณเห็นภาพรวมระดับสูงของไลบรารี analytics.js และช่วยให้คุณเข้าใจตัวอย่างโค้ดที่ใช้ทั่วทั้งเว็บไซต์มากขึ้น
คู่มือถัดไปในชุดนี้จะอธิบายวิธีการทํางานของ analytics.js