[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 yakni sebuah layanan web di mana website menyediakan cara yang sederhana dan efektif untuk terhubung-kembali dengan pengguna.

Push Notification ini sangatlah efektif supaya para pengunjung anda mendapatkan pemberitahuan terhadap update terbaru dari website anda. Pengguna sanggup menekan tombol subscribe notification gara sanggup berlangganan mengenai update terbaru. 

Saat ini sudah banyak aplikasi pihak ketiga yang mengatakan 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 gampang dan support dengan baik di http:// maupun https://.

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

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

• Meningkatkan jumlah loyal visitor. 
• Mengirimkan update terbaru, ibarat 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 memakai platform blogger ibarat blog amp-blogger.com, tentunya hal tersebut tidak mungkin 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 menciptakan APP di OneSignal. Pergi ke https://onesignal.com, daftar memakai akun Google anda. Lalu buat sebuah App dengan mengklik 'Add a New App'.

Namai APP OneSignal tersebut, maka akan muncul sebuah pop-up modal, lalu 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 https://iartikelindo.blogspot.com/search?q=custom-domain-blogger-kini-support" target="_blank">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 harapan anda dan klik  save. 
• Kemudian anda akan dialihkan untuk konfigurasi HTTP Pop-Up. Silahkan isi text untuk kostumisasi tampilan text tersebut, lalu klik save. 

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

Setelah proses konfigurasi tersebut, maka anda akan mendapatkan code script ibarat berikut ini. Silahkan perhatikan APP ID (tanda kuning) anda, sebab itu yang akan diharapkan 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 arahan tersebut pada notepad. Selanjutnya kita akan konfigurasi button subscribe-nya, supaya bekerja di halaman AMP Blogger.

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

Berbagi :