Panduan Integrasi SDK Web Push untuk Toko Shopify

Ringkasan

Panduan ini menjelaskan cara mengintegrasikan SDK Web Push ke toko berbasis Shopify untuk mengaktifkan notifikasi push browser.

Prasyarat

• Akses admin toko Shopify
• File SDK Web Push (webSdk.produce.min.3.3.4.js, sw.produce.min.3.3.4.js)
• Dasar pengeditan tema Shopify

Langkah integrasi

Tambah melalui editor tema Shopify (disarankan)

1. Unggah file SDK ke Shopify

1. Masuk ke admin Shopify
2. Buka Toko Online > Tema
3. Pada tema yang dipakai, klik Tindakan > Edit kode
4. Di folder Aset, klik Tambah aset baru
5. Unggah webSdk.produce.min.3.3.4.js (file SDK utama)
6. Unggah sw.produce.min.3.3.4.js (file Service Worker untuk push)
7. Catat URL aset (mis. {{ 'webSdk.produce.min.3.3.4.js' | asset_url }} dan {{ 'sw.produce.min.3.3.4.js' | asset_url }})

Penting: sw.produce.min.3.3.4.js adalah file Service Worker yang menangani pesan push di latar belakang. Path-nya harus dikonfigurasi dengan benar saat inisialisasi SDK.

2. Tambah skrip SDK dan inisialisasi

1. Di editor tema, buka file theme.liquid
2. Tambahkan kode berikut sebelum tag </head>:

              
              <script>
  (function() {
    function initializeSDK() {
      const visitorId = getFingerprint();

      if (typeof window.MTpushInterface !== 'undefined') {
        MTpushInterface.mtPush.onDisconnect(function () {
          console.log("onDisconnect");
        });

        MTpushInterface.onMsgReceive((msgData) => {
          console.log("Pesan push diterima:", msgData);
        });

        MTpushInterface.init({
          appkey: "",
          user_str: visitorId,
          fail(err) {
            console.log("Inisialisasi push gagal", err);
          },
          success(data) {
            console.log("Inisialisasi push berhasil", data);
          },
          webPushcallback(code, tip) {
            console.log("Kode dan pesan", code, tip);
          },
          swUrl: '{{ "sw.produce.min.3.3.4.js" | asset_url }}',
        });
      }
    }

    window.MTpushInterfaceReady = initializeSDK;
  })();
</script>
{{ 'webSdk.produce.min.3.3.4.js' | asset_url | script_tag }}

            

Verifikasi

1. Cek apakah SDK ter-load

1. Buka halaman toko
2. Klik kanan > Periksa atau F12
3. Di Konsol, cek pesan muat SDK
4. Ketik window.MTpushInterface untuk memastikan terdefinisi

2. Uji push

1. Situs harus diakses lewat HTTPS (wajib untuk web push)
2. Cek apakah browser menampilkan permintaan izin push (jika diaktifkan)

3. Cek registrasi Service Worker

1. Buka DevTools (F12)
2. Tab Application
3. Di sisi kiri, Service Workers
4. Pastikan sw.produce.min.3.3.4.js terdaftar
5. Jika ada error, cek Konsol

Pemecahan masalah

Masalah umum dan solusi

Q1: SDK tidak ter-load

• Path: Pastikan asset_url benar
• Jaringan: Pastikan file JS terunduh
• Aset: File tersedia di Aset Shopify

Q2: Inisialisasi gagal

• Urutan: Skrip SDK harus dijalankan sebelum kode init
• HTTPS: Web push hanya di HTTPS
• Browser: Cek dukungan web push
• swUrl: Set dengan benar dan pastikan file SW dapat diakses
• Aset: Pastikan sw.produce.min.3.3.4.js diunggah di Aset

Q4: Registrasi Service Worker gagal

• swUrl: Gunakan {{ 'sw.produce.min.3.3.4.js' | asset_url }} untuk URL yang benar
• Akses: Buka URL Service Worker di browser dan pastikan file terunduh
• Application > Service Workers: Cek status registrasi
• HTTPS: Service Worker memerlukan HTTPS (kecuali localhost)