Memasang Onesignal Web Push Notif Pada Blogger

Tutorial cara Memasang OneSignal Web Push Notif pada Blogger

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

Push notification untuk web ketika ini sudah sangat terkenal dipakai oleh media-media besar di internet. Banyak laba bagi para webmaster jikalau memakai layanan Push notification. Diantaranya:

• Meningkatkan jumlah pengunjung loyal.
• Kirim pembaruan terbaru, menyerupai 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 ketika ini, mereka sudah menjaring lebih dari 450 ribu website di dunia.

Bagi anda pengguna platform Blogspot / Blogger, anda tetap sanggup memakai layanan push notification dari Blogger. Sebelumnya saya juga sudah mengatakan klarifikasi 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, ialah amp-helper-frame.html dan amp-permission-dialog.html .

Jika anda memakai platform blogger menyerupai blog alinux, tentunya hal tersebut tidak mungkin 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 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, 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, kemudian pilih Custom Link. Ini mempunyai kegunaan untuk menciptakan 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 mendapat script kode. Silahkan copy script arahan tersebut.

Memasang OneSignal pada template Blogger

Untuk menambahkan slide notification, anda hanya perlu menambahkan script yang diberikan OneSignal tadi sebelum </head>. Namun menurut 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 kemudian klik Edit HTML. Kemudian cari </head> dan tempelkan arahan script OneSignal yang tadi sudah didapatkan dari APP OneSignal anda. Contoh menyerupai 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 arahan <data:post.body/>, jikalau ada lebih dari 1, silahkan cari yang terakhir. Kemudian copy dan paste arahan sempurna 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 :)

Berbagi :