Tổng quan về Matomo và cách sử dụng

Như các bạn đã biết, Matomo, trước đây là Piwik là ứng dụng miễn phí và mã nguồn mở phân tích web được phát triển bởi một nhóm các nhà phát triển quốc tế, chạy trên máy chủ web PHP / MySQL. Trong bài này chúng ta sẽ tìm hiểu tổng quan về Matomo và cách gắn code tracking chúng.

Đầu tiên chúng ta cùng định nghĩa lại khái niệm Matomo.

Matomo là gì?

Matomo là một nền tảng mã nguồn mở dùng để phân tích hoạt động người dùng trên website, giúp bạn toàn quyền kiểm soát dữ liệu và thu thập thông tin hành vi người dùng trên website, là một giải pháp thay thế cho Google Analytics.

Tên của matomo

Hình 1: Tên của Matomo thay đổi theo thời gian

Tại sao phải dùng Matomo?

  • Là mã nguồn mở nên nhận được sự hộ trợ từ phía cộng đồng và nhà phát triển.
  • Dữ liệu nằm trên server của bạn nên được đảm bảo an toàn tuyệt đối.
  • Giao diện đơn giản, dễ sự dụng, phù hợp với tất cả mọi người.
  • Thu thập dữ liệu không giới hạn.
  • Bạn có thể tùy biến thu thập dữ liệu quan trọng.

Sự khác nhau giữa Matomo và Google Analytics

 

Matomo

Google Analytics

Tùy chọn nơi lưu trữ

×

Tích hợp với Google Ads

Tích hợp với Google Search Console

Tích hợp với Bing và Yahoo Search Console

×

Xếp hạng từ khoá của các công cụ tìm kiếm

×

Media Analytics

×

A/B Testing

Ecommerce Reporting

Form Analytics

×

Heatmaps

×

Session Recording

×

Custom Reporting

Log Analytics

×

Cách gắn code tracking

1. Mã javascript nhúng vào website.

<!-- Matomo --> 
<script type="text/javascript"> 
        var _paq = window._paq = window._paq || []; 
        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ 
        _paq.push(['trackPageView']); 
        _paq.push(['enableLinkTracking']); 
        (function() { 
            var u="//data.mangoads.com.vn/"; 
            _paq.push(['setTrackerUrl', u+'matomo.php']); 
            _paq.push(['setSiteId', '1']); 
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; 
            g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); 
</script> 
<!-- End Matomo Code --> 

2. Custom Dimensions.

Visit dimensions.

cd_v1

<script type="text/javascript"> 
          _paq.push(['setCustomDimension',1, 'employer']);
</script> 

Action Dimensions.

cd_v2

<script type="text/javascript"> 
      _paq.push(['setCustomDimension',2, 'Việt Nam']);
</script> 

3. Site Search.

site-saearch

<script type="text/javascript">
  paq.push(['trackSiteSearch', "Banana",  "Organic Food",0 ]);
</script> 

4, Event Tracking

event1

    <script type="text/javascript">
        _paq.push(['trackEvent', 'Contact', 'Email Link Click', 'name@example.com']);
    </script>

5, A/B Test.

ab1

<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(['AbTesting::create', {
        name: 'ButtonColor',
        percentage: 100,
        includedTargets: [{"attribute":"url","inverted":"0","type":"contains","value":"/diving/"}],
        excludedTargets: [],
        variations: [{
	name: 'blue',
	percentage: 50,
	activate: function(event) {
	         document.getElementById('btn').style.color = '#0000ff';
	}
                               },
                               {
	name: 'red',
	percentage: 50,
	activate: function(event) {
	          document.getElementById('btn').style.color = '#ff0000';
	}
                              }], 
        trigger: function () {
            return true;
        }
    }]);
</script>

6, Media Analytics.

<script src="https://data.mangoads.com.vn/plugins/MediaAnalytics/tracker.min.js"></script>
<script type="text/javascript">
      _paq.push(['MediaAnalytics::scanForMedia']);
</script>

* Tracking HTML5 videos

    <video data-matomo-title="My Video Title">...</video>

* Tracking HTML5 audios

     <audio data-matomo-title="My Audio Title">...</audio>

* Tracking JW Player videos

    jwplayer("myDiv").setup({
        "file": "...",
        "title": "My Video Title"
    });

* Tracking Flowplayer videos

    Flowplayer("#player", {
        clip: {
            sources: [
                {type: "video/mp4", src: "https://example.org/actualUrl.mp4"}
            ],
            title: "My Video Title"
        }
    });

* Tracking YouTube videos

     <iframe src="https://www.youtube.com/embed/yA2NUur0770?enablejsapi=1"></iframe>

7, Ecommerce Analytics.

a. Abandoned Cart

* Data json LD

<script type="application/ld+json">
    { 
         "@context": "//schema.org/", 
         "@type": "Cart", 
         "priceTotal": "25,606,000",
         "quantity": "3", 
         "listItem": [ 
               {"sku": "E8OFkRnyfd","name": "THỊT BÒ WAGYU NHẬT BẢN A5 - SIRLOIN WAGYU BEEF A5","price": "8316000","quantity": "1" }, 
               {"sku": "b9ibTzwnfo","name": "THỊT THĂN VAI BÒ WAGYU A5 NHẬT BẢN - CHUCK EYE ROLL WAGYU BEEF A5","price": "7490000","quantity": "1" }, 
               {"sku": "nkPa0w94bc","name": "THỊT THĂN NỘI BÒ WAGYU NHẬT BẢN A5 - TENDERLOIN WAGYU BEEF A5","price": "9800000","quantity": "1"} 
           ]
     }
</script>

* Xử lý json LD thêm vào giỏ hàng

<script type="text/javascript"> 
       var json = JSON.parse( jQuery('script[type="application/ld+json"]').text() ); 
       var total=parseInt(json.priceTotal.replaceAll(',','')); 
       for( var i=0;i<json.listItem.length;i++ ){ 
                _paq.push([
                         'addEcommerceItem',
                         json.listItem[i].sku,
                         json.listItem[i].name,
                         json.listItem[i].sku,
                         json.listItem[i].price,
                         json.listItem[i].quantity
                ]); 
         }
       _paq.push(['trackEcommerceCartUpdate',total]);
</script>

b. Ecommerce order

* Data json LD


<script type="application/ld+json">
    { 
         "@context": "//schema.org/", 
         "@type": "Cart", 
         "priceTotal": "25,606,000",
         "quantity": "3", 
         "listItem": [ 
               {"sku": "E8OFkRnyfd","name": "THỊT BÒ WAGYU NHẬT BẢN A5 - SIRLOIN WAGYU BEEF A5","price": "8316000","quantity": "1" }, 
               {"sku": "b9ibTzwnfo","name": "THỊT THĂN VAI BÒ WAGYU A5 NHẬT BẢN - CHUCK EYE ROLL WAGYU BEEF A5","price": "7490000","quantity": "1" }, 
               {"sku": "nkPa0w94bc","name": "THỊT THĂN NỘI BÒ WAGYU NHẬT BẢN A5 - TENDERLOIN WAGYU BEEF A5","price": "9800000","quantity": "1"} 
           ]
     }
</script>

* Xử lý json LD thêm vào giỏ hàng

<script type="text/javascript"> 
       var json = JSON.parse( jQuery('script[type="application/ld+json"]').text() ); 
       var total=parseInt(json.priceTotal.replaceAll(',','')); 
       for( var i=0;i<json.listItem.length;i++ ){ 
                _paq.push([
                         'addEcommerceItem',
                         json.listItem[i].sku,
                         json.listItem[i].name,
                         json.listItem[i].sku,
                         json.listItem[i].price,
                         json.listItem[i].quantity
                ]); 
         }
       _paq.push(['trackEcommerceOrder',order_code,total,total,0,0,false]);
</script>

c. Ecommerce View

     <script type="application/ld+json">
    { 
           "@context": "//schema.org/", 
           "@type": "Product", 
           "name": "THỊT THĂN VAI BÒ WAGYU A5 NHẬT BẢN - CHUCK EYE ROLL WAGYU BEEF A5",
           "image": "", 
           "category": "Thịt Bò", 
           "sku": "b9ibTzwnfo", 
           "offers": { 
                   "@type": "Offer", 
                   "url": "//baonganfood.com/tht-thn-vai-b-wagyu-a5-nht-bn-chuck-eye-roll-wagyu-beef-a5-p2.html", 
                   "priceCurrency": "VND", 
                   "price": "7490000" 
            }
     }
     </script>
     <script type="text/javascript"> 
               var json = JSON.parse( jQuery('script[type="application/ld+json"]').text() ); 
              _paq.push(['setEcommerceView',json.sku,json.name,json.category,json.offers.price]);
      </script>

Tổng kết

MangoAds vừa hướng dẫn bạn cách sử dụng Matomo để phân tích hoạt động người dùng trên web. Với nhiều lợi ích mà chúng mang lại, hy vọng các bạn có thể sử dụng chúng cho trang web của mình. Chúc các bạn thành công!