ga.js เป็นไลบรารี JavaScript สำหรับวัดวิธีที่ผู้ใช้โต้ตอบกับเว็บไซต์ของคุณ นี่คือไลบรารีเดิม หากคุณเริ่มต้นใช้งาน Google Analytics คุณควรใช้ไลบรารีการติดตามล่าสุด analytics.js
การเริ่มต้นใช้โค้ดติดตามอย่างรวดเร็ว
ข้อมูลโค้ด Analytics เป็นโค้ด JavaScript สั้นๆ ที่คุณวางลงในหน้าเว็บ ซึ่งจะเปิดใช้งานการติดตามของ Google Analytics โดยการแทรก ga.js
ลงในหน้า หากต้องการใช้โค้ดนี้ในหน้าเว็บ ให้คัดลอกข้อมูลโค้ดด้านล่างโดยแทนที่ UA-XXXXX-X
ด้วยรหัสพร็อพเพอร์ตี้ของเว็บ
วางข้อมูลโค้ดนี้ลงในหน้าเทมเพลตเว็บไซต์โดยให้อยู่ก่อนแท็กปิด </head>
หากคุณจำเป็นต้องทำมากกว่าการติดตามหน้าเว็บพื้นฐาน ให้ดูรายการเมธอดที่มีอยู่ใน API ในข้อมูลอ้างอิงการติดตามและดูรายละเอียดเกี่ยวกับการใช้ไวยากรณ์อะซิงโครนัสได้ที่คู่มือการใช้งาน สำหรับวิธีการแบบทีละขั้นตอนในการตั้งค่าการติดตาม โปรดดูบทความเกี่ยวกับการตั้งค่าการติดตามในศูนย์ช่วยเหลือ
<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
ข้อมูลโค้ดด้านบนแสดงการกำหนดค่าขั้นต่ำที่จำเป็นในการติดตามหน้าเว็บแบบไม่พร้อมกัน โดยจะใช้ _setAccount
เพื่อกำหนดรหัสเว็บพร็อพเพอร์ตี้ของหน้าเว็บ จากนั้นเรียกใช้ _trackPageview
เพื่อส่งข้อมูลการติดตามกลับไปยังเซิร์ฟเวอร์ Google Analytics
สำคัญ: หากกำลังอัปเดตหน้าเว็บจากข้อมูลโค้ดแบบดั้งเดิมเป็นแบบอะซิงโครนัสล่าสุด คุณควรนำข้อมูลโค้ดติดตามที่มีอยู่ออกก่อน เราไม่แนะนำให้ใช้ข้อมูลโค้ดทั้ง 2 อย่างนี้ในหน้าเดียวกัน ดูวิธีการย้ายข้อมูลได้ที่การย้ายข้อมูลไปยังอะซิงโครนัส
วิธีการทำงานของไวยากรณ์แบบอะซิงโครนัส
ออบเจ็กต์ _gaq
คือสิ่งที่ทำให้ไวยากรณ์อะซิงโครนัสใช้งานได้
โดยจะทําหน้าที่เป็นคิว ซึ่งเป็นโครงสร้างข้อมูลแบบมาก่อนและออกก่อนที่รวบรวมการเรียก API จนกว่า ga.js
จะพร้อมเรียกใช้ หากต้องการเพิ่มรายการลงในคิว ให้ใช้เมธอด _gaq.push
หากต้องการพุชการเรียก API ลงในคิว คุณต้องแปลงการเรียกจากไวยากรณ์ JavaScript แบบดั้งเดิมเป็นอาร์เรย์คำสั่ง อาร์เรย์คำสั่งเป็นอาร์เรย์ JavaScript ที่สอดคล้องกับรูปแบบที่กำหนด องค์ประกอบแรกในอาร์เรย์คำสั่งคือชื่อของเมธอดออบเจ็กต์เครื่องมือติดตามที่ต้องการเรียกใช้ ต้องเป็นสตริง องค์ประกอบที่เหลือคืออาร์กิวเมนต์ที่คุณต้องการส่งไปยังเมธอดออบเจ็กต์เครื่องมือติดตาม ซึ่งอาจเป็นค่า JavaScript ใดก็ได้
โค้ดต่อไปนี้เรียกใช้ _trackPageview()
โดยใช้ไวยากรณ์แบบดั้งเดิม
var pageTracker = _gat._getTracker('UA-XXXXX-X'); pageTracker._trackPageview();
โค้ดที่เทียบเท่าในไวยากรณ์อะซิงโครนัสต้องมีการเรียก _gaq.push
2 ครั้ง
_gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']);
ในไวยากรณ์อะซิงโครนัส จะมีการใช้ออบเจ็กต์เครื่องมือติดตามในการสร้างออบเจ็กต์เครื่องมือติดตาม แต่เรายังคงต้องการวิธีตั้งค่ารหัสเว็บพร็อพเพอร์ตี้สำหรับเครื่องมือติดตาม มีการเพิ่มเมธอด _setAccount
เพื่อให้ความสามารถนี้ เมธอดออบเจ็กต์เครื่องมือติดตามอื่นๆ ทั้งหมดจะเหมือนกันทั้งในการติดตามแบบอะซิงโครนัสและแบบดั้งเดิม มีเพียงไวยากรณ์เท่านั้นที่แตกต่างกัน
ดูข้อมูลเพิ่มเติมเกี่ยวกับไวยากรณ์อะซิงโครนัสได้ที่ข้อมูลอ้างอิงการติดตามสำหรับเมธอด _gaq.push
การติดตามด้วยเครื่องจัดการเหตุการณ์ HTML
นอกจากนี้ คุณควรใช้ไวยากรณ์การติดตามแบบไม่พร้อมกันจากภายในเครื่องจัดการเหตุการณ์ DOM ด้วย ตัวอย่างเช่น ปุ่มต่อไปนี้จะสร้างเหตุการณ์เมื่อมีการคลิก
<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>
แม้ว่าจะมีการคลิกปุ่มนี้ก่อนที่เบราว์เซอร์จะโหลด ga.js
เสร็จ แต่เหตุการณ์ก็จะได้รับการบันทึกไว้และดำเนินการในท้ายที่สุด เมื่อใช้การติดตามแบบดั้งเดิม เบราว์เซอร์อาจมีข้อยกเว้นในสถานการณ์นี้
การพุชฟังก์ชันลงในคิว
นอกเหนือจากอาร์เรย์คำสั่งแล้ว คุณยังพุชออบเจ็กต์ฟังก์ชันไปยังคิว _gaq
ได้ด้วย ฟังก์ชันดังกล่าวอาจมี JavaScript ที่กำหนดเองและเช่นเดียวกับอาร์เรย์คำสั่ง โดยระบบจะดำเนินการตามลำดับที่พุชไปยัง _gaq
เทคนิคนี้มีประโยชน์ในการเรียก API การติดตามที่แสดงค่า เช่น โค้ดต่อไปนี้จะสร้าง URL ของ Linker และตั้งค่าพร็อพเพอร์ตี้ href
สําหรับลิงก์ที่มีผลการค้นหา
_gaq.push(function() { var pageTracker = _gat._getTracker('UA-XXXXX-X'); var link = document.getElementById('my-link-id'); link.href = pageTracker._getLinkerUrl('http://example.com/'); });
ตัวอย่างด้านบนใช้ _gat
เพื่อสร้างออบเจ็กต์เครื่องมือติดตาม แต่เนื่องจากมีการกำหนดไว้ให้กับตัวแปรภายใน โค้ดนอกฟังก์ชันจึงไม่สามารถใช้งานได้ แม้วิธีนี้จะยอมรับได้ แต่คุณใช้เมธอด _gat._createTracker
เพื่อสร้างออบเจ็กต์แบบถาวรที่เข้าถึงได้ทั่วโลก
โค้ดต่อไปนี้จะสาธิตวิธีการทํางาน
_gaq.push(function() { var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker'); var link = document.getElementById('my-link-id'); link.href = pageTracker._getLinkerUrl('http://example.com/'); }); _gaq.push(['myTracker._trackPageview']);
ตัวอย่างด้านบนจะสร้างตัวติดตามแบบไม่พร้อมกันภายในฟังก์ชัน แล้วอ้างอิงตามชื่อในอาร์เรย์คำสั่งในภายหลัง
Use Case ที่ตรงข้ามเป็นไปได้เช่นกัน เช่น หากต้องการใช้ออบเจ็กต์ตัวติดตามแบบไม่พร้อมกันที่สร้างขึ้นผ่านอาร์เรย์คำสั่งที่พุชไว้ก่อนหน้านี้ ให้ใช้เมธอด _gat._getTrackerByName
โค้ดต่อไปนี้จะแสดงวิธีการทำงาน
_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']); _gaq.push(function() { var pageTracker = _gat._getTrackerByName('myTracker'); var link = document.getElementById('my-link-id'); link.href = pageTracker._getLinkerUrl('http://example.com/'); });
พุชครั้งเดียว มีหลายคำสั่ง
คุณพุชคำสั่งทั้งหมดพร้อมกันได้แทนที่จะพิมพ์ _gaq.push(...)
สำหรับการโทรแต่ละครั้ง โค้ดต่อไปนี้จะแสดงเทคนิคนี้
_gaq.push( ['_setAccount', 'UA-XXXXX-X'], ['_setDomainName', 'example.com'], ['_setCustomVar', 1, 'Section', 'Life & Style', 3], ['_trackPageview'] );
ซึ่งได้ผลเนื่องจากเมธอด _gaq.push
จะเลียนแบบเมธอด Array.push
ซึ่ง
อนุญาตให้พุชรายการหลายรายการด้วยคำขอเดียวได้
การแยกข้อมูลโค้ด
หากต้องการใส่ข้อมูลโค้ด Analytics ที่ด้านล่างของหน้า คุณไม่จำเป็นต้องใส่ข้อมูลโค้ดทั้งหมดไว้ที่ด้านล่าง
คุณยังคงใช้ประโยชน์ส่วนใหญ่ของการโหลดแบบไม่พร้อมกันได้โดยการแยกข้อมูลโค้ดออกครึ่งหนึ่ง โดยให้ครึ่งแรกอยู่ที่ด้านบนของหน้า แล้วเลื่อนส่วนที่เหลือไปอยู่ด้านล่าง เนื่องจากส่วนแรกของข้อมูลโค้ดติดตามแทบไม่ส่งผลกระทบใดๆ ต่อการแสดงหน้าเว็บ คุณสามารถปล่อยส่วนนั้นไว้ที่ด้านบนและวางส่วนของข้อมูลโค้ดที่แทรก ga.js
ไว้ที่ด้านล่างได้
หน้าเว็บที่มีข้อมูลโค้ดแบบไม่พร้อมกันซึ่งแยกออกครึ่งหนึ่งอาจมีลักษณะดังนี้
<html> <head> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); </script> </head> <body> <p>Page Content</p> <script src="some_random_script.js"></script> <p>Page Content</p> <script type="text/javascript"> (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script> </body> </html>
โค้ดทั้ง 2 ส่วนต้องรวมอยู่ในแท็กสคริปต์ของตัวเอง แต่ต้องย้ายข้อมูลโค้ดอะซิงโครนัสเดิมไปด้านล่างเพียง 6 บรรทัดสุดท้ายของข้อมูลโค้ดอะซิงโครนัสเท่านั้น ทุกบรรทัดที่พุชเมธอดไปยัง _gaq
จะอยู่ด้านบนได้
การหลีกเลี่ยงข้อผิดพลาดทั่วไป
โปรดคำนึงถึงสิ่งต่อไปนี้เมื่อใช้ไวยากรณ์อะซิงโครนัสหรือแบบดั้งเดิม
- ชื่อเมธอดคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
หากคุณใช้ชื่อเมธอดโดยไม่มีตัวพิมพ์ที่เหมาะสม การเรียกใช้เมธอดจะใช้งานไม่ได้ ตัวอย่าง:_gaq.push(['_trackpageview']); // bad _gaq.push(['_trackPageview']); // good
- ใช้ชื่อวิธีการที่ถูกต้อง
หากการติดตามทำงานไม่ถูกต้อง ให้ตรวจสอบให้แน่ใจว่าคุณใช้ชื่อที่ถูกต้องของเมธอดแล้ว ตัวอย่าง:_gaq.push(['_setDomain', 'example.com']); // bad _gaq.push(['_setDomainName', 'example.com']); // good
- คุณควรส่งเฉพาะสตริงด้วยเครื่องหมายคำพูด ส่วนประเภทอื่นๆ ทั้งหมดไม่ควรอยู่ในเครื่องหมายคำพูด
ควรส่งค่าอื่นๆ ที่ไม่ใช่สตริง เช่น บูลีน, ลิเทอรัลออบเจ็กต์, ฟังก์ชัน หรืออาร์เรย์เข้ามาโดยไม่มีเครื่องหมายคำพูด ใช้เฉพาะเครื่องหมายคําพูดเมื่อคุณส่งผ่านข้อความที่ต้องตีความเป็นสตริงเท่านั้น หากคุณย้ายข้อมูลจากไวยากรณ์แบบดั้งเดิม พารามิเตอร์ฟังก์ชันที่ส่งโดยไม่มีเครื่องหมายคำพูดไม่ควรอยู่ในไวยากรณ์อะซิงโครนัส ตัวอย่าง:_gaq.push(['_setAllowLinker', 'false']); // bad _gaq.push(['_setAllowLinker', false]); // good
- ตรวจสอบว่าสตริงไม่มีช่องว่างนำหน้าหรือต่อท้าย
ตัวอย่าง_gaq.push(['_setAccount', ' UA-65432-1']); // bad _gaq.push(['_setAccount', 'UA-65432-1']); // good
การปิดใช้งานการติดตาม
ในบางกรณี คุณอาจต้องปิดใช้โค้ดติดตาม Google Analytics ในหน้าเว็บโดยไม่ต้องนำข้อมูลโค้ดออก ตัวอย่างเช่น คุณอาจทำเช่นนี้หากนโยบายความเป็นส่วนตัวของเว็บไซต์อนุญาตให้ผู้เข้าชมเลือกไม่ใช้การติดตามของ Google Analytics ได้
ตอนนี้ข้อมูลโค้ดติดตาม ga.js
มีพร็อพเพอร์ตี้หน้าต่างที่เมื่อตั้งค่าเป็น true
แล้ว จะปิดใช้ข้อมูลการติดตามไม่ให้ส่งข้อมูลไปยัง Google Analytics
เมื่อ Google Analytics พยายามตั้งค่าคุกกี้หรือส่งข้อมูลกลับไปยังเซิร์ฟเวอร์ Google Analytics ระบบจะตรวจสอบว่ามีการตั้งค่าพร็อพเพอร์ตี้นี้เป็น true
หรือไม่ ซึ่งจะมีผลเหมือนกับว่าผู้เข้าชมได้
ติดตั้งปลั๊กอินสำหรับเลือกไม่ใช้เบราว์เซอร์ของ Google Analytics ไว้แล้ว
หากต้องการปิดใช้การติดตาม ให้ตั้งค่าพร็อพเพอร์ตี้หน้าต่างต่อไปนี้เป็น "จริง"
window['ga-disable-UA-XXXXXX-Y'] = true;
ตำแหน่งที่ค่า UA-XXXXXX-Y
สอดคล้องกับรหัสเว็บพร็อพเพอร์ตี้ที่คุณต้องการปิดใช้การติดตาม
ต้องตั้งค่าพร็อพเพอร์ตี้หน้าต่างนี้ก่อนที่จะเรียกใช้โค้ดติดตาม คุณต้องตั้งค่าพร็อพเพอร์ตี้นี้ในแต่ละหน้าที่คุณต้องการปิดใช้การติดตาม Google Analytics หากไม่ได้ตั้งค่าพร็อพเพอร์ตี้หรือตั้งค่าเป็น "เท็จ" การติดตามจะทำงานตามปกติ
ตัวอย่างเช่น หากโค้ดติดตาม Google Analytics ในหน้าเว็บประกอบด้วย
_gaq.push['_setAccount', 'UA-123456-1']
และคุณต้องการปิดใช้โค้ดติดตามนั้นไม่ให้ตั้งค่าคุกกี้หรือส่งข้อมูลกลับไปยัง Google Analytics ให้ใช้โค้ดต่อไปนี้ก่อนที่จะมีการเรียกโค้ดติดตาม
window['ga-disable-UA-123456-1'] = true;
หากคุณใช้ตัวติดตามหลายตัวในหน้าเว็บที่มีรหัสเว็บพร็อพเพอร์ตี้หลายรายการ คุณต้องตั้งค่าตัวแปร window['ga-disable-UA-XXXXXX-Y']
ที่เทียบเท่าเป็น true
สำหรับแต่ละเว็บพร็อพเพอร์ตี้เพื่อปิดใช้การติดตามของ Google Analytics โดยสมบูรณ์ในหน้านั้น
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างโค้ดง่ายๆ ที่คุณใช้เพื่อให้ฟังก์ชันเลือกไม่ใช้สำหรับผู้ใช้ได้
ก่อนอื่น ให้เพิ่มลิงก์ HTML ใหม่ลงในเว็บไซต์เพื่อดำเนินการตรรกะการเลือกไม่ใช้
<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>
จากนั้นเพิ่มข้อมูลโค้ดต่อไปนี้ก่อนข้อมูลโค้ด ga.js อย่าลืมแทนที่ค่า gaProperty
จาก UA-XXXX-Y
เป็นพร็อพเพอร์ตี้ที่ใช้ในเว็บไซต์
ซึ่งเป็นค่าเดียวกับที่คุณส่งไปยังคำสั่ง _setAccount
<script> // Set to the same value as the web property used on the site var gaProperty = 'UA-XXXX-Y'; // Disable tracking if the opt-out cookie exists. var disableStr = 'ga-disable-' + gaProperty; if (document.cookie.indexOf(disableStr + '=true') > -1) { window[disableStr] = true; } // Opt-out function function gaOptout() { document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'; window[disableStr] = true; } </script>
เมื่อผู้ใช้คลิกลิงก์ HTML ที่เลือกไม่ใช้ ฟังก์ชัน gaOptout
ที่กำหนดเองจะทำงาน โดยจะตั้งค่าคุกกี้เป็นเวลานานในอนาคตและปิดใช้การเก็บรวบรวมข้อมูล analytics.js
เมื่อผู้ใช้กลับมาที่เว็บไซต์นี้ สคริปต์ด้านบนจะตรวจสอบว่าได้ตั้งค่าคุกกี้สำหรับเลือกไม่ใช้แล้วหรือไม่ หากมี ระบบจะปิดใช้การรวบรวมข้อมูล analytics.js ด้วย
การบังคับใช้ SSL (HTTPS)
หากต้องการบังคับให้ Google Analytics ส่งข้อมูลโดยใช้ SSL เสมอ แม้ว่าจะจากหน้าที่ไม่ปลอดภัย (HTTP) ให้ใช้เมธอด
_gat._forceSSL
ตามตัวอย่างนี้
_gaq.push(['_setAccount', 'UA-12345-1']); _gaq.push(['_gat._forceSSL']); // Send all hits using SSL, even from insecure (HTTP) pages. _gaq.push(['_trackPageview']);