@1flow-inc/react-native-1flow-sdk 中文文档教程

Question

About 1Flow

1Flow 是用于分析和获取用户反馈的工具。 1Flow 非常容易在您的项目中集成和使用。 从 1Flow Dashboard 阅读更多内容

Get started

在这里，您将了解如何在 React Native 跨平台应用程序上设置 1Flow 库。 为您的 React Native 应用程序设置 1Flow 很简单，您可以按照以下步骤完成。

Prerequisites

• NodeJS, v8.3 or ulterior
• React Native (react-native >= 0.60.0)
• For Android:
  • A device or emulator with Google Play services installed and up-to-date.
  • Android Studio.
• For iOS:
  • XCode
  • An iOS device such as an iPhone or an iPad

1. Add the SDK

如果您还没有创建您的 React Native 应用程序，请参阅官方 React Native 指南，然后点击 React Native CLI快速入门，了解更多详情。

添加 1Flow React Native SDK：

npm install @1flow-inc/react-native-1flow-sdk@1.0.6 --save

2. Setup

For iOS

• 导航到 ios 目录并安装 pod 将

  cd ios
  pod install
  

For Android

• 以下存储库包含到项目的 build.gradle 文件中：

  allprojects{ 
      repositories{ 
          google() 
          jcenter() 
          maven{url 'https://jitpack.io'} 
      } 
  }
  

• 将依赖项添加到应用程序的 build.gradle 文件中：

  defaultConfig { 
      .... 
      minSdkVersion 21 
  } 
  dependencies { 
      ....
      implementation "com.github.1Flow-Inc:1flow-android-sdk:0.6.27" 
  }
  

3. Configure

打开您的 React Native 应用程序 App.js 并在 componentDidMount() 中编写以下代码

    // Add this line to import 1Flow at the top of the file 
    import OneFlow from '@1flow-inc/react-native-1flow-sdk';

    componentDidMount() { 
        // Add this line to configure 1Flow
        OneFlow.configure( '<1flow_project_key>', true, // true if want to enable surveys otherwise false. ); 
    }

您需要将 1flow_project_key 替换为您自己的密钥，您可以从 1Flow dashboard / Settings → Project Settings: API keys 部分获取。

4. Log user (optional)

如果您的应用或网站不需要用户登录，那么您可以跳到第 4 步 - 记录事件。

如果您的应用需要用户注册账号并登录，您可以调用方法将用户与 1Flow 绑定。 这样，您就可以将数据与您的内部记录联系起来。

每当用户登录时，您都可以调用 OneFlow.logUser() 将用户标识符以及您希望与我们一起存储的任何其他参数传递给 1Flow。

    // import 1Flow SDK 
    import OneFlow from '@1flow-inc/react-native-1flow-sdk'; 
    // Call logUser method to bind user with us 
    await OneFlow.logUser('12345', 
        { firstName: 'steve', 
        lastName: 'jobs', 
        number: 123456, 
        });

userDetails 字典是可选的，因此如果没有要发送的其他信息，您可以只传入 nil。

5. Track events

事件是 1Flow 的核心。 事件是代码中的标记，用于跟踪用户流程中的关键时刻 - 例如用户刚刚创建帐户、完成某些操作、进行购买或拒绝报价时。 我们建议您至少跟踪 4-5 个事件，以便更好地了解用户旅程。

    // import 1Flow SDK 
    import OneFlow from '@1flow-inc/react-native-1flow-sdk'; 
    // Call logUser method to bind user with us 
    await OneFlow.recordEventName('product', { 
        'param1': 'value1', 
        'param2': 'value2', 
        });

在这里，参数是可选的。 如果您不希望任何参数随事件一起发送，请传递 null。

高级提示：事件可用于触发调查，如果您传入有关用户操作的相关信息（例如他们刚刚消费的内容的 ID、刚刚向他们展示的优惠名称等），那么您可以使用我们的webhooks，用有价值的背景丰富调查回复。

6. Check for success

构建并运行您的应用程序。 转到 1Flow 仪表板 - 如果实施成功，那么当我们从您的设备接收到数据时，此横幅应该会消失：

Show your first survey

现在您已经成功将 1Flow 集成到您的应用程序中，是时候创建您的第一个调查了。

如果您已经创建并发布了调查（调查显示在仪表板的“进行中”部分），请运行该应用并触发事件发生时，您应该会在事件触发时看到调查显示。

注意：如果您的应用或网站不需要用户登录，那么您可以跳到第 4 步 - 记录事件。