ไลบรารี 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()
แท็กอื่นที่ไม่พร้อมกัน
แม้ว่าแท็ก 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