聪明的博览会插件

导 言

学习如何将 CleverTap SDK 集成到您的 Expo React Native 应用程序中 。 本指南解释了如何使用"博览会"插件来设置和配置CleverTap的特性.

要了解更多信息,请检查我们的 网站 财务报告和审定财务报表 文档。 。 。 .

要开始,就报名 这里。 。 。 .

* 概览

博览会(Expo)是一个围绕React Industrial构建的框架和平台,帮助您快速开发,构建并部署React Industrial应用程序. CleverTap 博览会插件提供了一个简化的方法,可以将 CleverTap React Independent SDK 整合到您的博览会应用中,而无需写入本地代码. 它使得在管理下的工作流程建设的建设前阶段能够定制化,从而不再需要排出一个赤裸的工作流程。 为 CliverTap 集成而专门定制的,这个插件通过自动生成并配置所需的本地代码文件来简化设置,以确保 CliverTap React Natural SDK 功能无缝. 将此插件视为执行所需本土配置的自动化方式,将您从手动写入平台专用代码中省去,用于CliverTap集成.

相容性矩阵

为确保CleverTap博览会插件的平稳整合,请参考以下相容性矩阵. 本表概述了支持的版本 CleverTap Expo插件, Expo SDK, React Introduct, 以及有效合作的 CleverTap React Introduct SDK.

++ 安装和整合

第1步:安装 CleverTap 反应原生 SDK

npm install clevertap-react-native

第2步:安装 CleverTap 博览会插件

npx expo install @clevertap/clevertap-expo-plugin

第3步: 将插件添加到您的 app.json 中

在你身边 app.json 文件,添加 CleverTap 博览会插件配置。 下面是一个示例配置,显示强制参数和可选参数,如果适用,则显示其默认值:

应用程序.json

{
  "expo" : {
    "plugins": [
      [
        "@clevertap/clevertap-expo-plugin",
        {
          "accountId": "WWW-AAA-BBBB",
          "accountToken": "AAA-BBB-CCCC",
          "accountRegion": "eu1",
          "disableAppLaunchedEvent": false,
          "logLevel": 0, 
          "encryptionLevel": 1, 
          "encryptionInTransit": true,
          "proxyDomain": "analytics.example.com", 
          "spikyProxyDomain": "spiky.example.com",
          "customIdentifiers": "Email,Phone", 
          "android": {
            "features": {
              "enablePush": true, 
              "enablePushTemplates": true, 
              "enableInApp": true, 
              "enableInbox": true, 
              "enableMediaForInAppsInbox": true, 
              "enableInstallReferrer": true, 
              "enableHmsPush": false, 
              "enableGoogleAdId": false,
              "enablePlayReview": true
            },
           "notificationIcon": "./assets/notification-icon.png",
           "customNotificationSound": ["notification_sound.mp3", "alert_tone.mp3","reminder. mp3"],
           "backgroundSync": "1", 
           "defaultNotificationChannelId": "default_channel", 
           "inAppExcludeActivities": "SplashActivity", 
           "sslPinning": "1", 
           "inAppFragmentlessBanners": false,
           "registerActivityLifecycleCallbacks": true 
          },
           "ios": {
            "mode": "development", //Mandatory
            "disableIDFV": true, //Optional, default: false
            "enableFileProtection": true, //Optional, default: false
            "enableURLDelegateChannels": [ 0, 1, 2 ], //Optional, default: null
            "notifications": {
              "enableRichMedia": true, 
              "enablePushImpression": true, 
              "enablePushTemplate": true, 
              "enablePushInForeground": true, 
              "iosPushAppGroup": "group.com.clevertap.expoDemo", 
              "notificationCategories": [
                {
                  "identifier": "CTNotification",
                  "actions": [ { "identifier": "action1",  "title": "title1" } ]
                }
              ] 
            }
          }
        }
      ]
    ]
  }
  }

第4步:配置您的应用程序.json

CleverTap 博览会插件支持多种配置选项来自定义您的集成:

核心配置选项

Android 特定配置

iOS 特定配置

第5步:额外的Android配置

在您的app.json文件中配置额外的Android特定设置 .

第5.1步:Android权限

为了确保 CleverTap 正常运行, 在您的 app.json 中添加所需的权限 :

{
  "expo": {
    "android": {
      "permissions": [
        "android.permission.ACCESS_NETWORK_STATE",
        "android.permission.INTERNET",
        "android.permission.POST_NOTIFICATIONS"
      ]
    }
  }
}

• 获取 网络 STATE: 允许智能Tap在尝试数据传输之前检查网络连接
• 互联网: CleverTap 需要从服务器发送和接收数据
• 后通知: Android 13+设备需要显示按压通知

步骤6: Push 通知的额外Android配置(可选)

在您的app.json中设置了基本配置后,您可能需要额外的针对平台的设置,以确保Android设备上的推器通知正常运行. 以下分步骤将引导您通过配置防火基地云密通信(FCM),花威移动服务(HMS)Push,以及自定义通知图标.

第6.1步:火地云通信(FCM)配置

对于Firebase Cloud Message on Android,将您的google-service.json文件放入资产文件夹并添加到您的app.json:

{
  "expo": {
    "android": {
      "googleServicesFile": "./assets/google-services.json"
    }
  }
}

步骤 6.2:华威信使服务 (HMS) Push配置

如果您通过设置启用了 HMS Push 支持 android.features.enableHmsPush 改为 true,将您的 agconnect-service.json 文件放入项目的资产文件夹。 agconnect-services.json不需要具体财产,只要确保放在资产文件夹中即可.

步骤 6.3: 自定义通知图标

配置您在 CleverTap 插件配置中的通知图标 android 节:

"android": {
  "notificationIcon": "./assets/notification-icon.png"
}

插件将图标复制到Android可绘图资源,并配置 CleverTap 来使用. 确保您的图标遵循Android的通知图标指南(透明上为白色,建议使用96x96像素).

博览会55+ 移徙: 这个 notification.icon 字段被删除 app.json 在 Expo SDK 55 中。 使用 android.notificationIcon 在插件配置中替换。 对于博览会53/54,遗产 notification.icon 字段仍然起到倒置的作用.

使用方式 expo-notifications数字 : 如果您还使用了 expo-notifications 带有图标配置的插件, CliverTap 插件会检测现有的可绘制并跳过副本. 不过,你还需要设置 android.notificationIcon 用于 CluverTap 在按下通知中引用图标.

步骤7:通知扩展附加iOS配置

步骤 7.1: 扩展启用时用于设置配置配置的附加iOS配置

在配置了您的 app.json 中的基本设置后, 如果您想要使用通知服务扩展或通知内容扩展, 您必须在 app.json 中添加额外的属性, 如下所示 。 确保您为每个扩展创建了相应的 App ID 和 提供配置 .

{
  "expo": {
   ….
    "extra": {
      "eas": {
        "projectId": “xxxx”,
        "build": {
          "experimental": {
            "ios": {
              "appExtensions": [
                {
                  "targetName": "NotificationService",
                  "bundleIdentifier": “xxxx”,
                  "entitlements": {
                    "com.apple.security.application-groups": [
                      "group.xxxx”
                    ]
                  }
                },
                {
                  "targetName": "NotificationContent",
                  "bundleIdentifier": “xxxx”,
                  "entitlements": {
                    "com.apple.security.application-groups": [
                      "group.xxxx”
                    ]
                  }
                }
              ]
            }
          }
        }
      }
    }
…
}

步骤 7.2: Push 印象的附加iOS配置(可选)

在配置了您 app.json 中的基本设置后,下一步是创建一个 App Group 标识符,以便在您的主要应用和通知服务扩展之间实现数据共享. 这个应用组将在建设前阶段被分配到主要目标和通知服务扩展目标. 关于App Group配置的详细步骤,请参见此(文档)[https://developer.apple.com/documentation/xcode/ 配置-app-groups (中文(简体) )[ [ ] [ ] ]. ].

"ios": {
...
  "notifications": {
    "enablePushImpression": true,
    "iosPushAppGroup": "group.com.clevertap.expoDemo"
  }
...
}

在您的应用程序中, 您需要保存配置数据, 如名称、 身份、 电子邮件和用户故障中的电话 。 我们的示例应用包括演示这一过程的样本代码. 所储存的剖面数据随后会被通知服务扩展(NSE)取回,以发送到CleverTap的服务器. 您可以在此找到更多细节: React Independent Push Notion – (iOS Push Impression) [https://developer.clevertap.com/docs/react-native-push- notification#push-impress-in-ios (英语)[ [ ] [ ] ]. ].

userDefaults.set("CTProfileName", 'testUserA1', "group.com.clevertap.expoDemo", (err, data) => {
  if (!err) console.log('Saved CTProfileName: testUserA1')
})
//remaining data
...

步骤8: 预建您的应用程序

运行以下命令以生成 CleverTap 博览会插件所需的本地文件 :

npx expo prebuild

使用 npx expo prebuild --clean 通过删除已有的本地目录,从头复制本地代码。 这对重大配置或本地代码的修改很有用,可以确保新的构建.

第9步:在应用程序中导入并使用 CleverTap React Native SDK API

const CleverTap = require('clevertap-react-native');

CleverTap.recordEvent('testEvent');

CleverTap.setLocation(34.15, -118.2);

步骤10:测试您的整合

校验您的 CleverTap 集成工作正常:

• 安装和运行您的应用程序
• 以测试用户配置调用 UserLogin 方法
• 记录一些测试事件
• 检查 CleverTap 仪表板,以确保用户简介和事件被跟踪
• 通过从 CleverTap 仪表板发送测试活动来测试推取通知

对Android的重要说明和建议

文件位置

• HMS 配置文件编号: agconnect-services.json 文件必须放在您的项目资产文件夹的根层,用于 HMS 推动集成以正确运行.
• 通知声音文件: 所有自定义通知声音文件必须放在项目资产文件夹的根层。 这些不能放在子目录中.
• 其他文件: 文件类 google-services.json 如果在应用程序.json配置中正确引用,则通知图标可以放置在资产文件夹中的子目录中.

Google 服务配置

• google-services.json 互联网档案馆的存檔,存档日期2013-12-02: 如果您启用 Firebase Cloud 消息系统, 此文件需要 android.features.enablePush = true) (中文(简体) ). 必须在您的项目资产文件夹中放置,并在 app.json 中使用 googleServicesFile 属性.
• 获取文件: 从您的 Firebase 控制台项目设置下载此文件 。 如果没有有效的配置,按下通知将无法正确工作 .
• 测试:集成后,从CleverTap仪表板上发送一个测试推力来验证适当的设置.

华威推车服务

• agconnection-services.json (英语): 如果您启用了Huawei Mobile Services推力, 则需要android.features.enableHmsPush = true) (中文(简体) ). 此文件必须放置在您的工程资产文件夹的根层 .
• 无明确参考资料: 与google-services.json不同,您不需要在app.json中引用此文件,但必须在资产文件夹中存在.
• AppGallery 连接: 从 Huawei AppGallery 连接控制台生成此文件, 用于您的应用程序 .

自定义通知声音

• 声音文件格式:使用.mp3,.wav,或.ogg文件作为通知声音.
• 资产放置: 将声音文件放入您资产文件夹的根层。 声音文件不支持子目录 .
• 频道注册: 在预建后, 您必须用您的自定义声音在应用程序代码中注册一个通知通道 :

  CleverTap.createNotificationChannel(
   "channel_id",
   "Channel Name",
   "Channel Description",
   5, 
   true, 
   "sound_file.mp3" 
  );
  

自定义通知图标

• 图标要求 : 您的通知图标应该是一个全白的 PNG , 具有透明的背景, 96x96 像素推荐 .

• 图标配置 : 设定 android.notificationIcon 在 CleverTap 插件配置中 :

  "android": {
    "notificationIcon": "./assets/notification-icon.png"
  }
  

• 博览会55+ 用户 : 这个 notification.icon 字段被删除 app.json 在 Expo SDK 55 中。 你个 必须 使用情况 android.notificationIcon 在插件配置中.

• Expo 53/54 用户 : 遗产 notification.icon 输入 app.json 不过我们建议迁移到 android.notificationIcon 用于前置兼容性.

特征依赖

• 按下模板 : 要使用推取模板, android.features.enablePush 还必须启用。 Push 模板为 不支持 通过自定义执行.

• 媒体支持 : 启用 android.features.enableMediaForInAppsInbox 用于应用信件和应用程序收件箱中的视频内容.

QQ 更改日志

参见 智能Tap 博览会插件更改日志。 。 。 .

QQ 样本应用程序

要看到一个回想原生博览会的应用 运行与智能Tap SDK,检查我们 gitHub 上的样本应用程序。 。 。 .

* 反馈

我们高度评价你们的反馈,以提高其稳定性和功能。 如果您遇到任何问题, 有建议, 或者想分享您与插件的经验, 请 :

1. 通过 GitHub 问题提交详细的错误报告
2. 包括复制任何问题的具体步骤
3. 共享您的环境细节( Expo 版本, React Index 版本, 设备信息)
4. 未来发布时您想看到的增强或特性建议

您的投入对于这个插件的成功至关重要,并将帮助我们为稳定的发布做准备.

帮助和问题?

如果有问题或担心,可以从"CleverTap Dashboard"中接触到"CleverTap"支援团队.