ข้อมูลเบื้องต้นเกี่ยวกับ 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

สําคัญ: หากกําลังอัปเดตหน้าเว็บจากข้อมูลโค้ดแบบดั้งเดิมเป็นเวอร์ชันล่าสุดแบบไม่พร้อมกัน คุณควรนําข้อมูลโค้ดการติดตามที่มีอยู่ออกก่อน เราไม่แนะนําให้ใช้ข้อมูลโค้ดทั้งสองร่วมกันในหน้าเดียวกัน โปรดดูวิธีการย้ายข้อมูลในการย้ายข้อมูลไปยัง Async

วิธีการทํางานของไวยากรณ์แบบอะซิงโครนัส

ออบเจ็กต์ _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']);

ตัวอย่างด้านบนสร้างเครื่องมือติดตามแบบอะซิงโครนัสภายในฟังก์ชัน จากนั้นอ้างอิงภายหลังตามชื่อในอาร์เรย์คําสั่ง

นอกจากนี้ยังมีกรณีการใช้งานตรงกันข้ามด้วย เช่น หากคุณจําเป็นต้องใช้ออบเจ็กต์เครื่องมือติดตามแบบอะซิงโครนัสที่สร้างขึ้นผ่านอาร์เรย์คําสั่งที่ส่งมาก่อนหน้านี้ ให้ใช้เมธอด _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/');
});

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

พุช 1 ครั้ง คําสั่งหลายรายการ

แทนที่จะต้องพิมพ์ _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 ต่อไปนี้เป็น true:

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

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