React Native Survey Wall Preview

Test Mode

If your app is in test mode, you must use a test user. Configure test users in "Test Devices" on the dashboard.

Installation

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

See here for general TapResearch SDK integration for React Native.

Before You Begin

• You must be on SDK v3.4.1+ to have access to Survey Wall Preview.
• The wall 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
• Survey wall preview should be on a dedicated placement, separate from the standard Survey Wall (if applicable)
• Always wait until the SDK is ready (via the onTapResearchSdkReady callback or by checking TapSdkAdapter.isReady()) before calling any survey wall preview interfaces

Support

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

Introduction

Survey wall preview allows you to provide users with available surveys, directly inside your app. Some benefits of this include:

• Custom UI — Create your own UI presentation with survey tiles/cards
• Direct survey access — Provide users with direct entry into surveys they choose

---

Key Considerations & UI Design

When designing your survey tiles/cards, consider these elements:

1. The Profile Survey

New users must complete the introductory profile survey before they can access other surveys. For these new users, the SDK will return only this survey until they have completed it.

• Only shown to users that are new to TapResearch
• Will always be returned by itself, with survey_identifier: 'profile'
• Display example:

2. Survey Details

After completing the profile survey, users should then start receiving real surveys. Surveys will have the following attributes:

type TapSdkSurvey = {
  // Primary attributes
  survey_identifier:      string;        // Unique identifier, will be used when a user taps on a survey
  length_in_minutes:      number;        // The estimated time to complete the survey
  reward_amount:          number;        // The reward amount for taking the survey
  currency_name:          string;        // The name of the reward currency
  is_hot_tile:            boolean;       // Whether the survey should be designated as a "hot tile"

  // Sale attributes
  is_sale:                boolean;       // Whether a currency sale is currently active
  sale_end_date:          string | null; // If a sale is active, the UTC date it will end
  sale_multiplier:        number;        // The multiplier being applied to the sale
  pre_sale_reward_amount: number;        // The pre-multiplier reward amount, for enhancing UI during a sale
}

• We recommend displaying all primary data points to allow users to choose which survey length/reward they want
• Display example:

3. "Hot" Tiles

Hot tiles are surveys with exceptional scores, typically offering the best time-to-reward ratio. Displaying a special UI highlight for these surveys is recommended, as they tend to increase user engagement and click-through rates.

• Display example:

4. Currency Sales

When running promotional currency sales, the relevant sale attributes of the survey object will populate, allowing you to show enhanced UIs and CTAs to users. We recommend using this data to display the extra rewards boost on the individual tiles.

• Display example:

---

Integration

Importing SDK Components

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

---

hasSurveysForPlacement

Once the SDK is ready (onTapResearchSdkReady callback received), you can check if there are available surveys for a given placement tag:

/**
 *  hasSurveysForPlacement(placementTag: string): Promise<boolean>
 */
const hasSurveys = await TapSdkAdapter.hasSurveysForPlacement('wall-preview-placement');

---

getSurveysForPlacement

Returns the available surveys for the placement, if any.

/**
 *  getSurveysForPlacement(placementTag: string): Promise<TapSdkSurvey[] | null>
 */
const surveys = await TapSdkAdapter.getSurveysForPlacement('wall-preview-placement');

---

onSurveysRefreshedForPlacement

The SDK uses callback functions to notify apps of important events. In React Native, these callbacks are passed as props through the <TapSdkUI> component.

Required: When a placement refreshes with new surveys, onSurveysRefreshedForPlacement will be triggered so you can update your native UI. Configuring this callback properly is critical to ensuring users have up to date survey information and a good user experience, as survey inventory/availability is constantly changing.

SDK Callback Signatures

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:

const onSurveysRefreshed = useCallback(async (placementTag: string) => {
  try {
    const newSurveys = await TapSdkAdapter.getSurveysForPlacement(placementTag);
    actions.setSurveys(newSurveys ?? []);  // update UI with new surveys
  } catch {}
}, []);

// .. etc

return (
  <TapSdkUI
    onSurveysRefreshedForPlacement={onSurveysRefreshed}
    // other callbacks
  />
)

---

showSurveyForPlacement

When a user taps on a survey tile, you will call showSurveyForPlacement using the appropriate placement tag and survey_identifier for that tile. The user will then be brought directly into the survey.

/**
 *  showSurveyForPlacement(placementTag: string, surveyId: string): void
 */

const onTilePress = (surveyId: string) => {
  TapSdkAdapter.showSurveyForPlacement('wall-preview-placement', surveyId);
};

return (
  <SurveyTile onPress={() => onTilePress(survey.survey_identifier)} />
)