Skip to main content

Cara Membuat Akun OneSignal Dan Masangnya Di Blog Valid Amp Dan Non Amp


Pernahkah kalian ketika mengunjungi sebuah blog atau website yang secara tiba-tiba muncul Notifikasi berlanggangan serta ada logo blog tersebut dan ketika kalian klik berlangganan smarthpone anda anda menampilkan yang menyatakan bahwa apakah anda ingin menerima notifikasi dari blog atau website tersebut ?
Nah itu lah yang di namankan Push Web Notification ( PWN )

Fungsi notifikasi web ini sama halnya dengan subcribe box atau berlangganan email akan tetapi sedikit berbeda karena notifikasi ini akan langsung muncul di smarthpone tanpa harus membuka kontak email terlebih dahulu, jika anda berlangganan di blog tersebut jika ada update artikel terbaru.
Menurut saya notifikasi web ini sama halnya dengan subcribe di channel youtube tanpa harus membuka email jika ada video baru maka otomatis kita akan mendafatkan notifikasi video baru tentunya jika anda berlangganan channel tersebut.

Keuntungan memasang push notifikasi web di blog ini juga akan mempermudah pelanggan blog anda untuk mendafatkan update artikel terbaru sehingga akan mudah mempunyai pembaca setia dan tentunya akan lebih mudah mendafatkan viewer.

Jadi intinya jika anda memasang notifikasi web di blog dan jika ada yang berlangganan maka otomatis bila ada artikel baru maka akan mendafatkan notifikasi dari blog atau website anda.


Kali ini blog Encep Nurdin ID akan berbagi bagaimana cara memasang Push Web notification di blog/blogger baik itu Blog Amp ataupun Blog non Amp
Sebenarnya banyak sekali layanan untuk memasang push notifikasi web ini salah satunya Onesignal, Pushengage dan lain sebagainya akan tetapi kali ini saya akan menunjukan cara memasang push notifikasi web dengan layanan onesignal , karna menurut blog resmi onesignal sekarang push notifikasi web onesignal sekarang mendukung pemasangan di website AMP

Push notifikasi web onesignal juga bisa menampilkan berbagai model tampilan, Mudah di lihat oleh para pembaca serta tidak menghalangi pandangan , Selain itu kita bisa edit kata-kata notifikasinya sesuai dengan keinginan.

Jika anda ingin membuat dan memasang push web notifikasi ini di blogger baik itu blog amp dan non amp, berikut ini langkah-langkahnya :

Membuat Push Notifikasi Web Dengan OneSignal



1.

Pertama-tama silahkan kunjungi https://onesignal.com/
Silahkan anda buat akun terlebih dahulu



Isikan Email Address, Password,dan Company Onization Name
Selanjutnya verifikasi email dan lanjut log-in kembali dengan email yang ada buat tadi, atau juga anda bisa login dengan akun google jika anda daftar dengan google account

2.

Setelah anda Log-in sekarang buat Aplikasi baru dengan cara klik New App/Website > Pada App Neme Isikan nama blog anda lalu klik CREATE



3.

Tahap selanjutnya di bagian Edit App , Pilih Web Push > Kemudian klik NEXT



4.

Selanjutnya di tahap Configurate Web Push , SELECT YOUR WEBSITE BUILDER/CMS > Pilih Blogger



5.

Selanjutnya di halaman Site Setup , Isikan formulir blog sesuai dengan data Blogger anda



Di bagian My site is not fully HTTPS geser opsinya > kemudian isikan CHOOSE A LABEL
contoh : encepnurdin.oc.tc

Lebel ini yang akan kita pakai jika anda ingin memasangnya di blog Amp, Jika anda ingin memasangnya di blog non Amp anda bisa melewatinya

6.

Selanjutnya gulir ke bawah di bagian Permission Prompt Setup , Pilih fitur apa saja yang ingin anda aktifkan , Setelah anda atur klik SAVE



7.

Bagian Welcome Notification di sini anda bisa atur notifikasi selamat datang kepada user yang melakukan langganan atau pada pengunjung blog anda nantintinya



Anda bisa atur Tittle, Messange dan menggeser opsinya jika ingin membuka Link
Open link When Clicking Welcome Notification
Isikan dengan alamat blog anda

8.

Pada tahap selanjutnya di bagaian Advanced anda juga bisa atur sesuai keinginan atau juga di tahap ini anda bisa melewatinya



9.

Tahap selanjutnya Add Code To Site akan tampil kode script dari Onesignal untuk kita pasang di blog kita



Simpan atau salin kode ini di notepad atau sejenisnya


Memasang Push Web Notifikasi Onesignal Pada Blog Non Amp



Untuk memasang push notifikasi web onesignal di blog non amp cara memsangnya cukup mudah , anda tinggal memasukan Code Script dari onesignal tadi di template blog anda

Buka Blogger
Pilih Edit Template
Masukan Kode Script onesignal di atas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
Lalu save template

Setelah anda save template kembali lagi ke halaman onesignal tadi dan klik tombol FINISH
Selesai


Memasang Push Notifikasi Web Pada Blog Valid Amp HTML



Sementara untuk memasang push notifikasi web onesignal di blog amp anda tidak bisa memasang sembarangan Script selain dari amp , karna kode Script dari onesignal tadi tidak valid amp

Di kutip dari blog resmi onesignal kita bisa pasang notifikasi web dari onesignal dengan cara menggunakan amp-web-push pada template blog amp anda.

Berikut ini langkah-langkahnya


pertama simpan kode amp-web-push ini di atas </head> di edit template blog amp anda


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


Selanjutnya simpan kode berikut ini di atas </body>


<amp-web-push id="amp-web-push" layout="nodisplay" helper-iframe-url="https://encepnurdin.os.tc/amp-helper-frame.html?appId=31c3cce5c2057ad9c058b4116fd83786" permission-dialog-url="https://encepnurdin.os.tc/amp-permission-dialog.html?appId=31c3cce5c2057ad9c058b4116fd83786" service-worker-url="https://encepnurdin.os.tc/service-worker.js?appId=31c3cce5c2057ad9c058b4116fd83786" ></amp-web-push>


Keterangan :
Silahkan ganti label https://encepnurdin.os.tc dan App ID 31c3cce5c2057ad9c058b4116fd83786 yang kita dapatkan saat pembuatan push notifikasi web onesignal tadi

Catatan anda cukup mengganti label.os.tc dan App ID nya saja di Script yang anda dafatkan saat pembuatan push notifikasi web onesignal, Di bagian halaman Site Setup dan jangan lupa geser opsi
My site is not fully HTTPS untuk mendafatkan Url Label.os.tc


Selanjutnya untuk menampilkan tombol push notifikasi web onesigal, Simpan kode berikut ini di markup template blog Amp anda

<!-- 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>


Jika anda ingin menampilkan tombol push notifikasi web onesignal tersebut di bawah artikel simpan kode tadi di bagian <data:post body/>


Untuk tampilan lebih menarik lagi tambahkan CSS berikut ini di bawah <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)}


Terakhir save template dan selesai

Nah itulah informasi bagaimana cara membuat Push Web Notification (PWN) Onesignal dan memasangnya di blog amp serta non amp
Selamat mencoba dan semoga bermanfaat, Untuk demonya anda bisa liat di bawah artikel blog amp saya
Jangan lupa klik Subcribe To Update untuk mendafatkan notifikasi artikel terbaru dari blog Encep Nurdin ID , Terimkasih
Reaksi:

Berbagi Itu Peduli :

Comment Policy: Gunakanlah kontak komentar ini dengan bijak jangan buat link atau spam, Jika berkenan silahkan terlebih dahulu, Follow this blog

Selanjutnya tuliskan komentar anda sesuai dengan topik postingan ini.

Centang kotak Beritahu saya untuk mendapatkan notifikasi balasan via email.

Untuk komentar secara Private silahkan masuk ke Messaging Google