ไลบรารี 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 สำหรับหน้าปัจจุบัน
การติดตั้งใช้งานที่กําหนดเองอาจต้องแก้ไข 2 บรรทัดสุดท้ายของแท็ก Google Analytics (คําสั่ง create และ send) หรือเพิ่มโค้ดเพิ่มเติมเพื่อให้มีการโต้ตอบมากขึ้น อย่างไรก็ตาม คุณไม่ควรเปลี่ยนโค้ดที่โหลดไลบรารี analytics.js หรือเริ่มต้นฟังก์ชันคิวคำสั่ง ga()
แท็กทางเลือกที่ไม่พร้อมกัน
แม้ว่าแท็ก Google Analytics ที่อธิบายไว้ข้างต้นจะทำให้สคริปต์โหลดและเรียกใช้แบบไม่พร้อมกันในทุกเบราว์เซอร์ แต่ก็มีข้อเสียคือไม่อนุญาตให้เบราว์เซอร์สมัยใหม่โหลดสคริปต์ล่วงหน้า
แท็กทางเลือกแบบไม่พร้อมกันด้านล่างเพิ่มการรองรับการโหลดล่วงหน้า ซึ่งจะช่วยเพิ่มประสิทธิภาพเล็กน้อยในเบราว์เซอร์รุ่นใหม่ แต่จะลดระดับเป็นการโหลดและการดำเนินการแบบพร้อมกันบน 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