Cara Mengatur Notifikasi Push Webpushr untuk WordPress

Webpushr adalah platform notifikasi push web yang mengirimkan notifikasi browser secara real-time kepada pengguna yang telah berlangganan, bahkan ketika pengguna tersebut telah menavigasi sepenuhnya keluar dari situs Anda. Tidak seperti email atau SMS, web push tidak memerlukan informasi kontak pribadi — pelanggan menerima notifikasi langsung melalui sistem notifikasi native browser mereka melalui Web Push Protocol dan Push API.

Panduan ini memandu proses pengaturan lengkap: mulai dari pembuatan akun dan konfigurasi plugin WordPress hingga segmentasi lanjutan, otomatisasi berbasis pemicu, dan analitik pelanggan. Panduan ini juga mencakup kasus teknis khusus — konflik service worker, persyaratan HTTPS, kesenjangan kompatibilitas iOS, dan pertimbangan performa — yang sebagian besar tutorial lewatkan sepenuhnya.

Prasyarat Sebelum Memulai

Sebelum menyentuh dasbor WordPress, verifikasi bahwa lingkungan Anda memenuhi persyaratan berikut:

• HTTPS adalah wajib. Push API dan service worker dibatasi pada origin yang aman. Situs yang berjalan di HTTP biasa tidak dapat mendaftarkan service worker dan oleh karena itu tidak dapat mengirimkan notifikasi web push. Jika situs Anda belum diamankan, Anda memerlukan sertifikat SSL yang valid — AlexHost menyediakan Sertifikat SSL yang memenuhi persyaratan ini.
• WordPress 5.0 atau lebih tinggi direkomendasikan untuk kompatibilitas penuh editor blok Gutenberg dengan meta box Webpushr.
• PHP 7.4 atau lebih tinggi di sisi server untuk menghindari peringatan fungsi yang sudah usang yang dapat secara diam-diam merusak inisialisasi plugin.
• Kesadaran dukungan browser: Chrome, Firefox, dan Edge di desktop dan Android mendukung Web Push Protocol. Safari di macOS menambahkan dukungan di Safari 16 (macOS Ventura). iOS Safari menambahkan dukungan terbatas di iOS 16.4 hanya untuk PWA layar beranda — web push berbasis browser standar di iOS tetap tidak dapat diandalkan pada saat penulisan ini.
• Tidak ada service worker yang berkonflik. Jika Anda sudah menjalankan plugin PWA atau layanan notifikasi push lainnya, service worker mereka mungkin berkonflik dengan milik Webpushr. Audit service worker aktif Anda di chrome://serviceworker-internals/ sebelum melanjutkan.

Langkah 1: Buat dan Konfigurasikan Akun Webpushr Anda

Navigasikan ke webpushr.com dan daftarkan akun baru. Selama orientasi, Anda akan diminta memasukkan domain situs web Anda. Masukkan domain yang tepat seperti yang muncul di bilah alamat browser Anda, termasuk awalan www atau ketiadaannya — nilai ini digunakan untuk membatasi ruang lingkup service worker dan ketidakcocokan akan menyebabkan kegagalan langganan.

Setelah pendaftaran, Webpushr menyediakan dua kredensial penting:

• API Key — digunakan oleh plugin WordPress untuk mengautentikasi panggilan REST API untuk mengirim notifikasi.
• Auth Token — digunakan untuk permintaan API sisi server jika Anda kemudian membangun integrasi kustom.

Temukan kedua nilai tersebut di bawah Account > API Keys di dasbor Webpushr dan simpan dengan aman. API Key bukan rahasia dalam pengertian tradisional (tertanam dalam permintaan sisi klien), tetapi Auth Token harus dijaga kerahasiaannya.

Batas Paket Gratis vs. Berbayar Webpushr

Untuk sebagian besar situs WordPress kecil, tingkat gratis sudah cukup untuk memvalidasi saluran sebelum berkomitmen pada paket berbayar.

Langkah 2: Instal Plugin WordPress Webpushr

Masuk ke panel admin WordPress Anda dan ikuti jalur ini:

1. Pergi ke Plugins > Add New.
2. Cari Webpushr.
3. Temukan plugin resmi yang diterbitkan oleh Webpushr Inc. — verifikasi nama penerbit untuk menghindari menginstal plugin dengan nama serupa.
4. Klik Install Now, lalu Activate.

Atau, instal melalui WP-CLI jika Anda mengelola WordPress dari baris perintah:

wp plugin install webpushr-web-push-notifications --activate

Setelah aktivasi, item menu Webpushr baru muncul di navigasi WordPress sisi kiri.

Apa yang Sebenarnya Dilakukan Plugin di Tingkat Server

Memahami arsitektur plugin membantu Anda memecahkan masalah dengan cerdas. Saat aktivasi, plugin:

1. Mendaftarkan aturan penulisan ulang untuk menyajikan file service worker (webpushr-sw.js) dari root situs. Ini sangat penting — service worker harus disajikan dari ruang lingkup root untuk mengontrol seluruh origin.
2. Menyuntikkan cuplikan JavaScript ke setiap halaman front-end melalui wp_enqueue_scripts yang memuat SDK Webpushr dan mendaftarkan service worker.
3. Menghubungkan ke aksi WordPress publish_post dan publish_page untuk memicu notifikasi push otomatis saat konten diterbitkan.

Jika plugin caching Anda secara agresif menyimpan file service worker dalam cache, pelanggan mungkin menerima payload push yang sudah usang atau gagal mendaftar sama sekali. Kecualikan webpushr-sw.js dari aturan caching Anda.

Langkah 3: Hubungkan Plugin ke Akun Webpushr Anda

Navigasikan ke Webpushr > Settings di dasbor WordPress Anda. Anda akan melihat kolom berlabel API Key. Tempelkan API Key yang Anda ambil dari dasbor Webpushr di Langkah 1.

Klik Save Changes. Plugin akan membuat permintaan validasi ke API Webpushr. Jika kuncinya valid, konfirmasi keberhasilan akan muncul. Jika Anda melihat kesalahan:

• Konfirmasi tidak ada karakter spasi di awal atau akhir pada kunci yang ditempelkan.
• Verifikasi server Anda dapat membuat permintaan HTTPS keluar ke api.webpushr.com. Beberapa konfigurasi VPS yang diperketat memblokir koneksi keluar secara default. Di server Linux, uji dengan:

curl -I https://api.webpushr.com

Respons 200 OK atau 301 mengonfirmasi konektivitas. Jika koneksi habis waktu, periksa aturan firewall Anda dengan iptables -L OUTPUT atau ACL jaringan penyedia hosting Anda.

Jika Anda menjalankan WordPress di lingkungan VPS Hosting, Anda memiliki kendali penuh atas aturan firewall dan dapat memasukkan endpoint API Webpushr ke daftar putih secara langsung.

Langkah 4: Konfigurasikan Prompt Opt-In

Prompt opt-in adalah dialog izin browser yang meminta pengguna untuk mengizinkan notifikasi. Dialog izin native browser tidak dapat ditata gayanya — dialog tersebut dirender oleh browser itu sendiri. Namun, Webpushr menyediakan prompt pra-izin (overlay kustom yang muncul sebelum dialog native) yang dapat Anda sesuaikan sepenuhnya.

Konfigurasikan prompt pra-izin di dasbor Webpushr di bawah Settings > Opt-in Prompt:

• Gaya prompt: Pilih antara widget lonceng, bilah atas, kotak geser masuk, atau modal kustom.
• Teks prompt: Tulis salinan yang dengan jelas mengomunikasikan nilai berlangganan. Prompt yang tidak jelas seperti “Izinkan notifikasi?” secara konsisten berkinerja lebih buruk daripada prompt yang menentukan apa yang akan diterima pelanggan, seperti “Dapatkan notifikasi segera saat kami menerbitkan saran keamanan baru.”
• Penundaan prompt: Tetapkan penundaan (dalam detik atau tampilan halaman) sebelum menampilkan prompt. Menampilkannya segera saat halaman dimuat menghasilkan tingkat opt-in yang lebih rendah daripada menunggu hingga pengguna telah berinteraksi dengan setidaknya satu konten.
• Interval prompt ulang: Tentukan berapa hari yang harus berlalu sebelum pengguna yang menolak ditampilkan prompt lagi. Prompt ulang yang agresif merusak pengalaman pengguna dan meningkatkan tingkat pentalan.

Tolok Ukur Tingkat Opt-In berdasarkan Jenis Prompt

Prompt kontekstual — ditampilkan setelah pengguna menyelesaikan tindakan bermakna seperti membaca artikel hingga akhir — secara konsisten mengungguli semua pendekatan lainnya.

Langkah 5: Konfigurasikan Pengaturan Pengiriman Notifikasi

Push Otomatis saat Posting Diterbitkan

Di Webpushr > Settings, tombol Auto-Push Notification mengontrol apakah notifikasi push dikirim secara otomatis setiap kali Anda menerbitkan posting. Saat diaktifkan, Webpushr mengambil judul posting, kutipan, dan URL gambar unggulan serta membuat payload notifikasi secara otomatis.

Kasus khusus: Jika Anda menggunakan alur kerja staging-ke-produksi di mana posting diimpor atau statusnya diubah secara terprogram (misalnya, melalui WP-CLI atau skrip migrasi), hook publish_post akan aktif untuk setiap posting yang diimpor, berpotensi membanjiri pelanggan Anda dengan lusinan notifikasi dalam hitungan detik. Nonaktifkan auto-push sebelum menjalankan impor massal:

wp option update webpushr_auto_push 0

Aktifkan kembali setelah impor selesai.

Push Manual dari Editor Posting

Untuk kontrol yang lebih terperinci, nonaktifkan auto-push secara global dan gunakan meta box Webpushr per-posting di editor posting. Meta box ini muncul di bawah editor konten utama dan menampilkan kontrol berikut:

• Kirim notifikasi push: Kotak centang yang, saat dicentang, mengantrekan notifikasi saat diterbitkan atau diperbarui.
• Judul notifikasi kustom: Ganti judul posting dengan judul yang lebih menarik klik untuk notifikasi.
• Pesan notifikasi kustom: Ganti kutipan yang dibuat secara otomatis.
• URL notifikasi kustom: Arahkan pelanggan ke halaman arahan tertentu daripada permalink posting — berguna untuk kampanye promosi.
• Ikon notifikasi kustom: Ganti ikon situs default dengan gambar khusus kampanye.

Anatomi Payload Notifikasi

Payload notifikasi web push terdiri dari:

• title — ditampilkan dalam huruf tebal di bagian atas notifikasi.
• body — teks deskriptif di bawah judul.
• icon — gambar persegi (disarankan 192×192 px) yang ditampilkan bersama notifikasi.
• image — gambar banner besar yang ditampilkan di bawah isi pada platform yang didukung (Chrome di Android, Chrome di Windows).
• badge — ikon monokrom kecil yang ditampilkan di bilah status Android.
• url — URL tujuan saat pengguna mengklik notifikasi.
• actions — hingga dua tombol tindakan dengan label dan URL kustom (didukung di Chrome dan Edge).

Menjaga title di bawah 50 karakter dan body di bawah 120 karakter mencegah pemotongan di sebagian besar platform.

Langkah 6: Uji Notifikasi Push dari Ujung ke Ujung

Pengujian di sesi browser yang sama di mana Anda masuk ke WordPress tidak akan memberi Anda gambaran akurat tentang pengalaman pelanggan. Gunakan profil browser terpisah atau jendela penyamaran:

1. Buka situs web Anda di jendela pribadi/penyamaran.
2. Prompt pra-izin seharusnya muncul setelah penundaan yang Anda konfigurasikan.
3. Klik ajakan bertindak prompt, lalu klik Allow di dialog izin native browser.
4. Kembali ke dasbor WordPress Anda dan terbitkan posting uji, atau gunakan tombol Send Test Notification di dasbor Webpushr.
5. Verifikasi notifikasi muncul dengan judul, isi, ikon yang benar, dan bahwa mengkliknya menavigasi ke URL yang benar.

Mode kegagalan umum selama pengujian:

• Notifikasi tidak muncul: Periksa bahwa notifikasi browser tidak diblokir di tingkat OS (Windows Focus Assist, macOS Do Not Disturb, saluran notifikasi Android).
• Service worker tidak mendaftar: Buka DevTools > Application > Service Workers dan konfirmasi webpushr-sw.js terdaftar sebagai aktif. Jika menampilkan “waiting,” service worker lain memblokir aktivasi.
• Ikon tidak dimuat: URL ikon harus absolut (dimulai dengan https://) dan gambar harus disajikan dengan header CORS yang permisif jika dihosting di CDN.

Langkah 7: Fitur Lanjutan — Segmentasi, Penjadwalan, dan Pemicu

Segmentasi Audiens

Mesin segmentasi Webpushr memungkinkan Anda menandai pelanggan berdasarkan:

• Segmen berbasis URL: Secara otomatis menandai pelanggan yang mengunjungi URL atau pola URL tertentu (misalnya, semua pengguna yang mengunjungi /category/security/ ditandai security-readers).
• Atribut kustom: Teruskan pasangan kunci-nilai arbitrer melalui SDK JavaScript untuk membangun segmen berdasarkan properti pengguna yang sudah dilacak aplikasi Anda.
• Segmen keterlibatan: Webpushr secara otomatis melacak stempel waktu terakhir terlihat, memungkinkan Anda membuat kampanye keterlibatan ulang yang menargetkan pelanggan yang belum menerima notifikasi dalam 30+ hari.

Segmentasi memerlukan paket berbayar dan dikonfigurasi di dasbor Webpushr di bawah Segments.

Notifikasi Terjadwal

Penjadwalan memungkinkan Anda menyusun notifikasi sekarang dan mengirimkannya pada tanggal dan waktu mendatang, dengan dukungan zona waktu. Ini sangat berharga untuk:

• Promosi sensitif waktu dengan tenggat waktu yang ketat.
• Konten yang diterbitkan di luar jam lalu lintas puncak yang ingin Anda kirimkan selama jendela keterlibatan tinggi.
• Notifikasi ringkasan berulang (misalnya, rangkuman mingguan).

Notifikasi Berbasis Pemicu Kustom

Pemicu kustom mengaktifkan notifikasi berdasarkan peristiwa JavaScript di situs Anda. Misalnya, Anda dapat mengaktifkan notifikasi 24 jam setelah pengguna meninggalkan keranjang belanja, atau ketika pengguna mencapai kedalaman gulir tertentu. Pemicu dikonfigurasi melalui SDK JavaScript Webpushr dan memerlukan pekerjaan pengembangan kustom di luar kemampuan default plugin WordPress.

Pengujian A/B Salinan Notifikasi

Pada paket berbayar, Webpushr mendukung pengujian terpisah judul notifikasi dan salinan isi di seluruh segmen pelanggan. Jalankan pengujian A/B untuk menentukan pesan mana yang mendorong tingkat klik-tayang lebih tinggi sebelum meluncurkan kampanye penuh.

Langkah 8: Pantau Analitik Pelanggan

Dasbor Webpushr menyediakan metrik berikut:

• Total pelanggan: Jumlah endpoint aktif, berhenti berlangganan, dan kedaluwarsa.
• Tingkat pengiriman: Persentase notifikasi yang dikirim yang berhasil dikirimkan ke layanan push browser (FCM untuk Chrome/Edge, Mozilla Autopush untuk Firefox).
• Tingkat klik-tayang (CTR): Persentase notifikasi yang terkirim yang menghasilkan klik.
• Pertumbuhan langganan dari waktu ke waktu: Tren akuisisi pelanggan harian dan mingguan.

Catatan teknis penting tentang “terkirim” vs. “diterima”: Notifikasi ditandai sebagai terkirim ketika layanan push browser (misalnya, FCM Google) menerima payload. Jika perangkat pengguna sedang offline, FCM mengantrekan notifikasi dan mengirimkannya saat perangkat terhubung kembali — tetapi hanya dalam jendela TTL (Time to Live) yang Anda konfigurasikan. TTL default adalah 28 hari. Untuk notifikasi sensitif waktu, tetapkan TTL yang lebih pendek untuk menghindari pengiriman konten yang sudah usang.

Matriks Kompatibilitas Platform dan Browser

“Dukungan penuh” berarti Web Push Protocol, service worker, dan tindakan notifikasi semuanya didukung. Pengguna iOS pada sesi browser standar tetap berada di luar jangkauan web push, yang merupakan kesenjangan audiens yang berarti untuk situs yang berat di perangkat mobile.

Pertimbangan Infrastruktur Hosting

Pengiriman notifikasi web push sebagian besar ditangani oleh layanan push pihak ketiga (FCM, Mozilla Autopush), sehingga throughput mentah server Anda bukan hambatan untuk pengiriman. Namun, lingkungan hosting Anda memengaruhi:

• Kecepatan penyajian service worker: File webpushr-sw.js harus diambil dengan cepat pada setiap pemuatan halaman agar browser dapat memverifikasi bahwa service worker sudah terkini. Server yang lambat meningkatkan Time to First Byte (TTFB) untuk file ini.
• Waktu respons API: Ketika posting baru diterbitkan, plugin membuat panggilan API sinkron ke Webpushr. Pada hosting bersama dengan batas koneksi keluar yang ketat, panggilan ini dapat habis waktu dan gagal secara diam-diam.
• Keandalan webhook: Jika Anda mengonfigurasi webhook Webpushr untuk memberi tahu server Anda tentang peristiwa langganan, server Anda harus dapat menerima permintaan POST masuk secara andal.

Menjalankan WordPress di VPS dengan cPanel memberi Anda kendali untuk menyetel batas waktu eksekusi PHP, mengonfigurasi aturan firewall keluar, dan memantau pengiriman service worker tanpa batasan lingkungan bersama. Untuk situs dengan lalu lintas tinggi di mana kampanye notifikasi push mendorong lonjakan lalu lintas bersamaan yang signifikan, Server Dedicated memastikan origin Anda dapat menyerap beban klik-tayang yang dihasilkan tanpa pembatasan.

Untuk tim yang mengelola beberapa properti WordPress, Email Hosting yang dipasangkan dengan Webpushr menciptakan strategi keterlibatan ulang dua saluran — push untuk kecepatan, email untuk kedalaman.

Matriks Keputusan Teknis: Kapan Menggunakan Webpushr vs. Alternatif

Tingkat gratis Webpushr lebih terbatas daripada OneSignal, tetapi implementasi service worker-nya jauh lebih bersih dan kurang rentan terhadap konflik dengan plugin WordPress lainnya — keunggulan praktis pada instalasi WordPress yang kompleks.

Daftar Periksa Praktis Sebelum Ditayangkan

• HTTPS aktif dan sertifikat SSL valid serta bukan self-signed.
• Service worker webpushr-sw.js dapat diakses di https://yourdomain.com/webpushr-sw.js dan mengembalikan status 200.
• File service worker dikecualikan dari aturan cache plugin caching Anda.
• Penundaan prompt opt-in diatur setidaknya 5 detik atau satu tampilan halaman.
• Auto-push dinonaktifkan jika Anda menjalankan impor massal terjadwal atau migrasi konten.
• Notifikasi uji telah diterima dari ujung ke ujung dalam sesi browser yang bersih.
• Dimensi ikon notifikasi adalah 192×192 px dan URL-nya adalah HTTPS absolut.
• TTL dikonfigurasi dengan tepat untuk sensitivitas waktu konten Anda.
• Garis dasar analitik dicatat sebelum kampanye pertama Anda sehingga Anda memiliki titik perbandingan yang bermakna.
• Kebijakan privasi/GDPR diperbarui untuk mengungkapkan pengumpulan data notifikasi push.

FAQ

Apakah Webpushr berfungsi tanpa HTTPS?

Tidak. Web Push API dan service worker dibatasi pada origin yang aman oleh spesifikasi browser. Situs mana pun yang berjalan di HTTP tidak dapat mendaftarkan service worker dan oleh karena itu tidak dapat mengirim atau menerima notifikasi web push. Sertifikat SSL adalah persyaratan teknis yang ketat, bukan praktik terbaik opsional.

Mengapa notifikasi push saya tidak terkirim ke beberapa pelanggan?

Penyebab paling umum adalah: perangkat pelanggan offline melampaui jendela TTL notifikasi; pengguna mencabut izin notifikasi di tingkat browser atau OS; atau endpoint layanan push browser (FCM, Mozilla Autopush) mengembalikan registrasi yang kedaluwarsa atau tidak valid. Dasbor Webpushr menandai ini sebagai pengiriman “gagal” dan secara otomatis menghapus endpoint yang mengembalikan respons 410 Gone, yang merupakan perilaku yang benar sesuai spesifikasi Web Push Protocol.

Bisakah saya mengirim notifikasi push ke pengguna iOS?

Mulai iOS 16.4, web push hanya didukung untuk Progressive Web App (PWA) yang telah ditambahkan ke layar beranda. Pengguna yang menjelajahi situs Anda di Safari atau browser iOS lainnya tanpa menambahkannya ke layar beranda mereka tidak akan menerima notifikasi web push. Ini adalah pembatasan tingkat platform yang diberlakukan oleh Apple, bukan keterbatasan Webpushr.

Apakah service worker Webpushr akan berkonflik dengan PWA atau plugin caching saya yang sudah ada?

Bisa. Hanya satu service worker yang dapat mengontrol ruang lingkup tertentu pada satu waktu. Jika plugin PWA (misalnya, Super PWA) atau layanan push lainnya telah mendaftarkan service worker di ruang lingkup root, service worker Webpushr akan mengantri dalam status “waiting” dan tidak pernah aktif. Solusinya adalah menggunakan service worker yang mengimpor kedua skrip, atau memilih satu penyedia push dan menonaktifkan yang lainnya. Periksa chrome://serviceworker-internals/ untuk mengaudit semua worker yang terdaftar di domain Anda.

Apakah menonaktifkan plugin Webpushr akan membatalkan langganan pelanggan saya yang sudah ada?

Tidak. Menonaktifkan plugin menghapus SDK JavaScript dari front-end Anda, yang mencegah langganan baru dan menghentikan notifikasi otomatis. Namun, registrasi endpoint push yang sudah ada tetap valid di browser hingga pengguna secara eksplisit mencabut izin atau endpoint kedaluwarsa. Jika Anda mengaktifkan kembali plugin dengan API Key yang sama, pelanggan tersebut akan dapat dijangkau kembali segera.