React Native SDK: Grundlegende Integrationsanleitung

Dieser Abschnitt enthält Informationen zur Integration des Pushwoosh React Native SDK in Ihre Anwendung.

Voraussetzungen

Um das Pushwoosh React Native SDK in Ihre App zu integrieren, benötigen Sie Folgendes:

Anforderungen

• Ein Pushwoosh-Konto.
• Ein Pushwoosh-Projekt, das in Ihrem Konto eingerichtet ist.
• Für die iOS-Integration:
  • Eine iOS-Plattform, die für den Versand von Push-Benachrichtigungen konfiguriert ist. Wir empfehlen die Verwendung der Konfiguration mit Token-basierter Authentifizierung als einfachsten Ansatz.
  • Stellen Sie das Gateway auf Sandbox ein, um Push-Benachrichtigungen an einen Simulator zu senden.
• Für die Android-Integration:
  • Eine konfigurierte Android-Plattform
  • Die Projektnummer (auch als Sender-ID bekannt), die Datei google-services.json und den Paketnamen aus Ihrem Firebase-Projekt.
  • Ein Firebase-Projekt, das mit Ihrer Android-Anwendung verbunden ist. Folgen Sie bei Bedarf der Firebase-Einrichtungsanleitung.
• Ihren Pushwoosh-Anwendungscode und Ihr Pushwoosh-Geräte-API-Token aus dem Pushwoosh Control Panel für Ihre Anwendung.

Integrationsschritte

1. Abhängigkeit des Pushwoosh React Native SDK hinzufügen

Fügen Sie die Abhängigkeit des Pushwoosh React Native SDK zu Ihrem Projekt hinzu:

npm install pushwoosh-react-native-plugin --save

2. Initialisierung des React Native SDK

In der Root-Komponente Ihrer index.js-Datei:

• Importieren Sie das pushwoosh-react-native-plugin.
• Initialisieren Sie das Pushwoosh SDK.
• Rufen Sie register() in Ihrer Initialisierungslogik auf, um sich für Push-Benachrichtigungen zu registrieren.

index.js

import Pushwoosh from 'pushwoosh-react-native-plugin';

AppRegistry.registerComponent(appName, () => App);

Pushwoosh.init({
    "pw_appid" : "__YOUR_APP_ID__" ,
    "project_number" : "__YOUR_FCM_SENDER_ID__"
});

Pushwoosh.register();

Wobei:

• __YOUR_APP_ID__ der Anwendungscode aus dem Pushwoosh Control Panel ist.
• __YOUR_FCM_SENDER_ID__ die Firebase-Projektnummer aus der Firebase Console ist.

3. Natives iOS-Setup

3.1 Capabilities

Um Push-Benachrichtigungen in Ihrem Projekt zu aktivieren, müssen Sie bestimmte Capabilities hinzufügen.

Fügen Sie im Abschnitt „Signing & Capabilities“ die folgenden Capabilities hinzu:

• Push Notifications
• Background Modes. Aktivieren Sie nach dem Hinzufügen dieser Capability das Kontrollkästchen für Remote notifications.

Wenn Sie Time Sensitive Notifications (iOS 15+) verwenden möchten, fügen Sie auch die Capability Time Sensitive Notifications hinzu.

3.2 Info.plist

Setzen Sie in Ihrer Runner/Info.plist den Schlüssel __PUSHWOOSH_DEVICE_API_TOKEN__ auf das Pushwoosh-Geräte-API-Token:

info.plist

<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

3.3 Nachverfolgung der Nachrichtenzustellung

Sie müssen Ihrem Projekt ein „Notification Service Extension“-Ziel hinzufügen. Dies ist für eine genaue Zustellungsverfolgung und Funktionen wie Rich Media unter iOS unerlässlich.

Befolgen Sie die Schritte der nativen Anleitung, um das Erweiterungsziel und den darin erforderlichen Pushwoosh-Code hinzuzufügen.

3.4 Installation von Abhängigkeiten für das iOS React Native-Projekt

Um Abhängigkeiten für das iOS React Native-Projekt zu installieren, navigieren Sie im Terminal zum Ordner ios und führen Sie Folgendes aus:

pod install --repo-update

4. Natives Android-Setup

4.1 Abhängigkeiten installieren

Stellen Sie sicher, dass die erforderlichen Abhängigkeiten und Plugins zu Ihren Gradle-Skripten hinzugefügt werden:

Fügen Sie das Google Services Gradle-Plugin zu den Abhängigkeiten Ihrer build.gradle-Datei auf Projektebene hinzu:

android/build.gradle

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

Wenden Sie das Plugin in Ihrer build.gradle-Datei auf App-Ebene an:

app/build.gradle

apply plugin: 'com.google.gms.google-services'

4.2 Firebase-Konfigurationsdatei hinzufügen

Platzieren Sie die Datei google-services.json in den Ordner android/app in Ihrem Projektverzeichnis.

4.3 Pushwoosh-Metadaten hinzufügen

Fügen Sie in Ihrer main/AndroidManifest.xml das Pushwoosh-Geräte-API-Token innerhalb des <application>-Tags hinzu:

AndroidManifest.xml

<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_DEVICE_API_TOKEN__" />

Wichtig: Stellen Sie sicher, dass Sie dem Token im Pushwoosh Control Panel Zugriff auf die richtige App gewähren. Erfahren Sie mehr

5. Projekt ausführen

1. Erstellen Sie das Projekt und führen Sie es aus.
2. Gehen Sie zum Pushwoosh Control Panel und senden Sie eine Push-Benachrichtigung.
3. Sie sollten die Benachrichtigung in der App sehen.

Erweiterte Integration

In dieser Phase haben Sie das SDK bereits integriert und können Push-Benachrichtigungen senden und empfangen. Lassen Sie uns nun die Kernfunktionalität erkunden.

Event-Listener für Push-Benachrichtigungen

Im Pushwoosh SDK gibt es zwei Event-Listener, die für die Handhabung von Push-Benachrichtigungen konzipiert sind:

• Das pushReceived-Event wird ausgelöst, wenn eine Push-Benachrichtigung empfangen wird.
• Das pushOpened-Event wird ausgelöst, wenn ein Benutzer eine Benachrichtigung öffnet.

Sie sollten diese Event-Listener direkt nach der Initialisierung des SDK beim Start der Anwendung einrichten:

import {DeviceEventEmitter} from 'react-native'
import Pushwoosh from 'pushwoosh-react-native-plugin';

class PushwooshNotificationHandler {
  setupPushListeners() {

    DeviceEventEmitter.addListener('pushReceived', (e) => {
      console.warn("Push received: " + JSON.stringify(e));
    });

    DeviceEventEmitter.addListener('pushOpened', (e) => {
      console.warn("Push accepted: " + JSON.stringify(e));
    });

  }
}

Benutzerkonfiguration

Indem Sie sich auf das individuelle Benutzerverhalten und die Vorlieben konzentrieren, können Sie personalisierte Inhalte liefern, was zu einer erhöhten Benutzerzufriedenheit und -loyalität führt.

import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {
  afterUserLogin(user: User) {

    // Set user ID
    Pushwoosh.setUserId(user.getId());

    // Set user email
    Pushwoosh.setEmails(user.getEmailList());

    // Set user SMS number
    Pushwoosh.registerSMSNumber(user.getPhoneNumber());

    // Set user WhatsApp number
    Pushwoosh.registerWhatsappNumber(user.getWhatsAppNumber());

    // Setting additional user information as tags for Pushwoosh
    Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

Tags

Tags sind Schlüssel-Wert-Paare, die Benutzern oder Geräten zugewiesen werden und eine Segmentierung basierend auf Attributen wie Vorlieben oder Verhalten ermöglichen, was gezielte Nachrichtenübermittlung ermöglicht.

import Pushwoosh from 'pushwoosh-react-native-plugin';

class UpdateUser {
  afterUserUpdateProfile(user: User) {

    // Set list of favorite categories
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Set payment information
    Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

Events

Events sind spezifische Benutzeraktionen oder Vorkommnisse innerhalb der App, die verfolgt werden können, um das Verhalten zu analysieren und entsprechende Nachrichten oder Aktionen auszulösen.

import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {

  // Track login event
  afterUserLogin(user: User) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Track purchase event
  afterUserPurchase(product: Product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

Fehlerbehebung

Sollten während des Integrationsprozesses Probleme auftreten, lesen Sie bitte den Abschnitt Support und Community.