Руководство по базовой интеграции React Native SDK

В этом разделе содержится информация о том, как интегрировать Wavesend React Native SDK в ваше приложение.

Предварительные требования

Для интеграции Wavesend React Native SDK в ваше приложение вам понадобится следующее:

Требования

• Учетная запись Wavesend.
• Проект Wavesend, настроенный в вашей учетной записи.
• Для интеграции с iOS:
  • Платформа iOS, настроенная для отправки push-уведомлений. Мы рекомендуем использовать конфигурацию на основе токенов как наиболее простой подход.
  • Установите шлюз (Gateway) в режим Sandbox для отправки push-уведомлений в симулятор.
• Для интеграции с Android:
  • Настроенная платформа Android
  • project number (также известный как Sender ID), файл google-services.json и package name из вашего проекта Firebase.
  • Проект Firebase, подключенный к вашему приложению Android. При необходимости следуйте руководству по настройке Firebase.
• Ваш Application Code и Device API Token из Панели управления Wavesend для вашего приложения.

Шаги интеграции

1. Добавление зависимости Wavesend React Native SDK

Добавьте зависимость Wavesend React Native SDK в ваш проект:

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

2. Инициализация React Native SDK

В корневом компоненте вашего файла index.js:

• Импортируйте pushwoosh-react-native-plugin.
• Инициализируйте Wavesend SDK.
• Вызовите register() в вашей логике инициализации, чтобы зарегистрироваться для получения push-уведомлений.

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

Где:

• __YOUR_APP_ID__ — это Application Code из Панели управления Wavesend.
• __YOUR_FCM_SENDER_ID__ — это номер проекта Firebase из Firebase Console.

3. Нативная настройка для iOS

3.1 Capabilities

Чтобы включить Push-уведомления в вашем проекте, необходимо добавить определенные capabilities (возможности).

В разделе Signing & Capabilities добавьте следующие capabilities:

• Push Notifications
• Background Modes. После добавления этой возможности отметьте галочкой Remote notifications.

Если вы планируете использовать Time Sensitive Notifications (iOS 15+), добавьте также capability Time Sensitive Notifications.

3.2 Info.plist

В вашем файле Runner/Info.plist установите для ключа __PUSHWOOSH_DEVICE_API_TOKEN__ значение вашего Device API Token от Wavesend:

info.plist

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

3.3 Отслеживание доставки сообщений

Вы должны добавить таргет Notification Service Extension в ваш проект. Это необходимо для точного отслеживания доставки и использования таких функций, как Rich Media на iOS.

Следуйте шагам из руководства по нативной интеграции, чтобы добавить таргет расширения и необходимый код Wavesend в него.

3.4 Установка зависимостей для проекта iOS React Native

Чтобы установить зависимости для проекта iOS React Native, перейдите в папку ios в терминале и выполните:

pod install --repo-update

4. Нативная настройка для Android

4.1 Установка зависимостей

Убедитесь, что необходимые зависимости и плагины добавлены в ваши скрипты Gradle:

Добавьте плагин Google Services для Gradle в зависимости вашего файла build.gradle на уровне проекта:

android/build.gradle

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

Примените плагин в вашем файле build.gradle на уровне приложения:

app/build.gradle

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

4.2 Добавление конфигурационного файла Firebase

Поместите файл google-services.json в папку android/app в директории вашего проекта.

4.3 Добавление метаданных Wavesend

В вашем файле main/AndroidManifest.xml добавьте Device API Token от Wavesend внутри тега <application>:

AndroidManifest.xml

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

Важно: Убедитесь, что токену предоставлен доступ к нужному приложению в Панели управления Wavesend. Подробнее

5. Запуск проекта

1. Соберите и запустите проект.
2. Перейдите в Панель управления Wavesend и отправьте push-уведомление.
3. Вы должны увидеть уведомление в приложении.

Расширенная интеграция

На этом этапе вы уже интегрировали SDK и можете отправлять и получать push-уведомления. Теперь давайте рассмотрим основную функциональность.

Слушатели событий push-уведомлений

В Wavesend SDK есть два слушателя событий, предназначенных для обработки push-уведомлений:

• событие pushReceived срабатывает при получении push-уведомления
• событие pushOpened срабатывает, когда пользователь открывает уведомление

Вы должны настроить эти слушатели событий сразу после инициализации SDK при запуске приложения:

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

  }
}

Конфигурация пользователя

Фокусируясь на индивидуальном поведении и предпочтениях пользователей, вы можете доставлять персонализированный контент, что приведет к повышению удовлетворенности и лояльности пользователей.

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

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

Tags

Tags — это пары «ключ-значение», присваиваемые пользователям или устройствам, что позволяет сегментировать их по таким атрибутам, как предпочтения или поведение, и отправлять таргетированные сообщения.

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 — это конкретные действия пользователя или события в приложении, которые можно отслеживать для анализа поведения и запуска соответствующих сообщений или действий.

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

Troubleshooting

Если у вас возникнут какие-либо проблемы в процессе интеграции, пожалуйста, обратитесь к разделу поддержки и сообщества.