Cara Lain Membuat Notifikasi Untuk Pengguna AdBlocker Untuk Blog AMP HTML

Ditulis oleh: Adhy Suryadi

Ditulis pada: 10/02/2017

Sebelumnya saya sudah membagikan cara membuat notifikasi untuk pengguna adblocker bagi blog AMP, nah kali ini saya akan membagikan cara lain untuk membuat notifikasi untuk pengguna adblocker atau sejenisnya untuk blog AMP HTML.

Kali ini kita akan memanfaatkan fitur amp-user-notification untuk menampilkan notifikasi bagi pengguna adblocker.

Notifikasi ini menggunakan tombol tutup notifikasi biasa sehingga notifikasi akan muncul setiap kali pengunjung masuk halaman, dan juga menggunakan tombol tutup dengan menggunakan cookies sehingga notifikasi tidak akan muncul sebelum pengunjung menghapus cookies pada browser-nya.

Notifikasi akan muncul di bagian bawah blog seperti pada demo berikut:


Bagi yang ingin mencoba menggunakannya silahkan ikuti langkah berikut ini.

Silahkan simpan js-js berikut di atas kode </head>

  <script async="" custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>

  <script async="" custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Jika kedua atau salah satu dari js tersebut sudah ada di blog maka Anda tidak perlu memasangnya lagi.

Kemudian simpan CSS berikut di style amp-custom='amp-custom' blog Anda.

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

.notifbox{display:block}

.notif_box{position:relative;background:#fff;color:#555;font-family:Roboto,sans-serif;padding:0;transition:all .3s ease-in-out;width:100%;margin:0 auto;border-radius:4px;overflow:hidden}

.notif_box p.note{margin:0;padding:15px 20px;font-size:16px;font-weight:400;line-height:1.1}

.notif_box p.close_note{margin:0;padding:10px 20px;font-size:12px;font-weight:400;line-height:1.3}

.notif_box p a{color:red;text-decoration:none}

.notif_box p a:hover{color:#000}

.notifbox .close_notifbox{background:0 0;border:none;padding:0;color:#333;font-size:30px;position:absolute;top:7px;right:5px;cursor:pointer;width:20px;height:20px;line-height:20px;text-align:center;z-index:2}

.notifbox .close_notifbox:focus,.notifbox .done_notifbox:focus{outline:0}

.notifbox .close_notifbox:hover{color:red}

hr.note_block{margin:0;height:0;border:0;border-top:1px solid #ddd}

Kemudian simpan HTML berikut di atas kode </body>

  <amp-user-notification id="block-notification"

  layout="nodisplay">

    <div class="notifbox" id="notifbox">

      <div class="notif_box">

      <button class='close_notifbox' on='tap:notifbox.hide' role='button' tabindex='0' title='Close'>&amp;times;</button>

      <p class="note">Bantu kami membuat situs MyInfo.web.id ini menjadi lebih baik.<br/>

      <br/>

      Dengan menonaktifkan AdBlock atau aplikasi-aplikasi sejenis yang mampu memblokir iklan, Anda sudah membantu kami untuk tetap membuat website ini terus menayangkan konten.<br/>

      <br/>

      Cara mendukungan situs MyInfo.web.id:

<a href="http://www.myinfo.web.id/p/whitelisting-my-info-in-your-ad-blocker.html" target="_blank">Silahkan simak artikel berikut ini.</a></p>

        <hr class="note_block"/>

        <p class="close_note">

        Don't show again <a href="#" on='tap:block-notification.dismiss' role='button' tabindex='0' title='Close'>click here</a>.

        </p>

      </div>

    </div>

  </amp-user-notification>

Silahkan ganti URL yg ditandai dengan URL laman cara dukungan situs Anda.

Kemudian pastikan Anda juga sudah memasang kode amp-analitycs, jika belum silahkan pasang kode berikut ini di atas kode </body>

  <amp-analytics id='analytics1' type='googleanalytics'>

<script type='application/json'>

{

  "vars": {

    "account": "UA-xxxxxxxxxx"

  },

  "triggers": {

    "trackPageview": {

      "on": "visible",

      "request": "pageview"

    }

  }

}

</script>

</amp-analytics>

Ganti kode UA-xxxxxxxxxx dengan kode akun analitycs blog Anda.