Cách tạo và sử dụng PageView Counter trên Blogger

PageView Counter là gì?

Pageview là lượt truy cập trang của người dùng. Khi người dùng truy cập vào trang của chúng ta, pageview sẽ là 1. Bộ đếm lượt truy cập sẽ tăng lên 1, đó là pageview counter. Mỗi trang web nên có một bộ đến lượt xem trang, để giúp người quản trị trang có thể kiểm soát trang, và đôi khi cũng tạo động lực cho người dùng truy cập vào trang đó.

Nhược điểm trên các trang blogspot thường là không hiển thị được pageview này. Như vậy để tạo được một bộ đếm cho blogspot cho riêng trang của chúng ta, thì phải làm thế nào?

Google đã cung cấp một cơ sỡ dữ liệu dạng Realtime, để chúng ta có thể tận dụng vào việc tạo bộ đếm cho các trang blogspot, đó chính là Google Firebase. Cách sử dụng Firebase để tạo bộ đếm cho blogspot như thế nào? Xin mời các bạn xem tiếp các phần kế tiếp.

Tạo PageView Counter bằng Firebase

Trước tiên các bạn đăng nhập vào trang Firebase, và đăng nhập bằng tài khoản Gmail. Các bước tạo Realtime Database các bạn xem chi tiết trong video ở đầu bài viết.  

Thêm PageView Counter vào Blogspot

Sau khi tạo xong bộ đếm lượt view trên Firebase, các bạn truy cập vào phần quản lý Blogger. Tiếp theo vào thẻ Theme \ Edit HTML. Dán đoạn code bên dưới vào vị trí cần hiển thị lượt view.

<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Views

Lưu ý:

Để hiển thị được icon và chạy được đoạn code jQuery thì trang của bạn phải chắc chắn rằng đã được chèn các thư viện: Font Awesome và jQuery v1.2 trở lên. 

Tiếp theo các bạn tìm thẻ </body>, và dán đoạn code bên dưới vào trên thẻ </body>:

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
<script>
    //<![CDATA[
    $.each($('a[name]'), function(i, e) {
        var elem = $(e).parent().find('#postviews');
        var blogview = new Firebase("https://YOUR_APP_SITE/pages/id/" + $(e).attr('name')); 
        blogview.once('value', function(snapshot) { 
            var data = snapshot.val();
            var isnew = false;
            if(data == null) {
                data= {};
                data.value = 0;
	        data.url = window.location.href; 
	        data.id = $(e).attr('name');
	        isnew = true;        
	    }
   	    elem.text(data.value);
	    data.value++;
	    if(window.location.pathname!='/') {
	        if(isnew){                   
    	            blogview.set(data);
	        }else{
	            blogview.child('value').set(data.value);
	        }
	    }	
        });
    });
    //]]>
</script>

Trong đó YOUR_APP_SITE được tạo từ Firebase. Cuối cùng các bạn lưu lại các thay đổi trên template, tải lại trang để xem thành quả nhé.