ข้อมูลเบื้องต้นเกี่ยวกับ ga.js (เดิม)

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']);

กลับไปด้านบน