react-native-insider

React Native Insider SDK

Official React Native SDK for Insider - A single platform for building individualized, cross-channel customer experiences.

Features

• User Management - Comprehensive user profile management with custom attributes
• Event Tracking - Track custom events with flexible parameters
• E-commerce - Product tracking, cart management, purchase events, and wishlist
• Smart Recommendations - AI-powered personalized product recommendations
• Message Center - In-app messaging and notification management
• Content Optimizer - A/B testing and dynamic content optimization
• Push Notifications - Rich push notifications with deep linking support
• In-App Messages - Native in-app messaging with callback handlers
• Geofencing - Location-based targeting and triggers
• GDPR Compliance - Built-in consent management and privacy controls
• TypeScript Support - Full TypeScript definitions included

Installation

With npm:

npm install react-native-insider

With yarn:

yarn add react-native-insider

iOS

• Install CocoaPods dependencies:

cd ios && pod install && cd ..

• In your Xcode project, enable the following capabilities under Signing & Capabilities:

  • Push Notifications (if you are using InsiderMobileAdvancedNotification SDK)
  • Location (Always and WhenInUse) (if you are using InsiderGeofence SDK)
  • Background Modes: Remote notifications and Location updates

• For rich push notifications, add Notification Service Extension and Notification Content Extension targets to your iOS project. Add the following to your Podfile:

target 'YourNotificationService' do
  use_frameworks!
  pod "InsiderMobileAdvancedNotification"
end

target 'YourNotificationContent' do
  use_frameworks!
  pod "InsiderMobileAdvancedNotification"
end

Android Setup

• Add the Insider Maven repository to your project-level android/build.gradle:

allprojects {
    repositories {
        maven { url 'https://mobilesdk.useinsider.com/android' }
    }
}

• Add Google Services to your project-level android/build.gradle:

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.4.4'
    }
}

• In your app-level android/app/build.gradle, add your partner name:

android {
    defaultConfig {
        manifestPlaceholders = [partner: 'your_partner_name']
    }
}

• If android:allowBackup="false" exists in your AndroidManifest.xml, remove it to allow Insider SDK to function properly.

Quick Start

import React, { useEffect } from 'react';
import Insider from 'react-native-insider';
import InsiderCallbackType from 'react-native-insider/src/InsiderCallbackType';

function App() {
  useEffect(() => {
    // Initialize the SDK
    Insider.init(
      'your_partner_name',
      'group.com.your.app', // iOS App Group ID
      (type, data) => {
        // Handle SDK callbacks
        switch(type) {
          case InsiderCallbackType.NOTIFICATION_OPEN:
            console.log('Notification opened:', data);
            break;
          case InsiderCallbackType.INAPP_BUTTON_CLICK:
            console.log('In-app button clicked:', data);
            break;
          case InsiderCallbackType.SESSION_STARTED:
            console.log('Session started');
            break;
        }
      }
    );

    // iOS-specific configurations
    Insider.registerWithQuietPermission(false);
    Insider.setActiveForegroundPushView();

    // Enable data collection
    Insider.enableIDFACollection(true);
    Insider.enableLocationCollection(true);

    // Start geofencing
    Insider.startTrackingGeofence();
  }, []);

  return <YourApp />;
}

API Reference

Initialization

init(partnerName, appGroup, callback)

Initialize the Insider SDK with your partner name and callback handler.

Insider.init(
  'your_partner_name',
  'group.com.your.app', // iOS App Group ID
  (type, data) => {
    // Handle callbacks
  }
);

Parameters:

• partnerName (string): Your Insider partner name
• appGroup (string): iOS App Group ID (e.g., 'group.com.your.app')
• callback (function): Callback function to handle SDK events

initWithCustomEndpoint(partnerName, appGroup, endpoint, callback)

Initialize with a custom API endpoint for enterprise customers.

Insider.initWithCustomEndpoint(
  'your_partner_name',
  'group.com.your.app',
  'https://your-custom-endpoint.com',
  (type, data) => {
    // Handle callbacks
  }
);

User Management

Get Current User

const user = Insider.getCurrentUser();

User Attributes

import InsiderGender from 'react-native-insider/src/InsiderGender';

user
  .setName('John')
  .setSurname('Doe')
  .setAge(30)
  .setGender(InsiderGender.Male) // Male: 0, Female: 1, Other: 2
  .setBirthday(new Date('1990-01-01'))
  .setEmail('[e-mail]')
  .setPhoneNumber('[phone]')
  .setLanguage('en')
  .setLocale('en_US');

Marketing Preferences

user
  .setEmailOptin(true)
  .setSMSOptin(true)
  .setPushOptin(true)
  .setWhatsappOptin(true)
  .setLocationOptin(true);

Custom Attributes

user
  .setCustomAttributeWithString('membership_level', 'gold')
  .setCustomAttributeWithInt('loyalty_points', 1500)
  .setCustomAttributeWithDouble('account_balance', 99.99)
  .setCustomAttributeWithBoolean('is_premium', true)
  .setCustomAttributeWithDate('last_purchase', new Date())
  .setCustomAttributeWithArray('interests', ['sports', 'technology']);

// Remove a custom attribute
user.unsetCustomAttribute('membership_level');

Login/Logout

import InsiderIdentifier from 'react-native-insider/src/InsiderIdentifier';

// Login with identifiers
const identifiers = new InsiderIdentifier()
  .addEmail('[e-mail]')
  .addPhoneNumber('[phone]')
  .addUserID('user123')
  .addCustomIdentifier('custom_key', 'custom_value');

user.login(identifiers);

// Login with callback to get Insider ID
user.login(identifiers, (insiderID) => {
  console.log('Insider ID:', insiderID);
});

// Logout
user.logout();

// Sign-up confirmation
Insider.signUpConfirmation();

Event Tracking

// Simple event
Insider.tagEvent('app_opened').build();

// Event with parameters
Insider.tagEvent('product_viewed')
  .addParameterWithString('product_id', 'SKU123')
  .addParameterWithString('category', 'Electronics')
  .addParameterWithDouble('price', 299.99)
  .addParameterWithInt('quantity', 1)
  .addParameterWithBoolean('in_stock', true)
  .addParameterWithDate('viewed_at', new Date())
  .addParameterWithArray('tags', ['featured', 'sale'])
  .addParameterWithStringArray('colors', ['red', 'blue'])
  .addParameterWithNumericArray('ratings', [4.5, 5.0])
  .build();

Product & E-commerce

Create a Product

const product = Insider.createNewProduct(
  'product_id',                              // Product ID
  'Product Name',                            // Product name
  ['Category', 'Subcategory'],               // Taxonomy (array)
  'https://example.com/image.jpg',           // Image URL
  99.99,                                     // Price
  'USD'                                      // Currency
);

// Add optional attributes
product
  .setColor('Blue')
  .setSize('M')
  .setBrand('BrandName')
  .setSalePrice(79.99)
  .setStock(100)
  .setQuantity(1)
  .setSku('SKU-123')
  .setVoucherName('SUMMER2024')
  .setVoucherDiscount(20)
  .setPromotionName('Summer Sale')
  .setPromotionDiscount(15)
  .setShippingCost(5.99)
  .setGender('Unisex')
  .setDescription('Product description')
  .setTags(['featured', 'bestseller'])
  .setInStock(true);

Cart Operations

// Add to cart
Insider.itemAddedToCart(product);

// Remove from cart
Insider.itemRemovedFromCart('product_id');

// Clear cart
Insider.cartCleared();

Wishlist Operations

// Add to wishlist
Insider.itemAddedToWishlist(product);

// Remove from wishlist
Insider.itemRemovedFromWishlist('product_id');

// Clear wishlist
Insider.wishlistCleared();

Purchase

Insider.itemPurchased('unique_sale_id_12345', product);

Page Visits

// Home page
Insider.visitHomePage();

// Listing/Category page
Insider.visitListingPage(['Category', 'Subcategory']);

// Product detail page
Insider.visitProductDetailPage(product);

// Cart page with products
Insider.visitCartPage([product1, product2]);

// Wishlist page
Insider.visitWishlistPage([product1, product2]);

Smart Recommendations

// Basic recommendation
Insider.getSmartRecommendation(
  12345,           // Recommendation ID
  'en_US',         // Locale
  'USD',           // Currency
  (recommendation) => {
    console.log('Recommendations:', recommendation);
  }
);

// Recommendation with product context
Insider.getSmartRecommendationWithProduct(
  product,         // Current product
  12345,           // Recommendation ID
  'en_US',         // Locale
  (recommendation) => {
    console.log('Related products:', recommendation);
  }
);

// Recommendation with product IDs
Insider.getSmartRecommendationWithProductIDs(
  ['prod1', 'prod2'],  // Product IDs array
  12345,               // Recommendation ID
  'en_US',             // Locale
  'USD',               // Currency
  (recommendation) => {
    console.log('Recommendations:', recommendation);
  }
);

// Track recommendation click
Insider.clickSmartRecommendationProduct(12345, product);

Message Center

Insider.getMessageCenterData(
  20,                      // Limit
  new Date('2024-01-01'),  // Start date
  new Date(),              // End date
  (messages) => {
    console.log('Messages:', messages);
  }
);

Content Optimizer

import ContentOptimizerDataType from 'react-native-insider/src/ContentOptimizerDataType';

// Get string content
Insider.getContentStringWithName(
  'variable_name',
  'default_value',
  ContentOptimizerDataType.Content, // Content: 0, Element: 1
  (value) => {
    console.log('Content:', value);
  }
);

// Get boolean content
Insider.getContentBoolWithName(
  'feature_enabled',
  false,
  ContentOptimizerDataType.Element,
  (value) => {
    console.log('Feature enabled:', value);
  }
);

// Get integer content
Insider.getContentIntWithName(
  'max_items',
  10,
  ContentOptimizerDataType.Content,
  (value) => {
    console.log('Max items:', value);
  }
);

// Without cache (always fetch fresh data)
Insider.getContentStringWithoutCache(
  'variable_name',
  'default',
  ContentOptimizerDataType.Content,
  (value) => {
    console.log('Fresh content:', value);
  }
);

Push Notifications

iOS Configuration

// Enable quiet permission (iOS only)
Insider.registerWithQuietPermission(true);

// Handle foreground push
Insider.setForegroundPushCallback((notification) => {
  console.log('Foreground push:', notification);
});

// Set active foreground push view
Insider.setActiveForegroundPushView();

// Enable IDFA collection
Insider.enableIDFACollection(true);

// Disable in-app message templates (iOS)
Insider.disableTemplatesForIOS();

// Re-enable templates (iOS)
Insider.reenableTemplatesForIOS();

Android Configuration

// Set hybrid push token (Android only)
Insider.setHybridPushToken('your_fcm_token');

// Handle universal links (Android only)
Insider.handleUniversalLink('https://your-link.com/path');

General Push Methods

// Handle notification manually
Insider.handleNotification(notificationData);

In-App Messages

// Remove current in-app message
Insider.removeInapp();

// Disable in-app messages
Insider.disableInAppMessages();

// Enable in-app messages
Insider.enableInAppMessages();

Geofencing

// Start tracking geofences
Insider.startTrackingGeofence();

// Allow background location updates (iOS)
Insider.setAllowsBackgroundLocationUpdates(true);

GDPR & Privacy

// Set GDPR consent
Insider.setGDPRConsent(true);

// Set mobile app access
Insider.setMobileAppAccess(true);

// Enable/disable data collection
Insider.enableLocationCollection(true);
Insider.enableIpCollection(true);
Insider.enableCarrierCollection(true);

Insider ID

// Get current Insider ID (returns a Promise)
const insiderID = await Insider.getInsiderID();
console.log('Insider ID:', insiderID);

// Listen for Insider ID changes
Insider.insiderIDListener((insiderID) => {
  console.log('Insider ID updated:', insiderID);
});

Miscellaneous

// Show native app review dialog
Insider.showNativeAppReview();

// Reinitialize with new partner name
Insider.reinitWithPartnerName('new_partner_name');

TypeScript Support

The SDK includes full TypeScript definitions:

import Insider from 'react-native-insider';
import InsiderGender from 'react-native-insider/src/InsiderGender';
import InsiderIdentifier from 'react-native-insider/src/InsiderIdentifier';
import InsiderCallbackType from 'react-native-insider/src/InsiderCallbackType';
import ContentOptimizerDataType from 'react-native-insider/src/ContentOptimizerDataType';

Enums

InsiderGender

InsiderGender.Male    // 0
InsiderGender.Female  // 1
InsiderGender.Other   // 2

InsiderCallbackType

InsiderCallbackType.NOTIFICATION_OPEN        // 0
InsiderCallbackType.INAPP_BUTTON_CLICK       // 1
InsiderCallbackType.TEMP_STORE_PURCHASE      // 2
InsiderCallbackType.TEMP_STORE_ADDED_TO_CART // 3
InsiderCallbackType.TEMP_STORE_CUSTOM_ACTION // 4
InsiderCallbackType.INAPP_SEEN               // 5
InsiderCallbackType.SESSION_STARTED          // 6

ContentOptimizerDataType

ContentOptimizerDataType.Content  // 0
ContentOptimizerDataType.Element  // 1

Complete Example

import React, { useEffect } from 'react';
import { Platform, Linking } from 'react-native';
import Insider from 'react-native-insider';
import InsiderGender from 'react-native-insider/src/InsiderGender';
import InsiderIdentifier from 'react-native-insider/src/InsiderIdentifier';
import InsiderCallbackType from 'react-native-insider/src/InsiderCallbackType';

function App() {
  useEffect(() => {
    // Initialize SDK
    Insider.init('your_partner_name', 'group.com.your.app', (type, data) => {
      switch(type) {
        case InsiderCallbackType.NOTIFICATION_OPEN:
          console.log('Notification clicked:', data);
          break;
        case InsiderCallbackType.INAPP_BUTTON_CLICK:
          console.log('In-app button clicked:', data);
          break;
        case InsiderCallbackType.SESSION_STARTED:
          console.log('Session started');
          break;
      }
    });

    // Configure SDK
    Insider.registerWithQuietPermission(false);
    Insider.setActiveForegroundPushView();
    Insider.startTrackingGeofence();
    Insider.enableIDFACollection(true);
    Insider.enableLocationCollection(true);

    // Handle deep links (Android)
    if (Platform.OS === 'android') {
      Linking.getInitialURL().then((url) => {
        if (url) {
          Insider.handleUniversalLink(url);
        }
      });

      const urlListener = Linking.addEventListener('url', (event) => {
        Insider.handleUniversalLink(event.url);
      });

      return () => urlListener.remove();
    }

    // Set up user
    const user = Insider.getCurrentUser();
    user
      .setName('Jane')
      .setEmail('[e-mail]')
      .setAge(25)
      .setGender(InsiderGender.Female);

    // Login user
    const identifiers = new InsiderIdentifier()
      .addEmail('[e-mail]')
      .addUserID('user_123');
    user.login(identifiers);

    // Track page visit
    Insider.visitHomePage();

    // Track custom event
    Insider.tagEvent('app_opened')
      .addParameterWithString('source', 'direct')
      .addParameterWithDate('timestamp', new Date())
      .build();

    // Create and track product
    const product = Insider.createNewProduct(
      'SKU001',
      'Premium T-Shirt',
      ['Clothing', 'T-Shirts'],
      'https://example.com/tshirt.jpg',
      29.99,
      'USD'
    );

    product.setColor('Blue').setSize('M');
    Insider.visitProductDetailPage(product);
  }, []);

  return <YourApp />;
}

Requirements

• React Native >= 0.60
• iOS >= 11.0
• Android >= API 21 (Android 5.0)

Support

• Documentation: Insider Developer Hub
• GitHub: useinsider/react-native-insider
• Issues: Report issues
• Email: Contact your Insider representative

License

This SDK is provided by Insider. Please refer to your commercial agreement with Insider for licensing terms.