Skip to main content
Version: 3.x

React Native Survey Wall Preview

info

Notes on apps in test mode! If your app is in test mode, you MUST use a test user. These are defined in "Test Devices" on the dashboard.

Installation​

See latest versions at https://www.npmjs.com/package/react-native-tapresearch

Survey Wall Preview​

See here for general TapResearch SDK integration for React Native.

Before You Begin​

  • You must be on React Native 3.4.1 or higher to have access to Survey Wall Preview.
  • The preview feature needs to be enabled and set up by the TapResearch team so please reach out to your account manager when you are ready to get started
  • A new placement must be created that is separate from the standard Survey Wall
  • Profiler survey needs to be displayed first on its own if the user is new to TapResearch
    • The profiler may need to have a different design than the other survey wall preview tiles
      • This is especially true if there is no reward
    • It will say ‘profile’ in the survey identifier field in order to differentiate it
Support

Any other questions? Reach out to your account manager or via Slack and we'll be happy to help!

Import the TapResearchSDK components​

Note: TapSdkSurvey (below) is new for Survey Wall Preview

import {
  PlacementCustomParamsProps,
  TapSdkAdapter,
  TapSdkUI,
  TapUserAttributes,
  TapSdkReward,
  TapSdkSurvey,
} from 'react-native-tapresearch';

Survey Wall Preview Setup​

Determine if there are available surveys​

Anytime after the sdk has been initialized (onTapResearchSdkReady), you can check if there are available surveys for a given placement tag:

TapSdkAdapter.hasSurveysForPlacement("my-placement-tag");

It returns a boolean promise; true indicates that surveys are available, false otherwise.

It may look something like this (example in Typescript):

  const hasSurveysForPlacement = useCallback(() => {
    TapSdkAdapter.hasSurveysForPlacement('my-placement-tag')
      .then((result: boolean) => {
        console.log(
          `TapSdkAdapter.hasSurveysForPlacement() - Result: ${result}`
        );
      })
      .catch((error: any) => {
        console.error(error);
      });
  }, []);
  <Button
    onPress={hasSurveysForPlacement}
  >

Fetching Surveys​

To be able to render surveys, you first need to fetch them:

TapSdkAdapter.getSurveysForPlacement("my-placement-tag");

It returns the array: TapSdkSurvey[]

export type TapSdkSurvey = {
  survey_identifier: string;
  length_in_minutes: number;
  reward_amount: number;
  currency_name: string;
  is_sale: boolean;
  sale_end_date: string | null;
  sale_multiplier: number;
  pre_sale_reward_amount: number;
  is_hot_tile: boolean;
};

Listening for survey refresh events​

Define the Survey Wall Preview callback function with the following signature:​

Required: The SDK will call delegate functions to notify the app of certain events. For example, to let you know that surveys for a given placement tag have been updated and are ready to be rendered.

Note: onSurveysRefreshedForPlacement callback handler is required for Survey Wall Preview; the others are already covered in the general React Native integration documentation.

onSurveysRefreshedForPlacement: (placementTag: string) => void;
onDidReceiveRewards: (rewards: Array<TapSdkReward>) => void;
onDidReceiveError: (error: TapSdkError) => void;
onContentShown: (placementTag: string) => void;
onContentDismissed: (placementTag: string) => void;
onTapResearchSdkReady: () => void;
onDidReceiveQQResponse: (qqResponse: TRQQDataPayload) => void;

The onSurveysRefreshedForPlacement setup might look like this:

      onSurveysRefreshedForPlacement={async (placementTag) => {
        const surveys = await fetchSurveys(placementTag);   // see 'fetchSureys' below
        actions.setSurveys(surveys);  // example of updating your UI with the newly fetched surveys
      }}

Required: Make sure to render the TapSDK component with the previously defined callback as its properties:

<TapSdkUI
  onSurveysRefreshedForPlacement={onSurveysRefreshedForPlacement}
  onDidReceiveRewards={doRewards}
  onContentDismissed={contentDismissed}
  onContentShown={contentShown}
  onDidReceiveError={onError}
  onTapResearchSdkReady={onTapResearchSdkReady}
/>

Showing the Survey​

Once you have the array of TapSdkSurvey objects for a given placement tag, you can directly show an individual survey:

Note: The 2nd parameter is the survey identifier.

TapSdkAdapter.showSurveyForPlacement('my-placement-tag', survey.survey_identifier);