ข้ามไปยังเนื้อหา
คู่มือผู้ใช้ การสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

คู่มือการผสานรวมพื้นฐาน React Native SDK

ส่วนนี้มีข้อมูลเกี่ยวกับวิธีผสานรวม Pushwoosh React Native SDK เข้ากับแอปพลิเคชันของคุณ

ข้อกำหนดเบื้องต้น

Anchor link to

ในการผสานรวม Pushwoosh React Native SDK เข้ากับแอปของคุณ คุณจะต้องมีสิ่งต่อไปนี้:

ขั้นตอนการผสานรวม

Anchor link to

1. เพิ่ม Dependency ของ Pushwoosh React Native SDK

Anchor link to

เพิ่ม dependency ของ Pushwoosh React Native SDK ไปยังโปรเจกต์ของคุณ:

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

2. การเริ่มต้น React Native SDK

Anchor link to

ใน root component ของไฟล์ index.js ของคุณ:

  • นำเข้า pushwoosh-react-native-plugin
  • เริ่มต้น Pushwoosh SDK
  • เรียกใช้ register() ในตรรกะการเริ่มต้นของคุณเพื่อลงทะเบียนสำหรับ push notification
index.js
import Pushwoosh from 'pushwoosh-react-native-plugin';


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


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


Pushwoosh.register();

โดยที่:

  • __YOUR_APP_ID__ คือ application code จาก Pushwoosh Control Panel

3. การตั้งค่า iOS Native

Anchor link to

3.1 Capabilities

Anchor link to

ในการเปิดใช้งาน Push Notifications ในโปรเจกต์ของคุณ คุณต้องเพิ่ม capabilities บางอย่าง

ในส่วน Signing & Capabilities ให้เพิ่ม capabilities ต่อไปนี้:

  • Push Notifications
  • Background Modes หลังจากเพิ่ม capability นี้แล้ว ให้เลือกช่องสำหรับ Remote notifications

หากคุณต้องการใช้ Time Sensitive Notifications (iOS 15+) ให้เพิ่ม capability Time Sensitive Notifications ด้วย

3.2 Info.plist

Anchor link to

ใน Runner/Info.plist ของคุณ ให้ตั้งค่าคีย์ __PUSHWOOSH_DEVICE_API_TOKEN__ เป็น Pushwoosh Device API Token:

info.plist
<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

3.3 การติดตามการส่งข้อความ

Anchor link to

คุณต้องเพิ่ม target Notification Service Extension ไปยังโปรเจกต์ของคุณ นี่เป็นสิ่งสำคัญสำหรับการติดตามการส่งที่แม่นยำและฟีเจอร์ต่างๆ เช่น Rich Media บน iOS

ทำตาม ขั้นตอนในคู่มือ native เพื่อเพิ่ม extension target และโค้ด Pushwoosh ที่จำเป็นภายในนั้น

3.4 การติดตั้ง dependencies สำหรับโปรเจกต์ iOS React Native

Anchor link to

ในการติดตั้ง dependencies สำหรับโปรเจกต์ iOS React Native ให้ไปที่โฟลเดอร์ ios ใน terminal และรัน:

Terminal window
pod install --repo-update

4. การตั้งค่า Android Native

Anchor link to

4.1 ติดตั้ง dependencies

Anchor link to

ตรวจสอบให้แน่ใจว่าได้เพิ่ม dependencies และ plugin ที่จำเป็นลงในสคริปต์ Gradle ของคุณแล้ว:

เพิ่ม Google Services Gradle plugin ไปยัง dependencies ของ build.gradle ระดับโปรเจกต์ของคุณ:

android/build.gradle
buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

ใช้ plugin ในไฟล์ build.gradle ระดับแอปของคุณ:

app/build.gradle
apply plugin: 'com.google.gms.google-services'

4.2 เพิ่มไฟล์กำหนดค่า Firebase

Anchor link to

วางไฟล์ google-services.json ลงในโฟลเดอร์ android/app ในไดเรกทอรีโปรเจกต์ของคุณ

4.3 เพิ่ม metadata ของ Pushwoosh

Anchor link to

ใน main/AndroidManifest.xml ของคุณ ให้เพิ่ม Pushwoosh Device API Token ภายในแท็ก <application>:

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

สำคัญ: ตรวจสอบให้แน่ใจว่าได้ให้ token เข้าถึงแอปที่ถูกต้องใน Pushwoosh Control Panel ของคุณ เรียนรู้เพิ่มเติม

5. รันโปรเจกต์

Anchor link to
  1. บิวด์และรันโปรเจกต์
  2. ไปที่ Pushwoosh Control Panel และ ส่ง push notification
  3. คุณควรเห็นการแจ้งเตือนในแอป

การผสานรวมเพิ่มเติม

Anchor link to

ณ จุดนี้ คุณได้ผสานรวม SDK แล้วและสามารถส่งและรับ push notification ได้ ตอนนี้เรามาดูฟังก์ชันการทำงานหลักกัน

Event listeners สำหรับ Push notification

Anchor link to

ใน Pushwoosh SDK มี event listeners สองตัวที่ออกแบบมาเพื่อจัดการ push notification:

  • event pushReceived จะถูกทริกเกอร์เมื่อได้รับ push notification
  • event pushOpened จะถูกทริกเกอร์เมื่อผู้ใช้เปิดการแจ้งเตือน

คุณควรตั้งค่า event listeners เหล่านี้ทันทีหลังจากการเริ่มต้น 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));
    });


  }
}

การกำหนดค่าผู้ใช้

Anchor link to

ด้วยการมุ่งเน้นไปที่พฤติกรรมและความชอบของผู้ใช้แต่ละราย คุณสามารถส่งมอบเนื้อหาที่ปรับให้เหมาะกับแต่ละบุคคล ซึ่งนำไปสู่ความพึงพอใจและความภักดีของผู้ใช้ที่เพิ่มขึ้น

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 ID and email in a single call
    Pushwoosh.setUserEmails(user.getId(), 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

Anchor link to

Tags คือคู่ของ key-value ที่กำหนดให้กับผู้ใช้หรืออุปกรณ์ ช่วยให้สามารถแบ่งกลุ่มตามคุณลักษณะต่างๆ เช่น ความชอบหรือพฤติกรรม ทำให้สามารถส่งข้อความแบบกำหนดเป้าหมายได้

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

Anchor link to

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

การแก้ไขปัญหา

Anchor link to

หากคุณพบปัญหาใดๆ ในระหว่างกระบวนการผสานรวม โปรดดูที่ส่วน การสนับสนุนและชุมชน