Introduction Google Anaytics Part 2

หลังจากที่ได้แนะนำเกี่ยวกับ Google Analytics และตัวอย่างการใช้ Asynchronous Syntax ในเบื้องต้นแล้ว วันนี้จะมาอธิบายเกี่ยวกับความสามารถอื่นๆเพิ่มเติมนะครับ


Tracking Event Handlers
เป็นอีกหนึ่งคำสั่งที่ใช้กันบ่อยๆ มีประโยชน์เมื่อเราต้อง Track Data ของ
Event ต่างๆที่เกิดจาก HTML ภายในเพจ เช่น Click , Change ด้วย Asynchronous tracking syntax
ดังนั้นจึงไม่ต้องพึ่งการใช้ DOM event handlers ก็ได้ โดยใช้คำสั่ง ดังนี้

_gaq.push(['_trackEvent', 'Category', 'Action', 'opt_label ' ,'opt_value'])

String   category กลุ่มของ event ที่เรากำหนดไว้เพื่อแบ่งเรื่องราวของการ Tracking Event เป็นกลุ่มๆ ในตัวอย่างนี้ขอยกตัวอย่าง Category เป็น 'bookinghotel'
String   action ชื่อ Event ที่กำหนดเพื่อทำการ Tracking ในตัวอย่างนี้อาจจะเป็น 'booking' , 'cancellation' , 'changedate'
String   opt_label คำอธิบายเกี่วกับ Event พารามิเตอร์นี้เป็น Optional จะใส่หรือไม่ใส่ก็ได้
Int        opt_value ค่าที่เกี่ยวข้องกับ Event  พารามิเตอร์นี้เป็น Optional จะใส่หรือไม่ใส่ก็ได้

ที่นี้ลองมาดูตัวอย่างการใช้คำสั่ง _trackEvent นะครับ จากตัวอย่างนี้จะ Track การทำงานเมื่อมีการกดปุ่มจองข้อมูลโรงแรม โดยเราจะกำหนด Category เป็น 'bookinghotel' และ Action เป็น 'booking' จะได้ Code ดังนี้

<button onclick="_gaq.push(['_trackEvent', 'bookinghotel', 'booking'])"/><button>

One Push, Multiple Commands

จากที่เคยกล่าวไว้ใน Part 1 ว่า _gaq เป็น Asynchronous Syntax ทำงานแบบ Queue โดยจะ push API call เข้ามาใน Queue ดังนั้นเราจึงสามารถส่ง Command หลายๆอันโดยใช้คำสั่ง push เพียงครั้งเดียวก็ได้  หรือจะ push ทีละ Command ก็ได้

_gaq.push(
  ['_setAccount', 'UA-XXXXX-X'],
  ['_setDomainName', 'example.com'],
  ['_setCustomVar', 1, 'Section', 'Life & Style', 3],
  ['_trackPageview']
);

Introduction Google Anaytics Part 1

Google Analytics คือ Javascript ขนาดเล็กที่มีหน้าที่สำหรับ Track ข้อมูลสถิติต่างๆของเวบแยกตาม Analytics Account ID ซึ่งสามารถทำงานได้โดย อ้างอิง script ชื่อ ga.js ลงบนเว็บเพจ โดยกำหนดไว้ใน tag <head></head>

<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>

จาก Code ข้างบนเป็นการ Config Google Anaytics อย่างง่ายๆ เริ่มต้นโดยอ้างอิงถึง ga.js  และกำหนด _setAccount ด้วย Analytics Account ID แล้วเรียกคำสั่ง _trackPageview เพื่อส่ง  Tracking Data กลับไปยัง Google Analytics Servers

สังเกตว่าจาก Code ข้างบนมี Object ชื่อ _gaq เป็น Asynchronous Syntax โดยจะทำงานเป็น Queue หรือที่เรียกว่า  first-in,first-out พูดง่ายๆก็คือ ใช้ Data Structure แบบ Stack ซึ่งจะเก็บรวมทุก API call เรียกว่าการ push ด้วยคำสั่ง _gaq.push  โดยจะ push API call เข้ามาใน Queue จนกระทั่ง ga.js ทำการ Execute

API call ที่ถูก push เข้ามาใน Queue จะต้องมีการแปลงกลับเป็น JavaScript แบบเก่าในรูปแบบ ของ Command Array ดังนั้นจึงมีการกำหนด Format ของ Asynchronous Syntax โดยบังคับให้ element แรกเป็นชื่อ Tracker ของ Object และต้องกำหนด Type เป็น string ส่วน element ที่เหลือคือ arguments ที่ต้องการส่งค่าไปยัง Tracker Object สามารถกำหนด Type ตามค่าของ Javascript