Shopify-Store Web-Push-SDK-Integrationsanleitung

Überblick

Diese Anleitung beschreibt, wie Sie das Web-Push-SDK in einen Shopify-basierten Shop integrieren, um Browser-Push-Benachrichtigungen zu nutzen.

Voraussetzungen

• Shopify-Shop-Admin-Zugang
• Web-Push-SDK-Dateien (webSdk.produce.min.3.3.4.js, sw.produce.min.3.3.4.js)
• Grundkenntnisse in der Bearbeitung von Shopify-Themes

Integrationsschritte

Über den Shopify-Theme-Editor hinzufügen (empfohlen)

1. SDK-Dateien in Shopify hochladen

1. Im Shopify-Admin anmelden
2. Online Store > Themes öffnen
3. Beim aktuellen Theme auf Actions klicken und Edit code wählen
4. Im Ordner Assets auf Add a new asset klicken
5. webSdk.produce.min.3.3.4.js (Haupt-SDK-Datei) hochladen
6. sw.produce.min.3.3.4.js (Service-Worker-Datei für Push) hochladen
7. Asset-URLs notieren (z. B. {{ 'webSdk.produce.min.3.3.4.js' | asset_url }} und {{ 'sw.produce.min.3.3.4.js' | asset_url }})

Wichtig: sw.produce.min.3.3.4.js ist die Service-Worker-Datei für Push-Nachrichten im Hintergrund. Der Pfad muss bei der SDK-Initialisierung korrekt gesetzt werden.

2. SDK einbinden und initialisieren

1. In der Theme-Ansicht die Datei theme.liquid öffnen
2. Vor dem </head>-Tag folgenden Code einfügen:

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

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

        MTpushInterface.onMsgReceive((msgData) => {
          console.log("Push-Nachricht erhalten:", msgData);
        });

        MTpushInterface.init({
          appkey: "",
          user_str: visitorId,
          fail(err) {
            console.log("Push-Init fehlgeschlagen", err);
          },
          success(data) {
            console.log("Push-Init erfolgreich", data);
          },
          webPushcallback(code, tip) {
            console.log("Status und Meldung", 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 }}

            

Überprüfung

1. SDK-Ladung prüfen

1. Shop-Seite im Browser öffnen
2. Rechtsklick > Untersuchen oder F12
3. In der Konsole nach SDK-Meldungen schauen
4. window.MTpushInterface eingeben und prüfen, ob definiert

2. Push testen

1. Shop muss über HTTPS laufen (für Web-Push erforderlich)
2. Prüfen, ob der Browser die Push-Berechtigung anzeigt (falls aktiviert)

3. Service-Worker-Registrierung prüfen

1. DevTools (F12) öffnen
2. Tab Application
3. Links Service Workers wählen
4. Prüfen, ob sw.produce.min.3.3.4.js registriert ist
5. Bei Fehlern Konsole prüfen

Fehlerbehebung

Häufige Probleme und Lösungen

Q1: SDK lädt nicht

• Pfade: asset_url prüfen
• Netzwerk: Ob die JS-Dateien geladen werden
• Berechtigungen: Dateien unter Shopify Assets erreichbar

Q2: Init schlägt fehl

• Reihenfolge: SDK vor Init-Code laden
• HTTPS: Web-Push nur mit HTTPS
• Browser: Web-Push-Unterstützung prüfen
• swUrl: Korrekt setzen, SW-Datei erreichbar
• Assets: sw.produce.min.3.3.4.js in Assets hochgeladen

Q4: Service-Worker-Registrierung schlägt fehl

• swUrl: Mit {{ 'sw.produce.min.3.3.4.js' | asset_url }} prüfen
• URL: Service-Worker-URL im Browser aufrufen und Download prüfen
• Application > Service Workers: Registrierungsstatus prüfen
• HTTPS: Service Worker nur über HTTPS (außer localhost)