เขียนคำสั่ง tracking พฤติกรรมของผู้ใช้ด้วย Google Analytics JavaScript library

แน่นอนว่าหลายคนที่ได้ทำงานที่เกี่ยวข้องกับการสร้าง website หรือมี website ส่วนตัว คงคุ้นเคยกับการใช้งาน Google Analytics กันอยู่บ้าง

โดยทั่วไปเราก็นำ code ที่ได้จากการเปิดใช้งาน Google Analytics ไปแปะที่ website แล้วก็เข้าไปดูว่า user เปิดหน้าใด URL อะไรบ้าง คิดเป็นจำนวนกี่ view

แต่ถ้าสิ่งที่เราต้อง track ไม่ใช่เพียงแค่ pageview เท่านั้นหล่ะ ?

ตัวอย่าง เช่น

• ถ้าเรามี feature บางอย่างเช่น click ปุ่มเพื่อ download หรือเล่น video หากเราต้อง track ว่ามี user กดปุ่มนี้เป็นจำนวนเท่าใด
• ถ้าเราต้องการสร้าง feature บางอย่าง แต่ก่อนที่จะลงมือสร้าง feature นั้นจริง ก็อยากมั่นใจว่ามี user สนใจใช้ feature นี้มากเพียงพอ โดยการ tracking จำนวน click ของปุ่มที่แสดงถึงความสนใจของ user มันคงจะดีกว่าการที่เราทุ่มเวลาไปเป็นเดือนๆ เพื่อพัฒนาระบบที่ไม่มีใครอยากใช้

การส่งข้อมูลไปที่ Google Analytics

สำหรับข้อมูลที่เราส่งไปยัง Google Analytic นั้นเรียกว่า hit ซึ่งทุกครั้งที่ส่ง hit จะต้องกำหนด hit type ด้วย โดย hit type แบ่งออกเป็นชนิดต่างๆ ดังนี้ pageview, screenview, event, transaction, item, social,exception, timing โดยผมขออธิบายเฉพาะตัวที่เราได้ใช้กันบ่อย

• pageview สำหรับ track จำนวนครั้งที่ user เปิดดูหน้า web นั้นๆ
• event สำหรับ track การแสดง action บางอย่างของ user ใน web ของเราเช่น click ปุ่มต่างๆ download file, click ดูโฆษณา, เล่น video , mp3
• social สำหรับ track พวก action เกี่ยวกับ social network เช่น จำนวนกดปุ่ม facebook like
• exception สำหรับส่ง error ที่เกิดขึ้นใน JavaScript code พร้อมรายละเอียดไปเก็บไว้ที่ Google Analytics ได้
• timing สำหรับ track เวลาในการ download content ใน web page เช่น การโหลดข้อมูลบางอย่างในรูปแบบ AJAX หรือเวลาในการ download resource file เช่น JavaScript CSS file

โดยปกติเมื่อเรานำ code ที่ได้จาก Google Analytic ไปแปะที่ website ของเรา code ก็นี้จะส่ง hit type ชนิด pageview หลังจากที่ library ของ Google Analytics โหลดเสร็จเรียบร้อยแล้ว

ตัวอย่าง code ที่เราได้จากการเปิดใช้งาน Google Analytics เพื่อนำไปแปะที web ของเรา

<script>
//1. load Google Analytic library
    (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', '//www.google-analytics.com/analytics.js', 'ga');

//2. use ga function to create tracker object
    ga('create', 'UA-744066xx-x', {'cookieDomain': 'auto'});
 
//3. use ga function send hit with Type pageview 
  ga('send', 'pageview');

</script>

ในคำสั่งของ Google Analytics แบบง่ายที่สุดจะแบ่งออกเป็น 3 ส่วนด้วยกัน

• 1. load library ของ Google Analytics
• 2. ใช้ ga function เรียกว่า command queue เพื่อสร้างสิ่งที่เรียกว่า tracker object เนื่องจากคำสั่งที่เราส่งไปกับ function นี้จะไม่ได้ถูกใช้งานทันที แต่จะเข้า queue รอให้ library โหลดเสร็จก่อนแล้วค่อยทำงาน เพื่อป้องกันความผิดพลาดจากการใช้งานคำสั่งก่อนที่ library จะโหลดเสร็จ
• 3. ใช้ ga function เพิ่งส่ง hit ไปยัง Google Analytics server โดยส่ง hit type เป็น pageview

tracker object เป็น object สำหรับเก็บข้อมูลต่างๆ เกี่ยวกับ web ของเราไว้ ก่อนที่จะส่งไปที่ Google Analytics server ตัวอย่างข้อมูลที่ tracker object เก็บไว้ ได้แก่ user id หรือข้อมูลอื่นๆ ที่เราต้องการให้ส่งไปพร้อมกับทุกๆ hit type เราก็มาเก็บไว้กับ tracker object ได้เลย

ลองมาเขียน code กันบ้างดีกว่า

ถ้าใน web ของเรามี link ให้ download source code เราต้องการ track จำนวนครั้งที่ user download file เราจะทำอย่างไร ?

• ก่อนอื่นเลยต้องแยกให้ออกว่า hit ที่เราจะส่งไปยัง Google Analytics คืออะไร ตอบเลย hit type event
• เมื่อทราบแล้วว่า hit type ที่จะส่งไปคือ event เราก็ต้องไปดูกันว่า event ต้องการให้เราส่งค่า parameter อะไรไปบ้าง โดยแต่ละ hit type รับค่า parameter ต่างกันครับ

การส่ง hit ไปที่ Google Analytics เราจะใช้คำสั่ง ga('send', 'hit type', [hit type parameters]);

แต่ละ hit type จะมี parameter เฉพาะ สำหรับการส่ง event hit type จะมี parameter เป็นดังนี้

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

• eventCategory เป็นชื่อของ object ที่ user สามารถที่จะแสดง action ได้ เช่น video, file
• eventAction รุปแบบของ action เช่น click , download, play
• eventLabel เหมาะสำหรับ grouping category หรือ ชื่อ file ของ object
• eventValue ค่าอื่นๆที่เราสามารถระบุแนบไปด้วยได้

เมื่อเราเข้าใจการใช้งาน function สำหรับส่ง hit type event แล้ว การ track จำนวน click download จึงเขียนเป็นคำสั่งได้ดังนี้

ga('send', 'event', 'source-code', 'download', ''beginning-java.zip");

หรือเราจะเขียนให้อยู่ในรูปแบบ fieldsObject ก็ได้ ก็จะทำให้เห็นค่าต่างๆ ของ parameter ได้ชัดเจน เพราะมี key กำกับอยู่ด้วย

ga('send', {
  hitType: 'event',
  eventCategory: 'source-code ',
  eventAction: 'download',
  eventLabel: 'beginning-java.zip '
});

เราอาจจะใส่คำสั่งส่วนนี้เข้าไปที่ function ภายใน Angular controller ดังเช่นตัวอย่างนี้

/static/js/trackingController.js

var app = angular.module('codesanook', []);

app.controller('trackingController', function ($scope, $window) {

    $scope.downloadSourceCode = function (file) {
        ga('send', {
            hitType: 'event',
            eventCategory: 'source-code ',
            eventAction: 'download',
            eventLabel: file.name,
            hitCallback: function () {
                console.log('hit sent');
                $window.location.href = file.url;
            }
        });

    }

});

และนำไปใช้ในหน้า HTML ดังนี้

/views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="static/js/angular-1.5.0/angular.min.js"></script>
    <script type="text/javascript" src="static/js/trackingController.js"></script>

    <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', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-744066xx-x', {'cookieDomain': 'auto'});
        ga('send', 'pageview');
    </script>
</head>
<body ng-app="codesanook">

<h2>HelloWorld.Java</h2>

<div ng-controller="trackingController">
    <a href=""
       ng-click="downloadSourceCode({
        name: 'HelloWorld.zip',
        url: '/source-codes/HelloWorld.zip'
    })">
        download source code</a>
</div>


</body>
</html>

ผลลัพธ์การทำงาน

• เนื่องจากตัวอย่างนี้เป็น node project หากผู้อ่านได้ download source code ไป แนะนำให้ใช้คำสั่งดังต่อไปนี้
• >npm install เพื่อติดตั้ง expressjs และ ejs เป็น package ที่จำเป็นให้ program ทำงานได้
• >node index.js เพื่อให้ node run web ของเราขึ้นมา
• เปิด web browser ไปที่ URL http://localhost:3000
• ทดลอง click ปุ่ม download

หน้าตา web site http://localhost:3000

เข้าไปดูผลลัพธ์ของ hit ที่เราส่งไปยัง Google Analytics ก็จะมี event แสดงอยู่ใน report ของ Google Analtyics

ใครมีคำถาม ข้อสงสัยใดๆ ฝาก comment มาได้เลยนะครับ

ขอให้ทุกคนสนุกกับการเขียน code ครับ

download source code