เพิ่ม analytics.js ลงในเว็บไซต์

ไลบรารี 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 อย่างหลักๆ ดังต่อไปนี้

  1. สร้างองค์ประกอบ <script> ที่เริ่มดาวน์โหลดไลบรารี JavaScript analytics.js แบบไม่พร้อมกันจาก https://www.google-analytics.com/analytics.js
  2. เริ่มต้นฟังก์ชัน ga ร่วม (เรียกว่าคิวคำสั่ง ga()) ซึ่งให้คุณกำหนดเวลาให้คำสั่งเรียกใช้เมื่อไลบรารี analytics.js โหลดและพร้อมใช้งานได้
  3. เพิ่มคำสั่งลงในคิวคำสั่ง ga() เพื่อสร้างออบเจ็กต์ตัวติดตามใหม่สำหรับพร็อพเพอร์ตี้ที่ระบุผ่านพารามิเตอร์ 'GA_MEASUREMENT_ID'
  4. เพิ่มคำสั่งอื่นในคิวคำสั่ง 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