Page Views

Database menggunakan Firebasenya google yang nanti akan dipakai untuk menyimpan total pengunjung yang melihat halaman postingan. Untuk scriptnya ada 2 versi yang setelah dicoba keduanya work dengan sempurna. Namun saya lebih memilih untuk menggunakan script pertama.

Versi 1 :

1. Jquery

<script src='https://ajax.googleapis.com/ajax/libs/jquery/Versi_JQUERY/jquery.min.js'/>

2. Awesome Font (untuk spinner)

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/VERSI_AWESOME/css/all.css' rel='stylesheet'/>

3. Firebase Client JS

<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>

4. Jquery Untuk Koneksi Firebase

<script>//<![CDATA[
(jQuery);$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#ViewZis").addClass("view-load"),d=new Firebase("https://USERFIREBASE.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var a=e.val(),g=!1;null==a&&(a={},a.value=0,a.url=window.location.href,a.id=$(f).attr("data-id"),g=!0),b.removeClass("view-load").text(a.value),a.value++,"/"!=window.location.pathname&&(g?d.set(a):d.child("value").set(a.value))})});
//]]></script>

5. HTML untuk menampilkan

<span class='post-view' expr:data-id='data:post.id'><span class='view-load' id='ViewZis'><i class='fas fa-spinner fa-pulse faa-fast'/></span> Views</span>

Versi 2 (Lazy Load):

1. Setting rules Firebase

{
    "rules": {
      ".read": true,
      "BlogID_0000000000000000000": {
        ".read": true,
        "$post_id": {
          ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
          ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
        }
      }
    }
}

2. Script koneksi firebase

<script>
    /*<![CDATA[*/
    const viewSeting = {
        blogID: '0000000000000000000',
        databaseUrl: 'databaseUrl',
        abbreviation: true,
        lazyload: true
    }
    function loadJs(e, b, c, d) {
        let a = document.createElement("script");
        b && (a.id = b), a.async = c, a.defer = c, a.src = e, d && (a.onload = d), document.getElementsByTagName("head")[0].appendChild(a)
    }
    function abvr(a) {
        var b = Math.sign(Number(a));
        return 1e9 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e9).toFixed(2) + "B" : 1e6 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e6).toFixed(2) + "M" : 1e3 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e3).toFixed(2) + "K" : Math.abs(Number(a))
    }
    function loadPostVw() {
        for (var c = document.querySelectorAll(".View_Zis"), e = firebase.database(), a = 0; a < c.length; a++) {
            var d = c[a],
                b = d.getAttribute("data-id");
            (b = e.ref("BlogID_" + viewSeting.blogID + "/PostID_" + b)).once("value", function(a, b) {
                return function(c) {
                    0 < (c = c.exists() ? c.val() : 0) && (a.setAttribute("data-view", viewSeting.abbreviation ? abvr(c) : c), a.classList.remove("hidden")), "true" == a.getAttribute("data-add") && (a.setAttribute("data-add", !1), c = parseInt(c) + 1, b.set(c))
                }
            }(d, b))
        }
    }
    function postVw() {
        loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js", "fb-app", !0, () => {
            loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js", "fb-db", !0, () => {
                var a = {};
                a.databaseURL = viewSeting.databaseUrl, firebase.initializeApp(a), loadPostVw()
            })
        })
    }
    if (!0 === viewSeting.lazyload) {
        var a = [],
            b = [];
        let c = () => {
            0 == a.length && null == localStorage.getItem("LZ_VIEW") && (localStorage.setItem("LZ_VIEW", 1), postVw())
        };
        window.addEventListener("scroll", a => {
            (0 != document.documentElement.scrollTop && 0 == b.length || 0 != document.body.scrollTop && 0 == b.length) && c()
        }, !0), document.getElementsByTagName("body")[0].addEventListener("click", a => {
            c()
        }), localStorage.getItem("LZ_VIEW") && postVw()
    } else postVw()
    /*]]>*/
</script>

Keterangan :

• 0000000000000000000 : diganti dengan BLOG_ID
• databaseURL : diganti dengan URL Firebase Realtime Database

3. HTML untuk menampilkan

<span class='View_Zis entry-views hidden' data-add='true' expr:data-id='data:post.id'/>

4. CSS Merapihkan tampilan

.entry-views{color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.entry-views[data-view]{visibility:visible;opacity:1}
.entry-views::after{content:attr(data-view) ' views'}

Done.

Thanks to : vuinsider & NLD