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

Cara Pasang OneSignal Web Push di Blogger AMP Template

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

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://.

Namun untuk saat ini, hanya Aplikasi OneSignal Web Push saja yang baru bisa mensupport web push notification dengan website berbasis Google AMP HTML. Dengan mengandalkan komponen amp-web-push.js, website AMP bisa menerapkan Web Push Notification di websitenya. 

Sebelum saya membahas mengenai penerapan Web Push pada Blog AMP, saya akan rincikan terlebih dahulu mengenai keuntungan memasang Web Push Notification OneSignal untuk sebuah WebSite.

• Meningkatkan jumlah loyal visitor. 
• Mengirimkan update terbaru, seperti pesan, iklan maupun artikel terbaru.
• Meningkatkan nilai konversasi website.

OneSignal AMP-WEB-PUSH di Blogger

Untuk memasang AMP Web Push Notification pada sebuah website, anda diharuskan memasang komponen amp-web-push dan juga mengupload 2 halaman pada direktori website anda, yaitu amp-helper-frame.html dan amp-permission-dialog.html . 

Jika anda menggunakan platform blogger seperti blog amp-blogger.com, tentunya hal tersebut mustahil dilakukan. Tapi ada solusi yang diberikan oleh OneSignal, dengan memanfaatkan label yang disediakan oleh OneSignal.

Membuat APP ID dan Konfigurasi SDK OneSignal

Untuk memasang Web Push Notification di Blogger AMP, anda perlu mendaftar dan membuat APP di OneSignal. Pergi ke https://onesignal.com, daftar menggunakan akun Google anda. Lalu buat sebuah App dengan mengklik 'Add a New App'.

Namai APP OneSignal tersebut, maka akan muncul sebuah pop-up modal, kemudian pilih Web Push dan klik Next.

Perhatikan konfigurasi berikut ini, baca baik-baik:

1. Choose Integration: Typical Site
2. Site Setup: 

• Site name: Nama Situs
• Site URL: Isi dengan url, lengkap dengan http:// or https:// . Saya merekomendasikan untuk mengaktifkan HTTPS:// pada Blogger anda. Silahkan baca artike ini: Setting HTTPS / SSL di Blogger.
• Upload site icon: min 80px X 80px
• Aktifkan 'my site is not fully https' (wajib), dan isi nama Label. Contoh: amp-blogger. Maka alamat Label anda menjadi amp-blogger.os.tc

3. Permission Prompt Setup

• Klik Add a Promt, pada promt type pilih Slide Promt atau pilih sesuai keinginan anda dan klik  save. 
• Kemudian anda akan dialihkan untuk konfigurasi HTTP Pop-Up. Silahkan isi text untuk kostumisasi tampilan text tersebut, kemudian klik save. 

4. Abaikan konfigurasi untuk tab Welcome Notification dan Advanced. Click Save. 

Setelah proses konfigurasi tersebut, maka anda akan mendapatkan code script seperti berikut ini. Silahkan perhatikan APP ID (tanda kuning) anda, karena itu yang akan dibutuhkan nantinya.

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>

<script>

  var OneSignal = window.OneSignal || [];

  OneSignal.push(function() {

    OneSignal.init({

      appId: "a9416835-bc53-47db-a413-821b7c808c7c",

    });

  });

</script>

Silahkan save kode tersebut pada notepad. Selanjutnya kita akan konfigurasi button subscribe-nya, agar bekerja di halaman AMP Blogger.

Silahkan Baca PART 2 Di sini: CARA PASANG ONESIGNAL DI BLOGGER AMP PART 2