เพิ่ม 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()

แท็ก 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