Browser

Concept cơ bản

• Sử dụng TA trên browser khá đơn giản, nhưng để đảm bảo luồng TA hoạt động không ảnh hưởng đến các scripts khác thuộc dự án thì nên sử dụng theo cách sau

Nhúng TA vào dự án

<script type="text/javascript">
    const TA_DOMAIN = 'https://ta.toprework.vn';
    const id = 'topcv_vn'; // Cung cấp theo từng client
    const taVersion = '1.0.0';
    (function(w,d,v) {
        w['ta'] = w['ta'] || function() {
            (w['ta'].q = w['ta'].q || []).push([...arguments])
        }
        var po = d.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = TA_DOMAIN + '/dist/browser-platform/index.js?id=' + id + '&version=' + v;
        var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })(window, document, taVersion);
</script>

Sử dụng

// event pageview
window.ta('pageview');
// hoặc
ta('pageview');

// Gọi ta kèm theo data
ta('jobRendered', {
    jb_ids: [
        1, 2, 3
    ]
});

SSE listener

• Mặc định khi sử dụng event pageview, TA sẽ sử dụng Server sent event để tracking thời gian online của user. TA server sẽ ping về browser 5s/lần.
• Thư viện ta support lắng nghe mỗi khi server ta ping về qua method setSseListener()

    // Đoạn code dưới sử dụng cơ chế Sse để tracking thời gian online của user, đồng thời gửi event lên ga vào 3p và 7p
    // Cơ chế này giúp chắc browser chắc chắn tracking được
    // thay vì có thể bị break tracking hoặc sai time do trình duyệt ngừng hàm setTimeout khi out focus tab
    const startTracking = new Date();
    function setUpSseListener() {
        if (ta.addSseListener && typeof ta.addSseListener === 'function') {
            let sent3mins = false;
            let sent7mins = false;
            const threeMinutes = 3 * 60 * 1000;
            const sevenMinutes = 7 * 60 * 1000;
            // const threeMinutes = 3 * 1000;
            // const sevenMinutes = 7 * 1000;
            ta.addSseListener((event) => {
                const currentTimestamp = event.timeStamp;
                if (!sent3mins && currentTimestamp >= threeMinutes) {
                    console.log('Sent ga 3 mins, the timestamp is: ' + (new Date().valueOf() - startTracking.valueOf()));
                    sent3mins = true;
                    gtag('event', 'OnSite3Mins', {'send_to': 'AW-823531084/3_X7CI3YnYYDEMys2IgD'});
                }
                if (!sent7mins && currentTimestamp >= sevenMinutes) {
                    console.log('sent ga 7 mins, the timestamp is: ' + (new Date().valueOf() - startTracking.valueOf()));
                    sent7mins = true;
                    gtag('event', 'OnSite7Mins', {'send_to': 'AW-823531084/krRuCK7exoYDEMys2IgD'});
                }
            })
        } else {
            setTimeout(setUpSseListener, 1000);
        }
    }

    setUpSseListener();