[Part 2] Memasang Web Push Notif OneSignal di AMP Blogger

Tutorial OneSignal di AMP Blogger Template

Warning! This Tutorial is for AMP Page Only, Don't implement this on Non-AMP Page, it's will do nothing. 

Go to: [Part 1] Setup OneSignal Push Notif in AMP Blogger

Web Push Notification adalah sebuah layanan web di mana website menyediakan cara yang sederhana dan efektif untuk terhubung-kembali dengan pengguna.

Push Notification ini sangatlah efektif agar para pengunjung anda menerima pemberitahuan terhadap update terbaru dari website anda. Pengguna bisa menekan tombol subscribe notification gara dapat berlangganan mengenai update terbaru. 

Saat ini sudah banyak aplikasi pihak ketiga yang menawarkan layanan ini, baik gratis maupun berbayar. Diantaranya, ada OneSignal, SendPulse, UrbanAirship, dan lain-lain. Mereka mendistribusikan pesan atau update terbaru dari web anda, dengan konfigurasi yang sangat mudah dan support dengan baik di http:// maupun https://.

Go to: [Part 1] Setup OneSignal Push Notif in AMP Blogger

Konfigurasi Button Subscribe --OneSignal AMP Web Push Notification Pada AMP Blogger

Tidak seperti di halaman Non-AMP, yang cukup memasukan javascript kode yang diberikan OneSignal, maka tombol subscribe akan muncul dengan sendirinya. Di AMP Page, anda membutuhkan button subscribe, yang nantinya bisa diklik oleh visitor website anda.

Berikut ini tutorial setup Button Subscribe amp-web-push notification pada AMP Blogger.

Copy komponen amp-web-push berikut ini, copy sebelum kode </head> :

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

Copy kode berikut ini, paste sebelum </body>. Harap ganti tanda berwarna kuning dengan APP ID OneSignal anda. Dan ubah LABEL.os.tc anda dengan alamat label OneSignal anda, contoh amp-blogger.os.tc . Untuk cara membuatnya, sudah saya jelaskan di artikel PART 1.

   <amp-web-push
      id="amp-web-push"
      layout="nodisplay"
      helper-iframe-url="https:LABEL.os.tc/helper_frame?appId=YOUR-APP-ID"
      permission-dialog-url="LABEL.os.tc/amp/permission_dialog?appId=YOUR-APP-ID"
      service-worker-url="https://LABEL.os.tc/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
 
   ></amp-web-push>

Kemudian kita akan memasang button-nya, saya implementasikan tombol tersebut dalam body artikel, tepatnya di akhir artikel. Cari <data:post.body/>, paste kode berikut ini di bawahnya:

 <!-- A subscription widget -->
  <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
    <button class="subscribe" on="tap:amp-web-push.subscribe">
 
     <amp-img 
              class="subscribe-icon" 
              width="24"
               height="24"
               layout="fixed"
               src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
      </amp-img>
      Subscribe to updates
    </button>
  </amp-web-push-widget>
        

Agar tampilan lebih menarik, copy code CSS ini, dan tempelkan dibawah <style amp-custom='amp-custom'> :

 amp-web-push-widget button.subscribe{display:inline-flex;align-items:center;border-radius:2px;border:0;box-sizing:border-box;margin:0;padding:10px 15px;cursor:pointer;outline:none;font-size:15px;font-weight:400;background:#4A90E2;color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,0.5);-webkit-tap-highlight-color:rgba(0,0,0,0)}
  amp-web-push-widget button.subscribe .subscribe-icon{margin-right:10px}
  amp-web-push-widget button.subscribe:active{transform:scale(0.99)}
  amp-web-push-widget button.unsubscribe{display:inline-flex;align-items:center;justify-content:center;height:45px;border:0;margin:0;cursor:pointer;outline:none;font-size:15px;font-weight:400;background:transparent;color:#B1B1B1;-webkit-tap-highlight-color:rgba(0,0,0,0)}

Silahkan SAVE perubahan pada Template anda. maka hasilnya akan seperti ini:

Silahkan coba test halaman, apakah tombol subscribe sudah muncul atau tidak. Jika belum muncul, harap pastikan anda sudah benar mengganti APP ID dan Label.os.tc anda.

Jika ada pertanyaan, silahkan diskusikan di kolom komentar.

Bagikan Artikel ini