@thanksjs/react-native-webview

Thanks JS react native adapter

ThanksJS React-Native | ThanksJS React | ThanksJS Web | Integration Examples

Documentation for RN Adapter

Installation

yarn add @thanksjs/react-native-webview

Usage

import { ThanksWidget } from '@thanksjs/react-native-webview';

/// somewhere in your code
<ThanksWidget partnerId="{your partner id}" />;

It's all comes with TypeScript support, dont worry.

Parameters

Refer to the full Thanks API configuration documentation for more.

Advanced usage

The important parts are:

• providing a customer email. Strictly sha256 hash will be transferred during the widget lifecycle. No sensitive information leaves your application without your permission.
• giving permission to send Personal Information to improve efficiency of communications
  • subject and info can be used to decide what information to send
    • subject can be notification or autofill of visible UI elements
  • info.token is a unique identifier for the request and can be used to trace PII flow further in our systems
• keywords, category and items are used to fine-tune ads to display

Example

<ThanksWidget
  partnerId="{your partner id}"
  // information for the first scren
  statusText="Your order has been confirmed"
  emailHash={{ sha256: customersEmailHash }}
  // or
  email={customerEmail}
  onPersonalInformationRequest={(subject, info) => {
    return {
      email,
      firstName: 'TestUser',
    };
  }}
  onDisplay={() => {
    console.log('widget displayed');
  }}
  onClose={() => {
    console.log('widget closed');
  }}
  keywords={['violet', 'roses', 'blueberry']}
  items={[
    {
      name: 'Flatwhite',
      value: 4.0,
      currency: 'AUD',
      quantity: 2,
      type: 'coffee',
      category: 'drinks',
      subcategory: 'australian-coffee',
    },
  ]}
  categories={['lifestyle']}
/>

Indirect usage

Sometimes an event-based solution is easier to manage, in thie case we handle some state management for you.

import { ThanksWidgetController, thanksWidget } from '@thanksjs/react-native-webview';

const YourApplication = () => (
  <>
    {someCode}
    // put AFTER all other views, so it will be displayed on top
    <ThanksWidgetController partnerId="your-id" />
  </>
);

const YourThanksPage = () => {
  useEffect(
    () => {
      // ThanksWidgetController will render Widget instantly
      // if ThanksWidgetController is not present this will throw an error
      thanksWidget.open(thanksConfiguration);

      // and hide when you navigate away from the page
      return () => thanksWidget.close();
    },
    [
      // important to keep dependencies free to prevent re-rendering widget
      // as customer's journey will be reset
    ],
  );

  return pageCode;
};

Adding a Block

A Block is a permanently embedded element in your application interface.

If you prefer to embed a ThanksBlock into your application, you can following the example below:

import { ThanksBlock } from '@thanksjs/react-native-webview';

/// somewhere in your code
<View style={{ width, height }}>
  <ThanksBlock partnerId="YOUR_PARTNER_ID" />
</View>;

In the above example, we wrap the ThanksBlock to set its height and width.

Managing Personal Information

By default, Thanks Widget does not send any personal information. The email specified in configuration is always converted into sha256 emailHash before being sent to server. All other extended information provided is used only to improve the efficiency of the widget and is not stored unless user performs an action. In such case the information will kept until the action is settled, but no longer than 60 days.

However, there are situations when we need Partner to provide Personal Information:

• to improve our communications and send email notification to the user following their actions
• prefill a form with user's data to ease their interactions

In both case we are going to call onPersonalInformationRequest function with subject and info arguments. Depending on request you may decide to return some information, or return nothing.

onPersonalInformationRequest: (subject: 'notification' | 'autofill', info) => {
  return {
    email,
    firstName: 'TestUser',
  };
};

• subject of type notification will be used to send email notification to the user about the action just taken, for example coupon code they just claimed
• subject of type autofill will be used to prefill a form with user's data, making the subscription process friction less

In case of onPersonalInformationRequest is not defined, but email is provided as a part of configuraiton - nothing will happen. The process of capturing PII information is always in the Partners hands.

💡It's not always known upfront if PII is required, so onPersonalInformationRequest will be called more often than PII information is being "consumed". In case it was not required, the information will be discarded.

Using PII information for Promotions

While not every Ad requires PII, some Ads can have a "Promotion" attached to them, for example "Subscribe to XYZ newsletter to enter the draw". In case of user action PII information might not be used by a particular Ad, but will be used by Promotion to keep track of participation. The information will be redacted after the Promotion ends.

Dealing with 'RNCWebView' could not be found

In this package, we use react-native-webview to embed our Widget within your application. Although this package already depends on react-native-webview, you may still encounter issues relating to this dependency.

Since react-native-webview is a native module, you'll need to ensure react-native-webview is properly linked as a native module. For the following examples, we'll assume you use Expo. If you don't use Expo, you can apply the same steps to your workflow.

Option 1: Install react-native-webview

Step 1: Install react-native-webview

npm install react-native-webview

Step 2: Re-run the Prebuild Command

Now, run the prebuild command again:

expo prebuild

Step 3: Run the Custom Development Client

Follow the previous steps to build your custom development client:

expo run:ios

OR

expo run:android

By doing this, we force Expo to add Expo Modules to the iOS Podfile (and build.gradle for Android)

Option 2: Manually install react-native-webview

If you do not want to add another dependency to your project, we recommend you manually link the native modules to your Native app's output.

Step 1: Add react-native-webview to your Podfile.

target 'YourProjectName' do
  # ... (other existing pods)

  pod 'react-native-webview', :path => '../node_modules/react-native-webview'
end

Step 2: Clean the project and reinstall the pods

npx expo prebuild --clean
cd ios && pod install && cd ..

Step 3: Fun the development client

npx expo run:ios

License

MIT