React Native ConvertedIn SDK

1.1.0 · active · verified Sun Apr 19

The `react-native-converted-in-sdk` package provides a React Native bridge for integrating the ConvertedIn tracking and analytics SDKs into both iOS and Android applications. It simplifies the process of incorporating e-commerce event tracking, such as 'view content', 'add to cart', 'initiate checkout', and 'purchase', as well as user identification features. The current stable version is 1.1.0, with a recent history of rapid releases (September 2024) addressing bug fixes and minor feature enhancements, indicating active development. A key differentiator is its dual API approach, offering both a functional `initializeSDK` method and a `RNConvertInSDKProvider` component with a `useConvertedInSdk` hook for flexible integration patterns. The library ships with TypeScript type definitions, improving developer experience. ConvertedIn itself is a marketing operating system for e-commerce, focusing on personalized multi-channel marketing to boost customer engagement and ROI.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to initialize the ConvertedIn SDK using the `RNConvertInSDKProvider` and how to use the `useConvertedInSdk` hook to identify users and track e-commerce events like 'Purchase' within a React Native component. It showcases both provider-based setup and direct method calls.

import React, { useEffect } from 'react';
import { SafeAreaView, Text, Button, Alert } from 'react-native';
import { RNConvertInSDKProvider, useConvertedInSdk } from 'react-native-converted-in-sdk';

const AppContent = () => {
  const { initializeSDK, identifyUser, trackEvent, isInitialized } = useConvertedInSdk();

  useEffect(() => {
    if (!isInitialized) {
      // This is a redundant call if using RNConvertInSDKProvider, but shows manual initialization if not wrapped
      initializeSDK({
        pixelId: process.env.CONVERTEDIN_PIXEL_ID ?? 'CI-YOUR_PIXEL_ID',
        storeUrl: process.env.CONVERTEDIN_STORE_URL ?? 'https://your-store.com',
      });
    }
    console.log('SDK Initialized:', isInitialized);
  }, [initializeSDK, isInitialized]);

  const handleIdentifyUser = () => {
    identifyUser("user@example.com", "+1", "5551234567");
    Alert.alert("User Identified", "Check console for details.");
  };

  const handleTrackPurchase = () => {
    trackEvent(
      'Purchase',
      {
        currency: 'USD',
        total: 99.99,
        products: [
          { id: 'SKU123', quantity: 1, name: 'Sample Product' },
        ],
      }
    );
    Alert.alert("Event Tracked", "Purchase event sent.");
  };

  return (
    <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center', gap: 20 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>ConvertedIn SDK Demo</Text>
      <Button title="Identify User" onPress={handleIdentifyUser} />
      <Button title="Track Purchase Event" onPress={handleTrackPurchase} />
      <Text style={{ marginTop: 20 }}>SDK Initialized: {isInitialized ? 'Yes' : 'No'}</Text>
    </SafeAreaView>
  );
};

export default function App() {
  return (
    <RNConvertInSDKProvider
      pixelId={process.env.CONVERTEDIN_PIXEL_ID ?? 'CI-YOUR_PIXEL_ID'}
      storeUrl={process.env.CONVERTEDIN_STORE_URL ?? 'https://your-store.com'}
    >
      <AppContent />
    </RNConvertInSDKProvider>
  );
}

view raw JSON →