Guide d'intégration de base du SDK React Native

Cette section contient des informations sur la manière d’intégrer le SDK React Native de Pushwoosh dans votre application.

Pour intégrer le SDK React Native de Pushwoosh dans votre application, vous aurez besoin des éléments suivants :

Ajoutez la dépendance du SDK React Native de Pushwoosh à votre projet :

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

Dans le composant racine de votre fichier index.js :

• Importez le pushwoosh-react-native-plugin.
• Initialisez le SDK Pushwoosh.
• Appelez register() dans votre logique d’initialisation pour vous enregistrer aux notifications push.

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();

Où :

• __YOUR_APP_ID__ est le code d’application (application code) depuis le Control Panel de Pushwoosh.
• __YOUR_FCM_SENDER_ID__ est le numéro de projet Firebase depuis la console Firebase.

Pour activer les notifications push dans votre projet, vous devez ajouter certaines capacités.

Dans la section Signing & Capabilities, ajoutez les capacités suivantes :

• Push Notifications
• Background Modes. Après avoir ajouté cette capacité, cochez la case Remote notifications.

Si vous prévoyez d’utiliser les notifications urgentes (Time Sensitive Notifications) (iOS 15+), ajoutez également la capacité Time Sensitive Notifications.

Dans votre fichier Runner/Info.plist, définissez la clé __PUSHWOOSH_DEVICE_API_TOKEN__ sur le Jeton d’API de l’appareil (Device API Token) Pushwoosh :

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

Vous devez ajouter une cible d’extension de service de notification (Notification Service Extension) à votre projet. C’est essentiel pour un suivi précis de la livraison et pour des fonctionnalités comme les Rich Media sur iOS.

Suivez les étapes du guide natif pour ajouter la cible d’extension et le code Pushwoosh nécessaire à l’intérieur.

Pour installer les dépendances du projet iOS React Native, naviguez vers le dossier ios dans le terminal et exécutez :

pod install --repo-update

Assurez-vous que les dépendances et les plugins requis sont ajoutés à vos scripts Gradle :

Ajoutez le plugin Gradle des services Google (Google Services Gradle plugin) aux dépendances de votre fichier build.gradle au niveau du projet :

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

Appliquez le plugin dans votre fichier build.gradle au niveau de l’application :

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

Placez le fichier google-services.json dans le dossier android/app de votre répertoire de projet.

Dans votre fichier main/AndroidManifest.xml, ajoutez le Jeton d’API de l’appareil (Device API Token) Pushwoosh à l’intérieur de la balise <application> :

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

Important : Assurez-vous de donner au jeton l’accès à la bonne application dans votre Control Panel Pushwoosh. En savoir plus

1. Compilez et exécutez le projet.
2. Allez dans le Control Panel de Pushwoosh et envoyez une notification push.
3. Vous devriez voir la notification dans l’application.

À ce stade, vous avez déjà intégré le SDK et pouvez envoyer et recevoir des notifications push. Explorons maintenant les fonctionnalités de base.

Dans le SDK Pushwoosh, il existe deux écouteurs d’événements (event listeners), conçus pour gérer les notifications push :

• L’événement pushReceived est déclenché lorsqu’une notification push est reçue
• L’événement pushOpened est déclenché lorsqu’un utilisateur ouvre une notification

Vous devriez configurer ces écouteurs d’événements juste après l’initialisation du SDK, au démarrage de l’application :

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));
    });

  }
}

En vous concentrant sur le comportement et les préférences individuels de l’utilisateur, vous pouvez fournir un contenu personnalisé, ce qui conduit à une satisfaction et une fidélité accrues de l’utilisateur.

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

class Registration {
  afterUserLogin(user: User) {

    // Définir l'ID utilisateur
    Pushwoosh.setUserId(user.getId());

    // Définir l'e-mail de l'utilisateur
    Pushwoosh.setEmails(user.getEmailList());

    // Définir des informations utilisateur supplémentaires en tant que tags pour Pushwoosh
    Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

Les tags sont des paires clé-valeur assignées aux utilisateurs ou aux appareils, permettant une segmentation basée sur des attributs tels que les préférences ou le comportement, ce qui rend possible la messagerie ciblée.

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

class UpdateUser {
  afterUserUpdateProfile(user: User) {

    // Définir la liste des catégories favorites
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Définir les informations de paiement
    Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

Les événements (Events) sont des actions spécifiques de l’utilisateur ou des occurrences au sein de l’application qui peuvent être suivies pour analyser le comportement et déclencher des messages ou des actions correspondantes.

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

class Registration {

  // Suivre l'événement de connexion
  afterUserLogin(user: User) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Suivre l'événement d'achat
  afterUserPurchase(product: Product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

Si vous rencontrez des problèmes pendant le processus d’intégration, veuillez vous référer à la section support et communauté.