Memasang OneSignal Web Push Notif pada Blogger

Tutorial cara Memasang OneSignal Web Push Notif pada Blogger

OneSignal merupakan aplikasi pihak ketiga yang menawarkan layanan marketing untuk pemilik website, khususnya diantarnya mobile push notification, web push notification, dan juga email.

Push notification untuk web saat ini sudah sangat populer digunakan oleh media-media besar di internet. Banyak keuntungan bagi para webmaster jika menggunakan layanan Push notification. Diantaranya:

• Meningkatkan jumlah pengunjung loyal.
• Kirim pembaruan terbaru, seperti pesan, iklan, atau artikel terbaru.
• Meningkatkan nilai konversi situs web.

Nah dari sekian banyaknya layanan Push Notification, OneSignal menjadi salah satu yang menjadi layanan push notification paling banyak digunakan. Untuk saat ini, mereka sudah menjaring lebih dari 450 ribu website di dunia.

Bagi anda pengguna platform Blogspot / Blogger, anda tetap bisa menggunakan layanan push notification dari Blogger. Sebelumnya saya juga sudah memberikan penjelasan mengenai cara menambahkan web push notification pada halaman Google AMP Blogger. 

Dan kali ini, saya akan menjelaskan Tutorial Menambahkan Web Push Notification pada Blogger Blog. 

Membuat dan Konfigurasi App OneSignal

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

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

Untuk memasang Web Push Notification di Blogger, 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 website
• Site URL: URL blog anda, isi dengan protokol http:// or https://. Contoh: https://www.alinuxblog.com
• Upload site icon: min 80px X 80px
• Aktifkan 'my site is not fully https' (required), and isi nama LABEL. contoh: amp-google.

3. Permission Prompt Setup

• Klik Add a Promt, pada promt type pilih Slide Promt dan klik save. 
• Kemudian anda akan dialihkan untuk konfigurasi HTTP Pop-Up. Silahkan isi text untuk kostumisasi tampilan text tersebut, kemudian klik save. 
• Tambahkan satu lagi promt dengan mengklik add promt, lalu pilih Custom Link. Ini berguna untuk membuat tombol subscribe notification, yang akan saya inject di body artikel.

4. Abaikan pengaturan untuk tab Welcome Notification dan  Advanced. Lalu klik SAVE. 

5. Setelah konfigurasi selesai anda akan mendapatkan script kode. Silahkan copy script kode tersebut.

Memasang OneSignal pada template Blogger

Untuk menambahkan slide notification, anda hanya perlu menambahkan script yang diberikan OneSignal tadi sebelum </head>. Namun berdasarkan pengalaman saya, kadang slide subricbe button tidak muncul pada blogger.

Akhirnya saya juga harus memasang Button Subscribe OneSignal secara manual melalui Prompt Custom Link.

Silahkan masuk ke dashboard Blogger, klik Themes lalu klik Edit HTML. Kemudian cari </head> dan tempelkan kode script OneSignal yang tadi sudah didapatkan dari APP OneSignal anda. Contoh seperti di bawah ini:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async="async"></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(function() {
      OneSignal.init({
        appId: "a9416835-bc53-47db-a413-821b7c8xxxx",
      });
    });
  </script>

Ganti warna kuning dengan APP ID Onesignal anda
Kemudian cari kode <data:post.body/>, jika ada lebih dari 1, silahkan cari yang terakhir. Kemudian copy dan paste kode tepat di bawahnya.

<div class='onesignal-customlink-container'/>

Silahkan SAVE perubahan pada template anda.

Untuk preview onesignal push notification, coba lakukan pada mode Incognito di Chrome atau FireFox anda. 

Selamat mencoba, dan diskusikan di kolom komentar :)

Bagikan Artikel ini