Initialization

This guide provides detailed instructions on how to properly initialize and integrate the Tyrads SDK into your React Native application.

Table of Contents

1. Overview

2. Initialization Timing

3. The Tyrads.init Method

4. Data Structures

5. User Authentication

6. Displaying Offers

7. iOS Launch Modes

8. Deeplinking & Routing

---

Overview

Tyrads SDK introduces a more modular approach to offerwall integration, including native React components and enhanced data tracking capabilities. To ensure optimal user experience and accurate attribution, please follow the initialization patterns described below.

Initialization Timing

Initialize After Media Source or MMP Initialization

Please initialize our SDK only after the media source or MMP data is initialized. This ensures that the media source data is sent correctly and prevents passing empty values.

MMP & Media Source Dependency

CRITICAL: It is highly recommended to initialize the Tyrads SDK only after your Mobile Measurement Partner (MMP) or internal media source data has been fully resolved.

Initializing the SDK with valid media source data ensures:

• Accurate Attribution: Users are correctly mapped to their acquisition sources.

• Customized Rewards: The earning journey can be tailored based on the user's entry point.

• Better Analytics: Provides clearer feedback on the quality of users from different segments.

---

The Tyrads.init Method

The init method is the entry point for the SDK. In v4, several optional parameters have been added to provide more context about the user and the session.

await Tyrads.init(
  apiKey: string,
  apiSecret: string,
  encKey?: string,
  engagementId?: string,
  placementId?: string,
  mediaSourceInfo?: TyradsMediaSourceInfo,
  userInfo?: TyradsUserInfo,
  config?: TyradsConfig
);

Parameter Details

Parameter	Type	Required	Description
apiKey	string	Yes	Your unique Tyrads API Key.
apiSecret	string	Yes	Your unique Tyrads API Secret.
encKey	string	No	Encryption Key. Used for encrypting data transmitted from the SDK. If omitted, data is sent in plain text.
engagementId	string	No	A unique identifier for tracking specific user engagement campaigns.
placementId	string	No	Used to differentiate between different coins and use as per your selection within your app.
mediaSourceInfo	TyradsMediaSourceInfo	No	Detailed attribution data (see Data Structures).
userInfo	TyradsUserInfo	No	Additional user metadata like email or user group.
config	TyradsConfig	No	Android Only: SDK behavioral configuration such as skipInitialPages to bypass privacy/permission screens. .

---

Data Structures

TyradsMediaSourceInfo

Used to provide the SDK with information about the user's acquisition source.

export interface TyradsMediaSourceInfo {
  mediaSourceName?: string;    // (e.g. "Facebook", "Google")
  mediaCampaignName?: string;  // e.g., "Summer_Sale_2024"
  mediaSourceId?: string;      // Unique ID from the source
  mediaSubSourceId?: string;   // Sub-identifier for the source
  incentivized?: boolean;      // Whether the traffic is incentivized
  mediaAdsetName?: string;
  mediaAdsetId?: string;
  mediaCreativeName?: string;
  mediaCreativeId?: string;
  sub1?: string;               // Custom tracking parameters (sub1 - sub5)
  sub2?: string;
  sub3?: string;
  sub4?: string;
  sub5?: string;
}

TyradsUserInfo

Provides basic demographic or segment data for the user.

export interface TyradsUserInfo {
  email?: string;
  phoneNumber?: string;
  userGroup?: string;          // e.g., "premium", "freetier"
  age?: number;                // User age
  gender?: number;             // 1 for Male, 2 for Female
}

---

User Authentication

After initialization, you must identify the user before showing offers.

// This ID should be unique to the user in your system
await Tyrads.loginUser('unique_user_id_123');

---

Displaying Offers

You can display the full offerwall or use native components.

Full Offerwall (Modal/Browser)

await Tyrads.showOffers();

Native Premium Widget

Render premium offers directly inside your React components for a more native feel.

import { PremiumOffersWidget, PremiumOffersWidgetLoading, PremiumWidgetStyles  } from '@tyrads.com/tyrads-sdk';

const MyComponent = () => (
  <View>
    <PremiumOffersWidget widgetStyle={PremiumWidgetStyles.list} />
  </View>
);

The PremiumWidgetStyles enum allows you to choose between two distinct layouts:

Style	Description
PremiumWidgetStyles.list	Renders offers in a vertical list format (Best for dedicated offer screens).
PremiumWidgetStyles.sliderCards	Renders offers in a horizontal swipeable carousel (Best for home screens or small spaces).

sliderCards

list

---

iOS Launch Modes

On iOS, you can control how the offerwall is presented to comply with Apple's policies.

Mode	Value	Behavior
External	3	Opens the Offerwall in Safari (Default).
Embedded	2	Opens the Offerwall in an embedded WKWebView.

// Open in embedded view
await Tyrads.showOffers({ launchMode: 2 });

---

Deeplinking & Routing

The SDK supports routing users directly to specific sections of the offerwall.

Route	Description	Requires campaignID?
offers	Main campaigns list	No
active-offers	List of user's active campaigns	No
offers	Details for a specific campaign	Yes
support	Support tickets for a specific campaign	Yes

Example Usage:

// Open details for a specific campaign
await Tyrads.showOffers({ 
  route: "offers", 
  campaignID: "your_campaign_id" 
});