Skip to main content

Mobile SDK: React Native Integration Guide

Updated

React Native SDK

1. SDK Stats

Xcode version: 10.0+

Android Studio version: 3.3.2+

iOS version: 11.0+

Android version: 5.0+

React Native: 0.63.0+

SDK Current Version: 1.4.0

2. Integration Steps

  1. Follow the steps in the Installation section to include the Wunderkind SDK in your project.
  2. Initialize the SDK in your project with the steps defined under the Usage section.
  3. Replace WEBSITE_ID with your website ID in the main SDK's initialize function and make sure to set isDebugMode flag to true both in development and testing environments.

3. Installation

Before proceeding further please ensure that you have a corresponding permission for Google Advertising Id if your Android application project targets latest Android SDK 33.

Such a permission should be set in android/app/src/main/AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="XXXYYYZZZ">
...
<uses-permission android:name="com.google.android.gms.permission.AD_ID"/>
...
<application 
android:label="XXXYYYZZZ" 
... 
</application> 
</manifest>

If you decide to opt-out of Ad Id tracking, please refer to corresponding section below.

This module is intended to be used alongside React Native and as such, basic knowledge of core concepts as well as minimum experience is expected. Please refer to this tutorial, should you wish to brush up.

It it also expected to have Xcode and/or Android Studio installed and setup in your working environment.

3.1 Integration via NPM or YARN

  • In order for your React Native project to have access to the SDK, paste the Wunderkind SDK source storage path into your project's root .npmrc.
@wunderkind-sdk-react:registry=https://us-central1-npm.pkg.dev/bx-production-coreapi/wunderkind-sdk-react/
//us-central1-npm.pkg.dev/bx-production-coreapi/wunderkind-sdk-react/:_authToken=""
//us-central1-npm.pkg.dev/bx-production-coreapi/wunderkind-sdk-react/:always-auth=true
  • Install the Wunderkind SDK with npm or yarn.
$ npm install --save @wunderkind-sdk-react/react-native-wunderkind-sdk

# or

$ yarn add @wunderkind-sdk-react/react-native-wunderkind-sdk

3.2 Linking

3.2.1 Autolinking

The Wunderkind SDK comes with platform-specific (native) code. In order to to allow your project to discover and use this code, we recommend to use AutoLinking.

Should you wish to link our SDK manually, please refer to the Manual Linking section below.

iOS

Your project must use CocoPods to install required Wunderkind dependency into your iOS project:

  • Define the Wunderkind library in the Podfile.
target 'Your Project Target' do
# ...
pod 'Wunderkind', podspec: '<https://storage.googleapis.com/wunderkind-ios-sdk/latest.podspec'>
# ...
end

Refer to the corresponding podspec file in order to install a specific version (x.y.z).

target 'Your Project Target' do
# ...
pod 'Wunderkind', podspec: '<https://storage.googleapis.com/wunderkind-ios-sdk/x.y.z.podspec'>
# ...
end
  • Install the pods, then open your .xcworkspace file in order to see your project in Xcode and verify the installed react-native-wunderkind-sdk:
 $ npx pod-install 
 $ open your-project.xcworkspace

Android

In order to install the Wunderkind SDK using Maven repository, please follow the steps highlighted in this section:

  • Navigate to build.gradle in application's module (by default it's in app folder) and add these lines:
android {
repositories {
maven {
url "https://us-central1-maven.pkg.dev/bx-production-coreapi/wunderkind-sdk-android"
}
}
}

3.2.2 Manual Linking

In order to manually link the Wunderkind SDK’s React Native 0.63.0+, please follow these additional instructions.

iOS

You can use CocoaPods to install the Wunderkind SDK into your projects.

  • Define the Wunderkind library in the Podfile.
target 'Your Project Target' do
# ...
pod 'react-native-wunderkind-sdk', :path => '../node_modules/@wunderkind-sdk-react/react-native-wunderkind-sdk'
pod 'Wunderkind', podspec: '<https://storage.googleapis.com/wunderkind-ios-sdk/latest.podspec'>
# ...
end

Refer to the corresponding podspec file in order to install a specific version (x.y.z).

target 'Your Project Target' do
# ...
pod 'react-native-wunderkind-sdk', :path => '../node_modules/@wunderkind-sdk-react/react-native-wunderkind-sdk'
pod 'Wunderkind', podspec: '<https://storage.googleapis.com/wunderkind-ios-sdk/x.y.z.podspec'>
# ...
end
  • Install the pods, then open your .xcworkspace file in order to see your project in Xcode and verify the installed react-native-wunderkind-sdk:
$ npx pod-install 
$ open your-project.xcworkspace

Android

💬You may experience React Native configuration errors during the manual Android SDK linking process.

Please refer to the following links for additional info:
How to resolve the error on react native start
Program type already present: androidx.versionedparcelable.NonParcelField
Android Material and appcompat Manifest merger

  • Define the react-native-wunderkind-sdk module in the android/settings.gradle.
include ':@wunderkind-sdk-react_react-native-wunderkind-sdk'
project(':@wunderkind-sdk-react_react-native-wunderkind-sdk').projectDir = \
new File(rootProject.projectDir, '../node_modules/@wunderkind-sdk-react/react-native-wunderkind-sdk/android')
  • Add the react-native-wunderkind-sdk module to the dependencies in the android/app/build.gradle.
dependencies {
// ...
implementation project(':@wunderkind-sdk-react_react-native-wunderkind-sdk')
}
  • Import and link the module in the MainApplication.java.
import co.wunderkind.sdk.WunderkindSdkPackage;

public class MainApplication extends Application implements ReactApplication {
// ...
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// ...
packages.add(new WunderkindSdkPackage());
return packages;
}
// ...
}

3.3 Upgrade Instructions

This section describes 3 steps for updating Wunderkind SDK to the latest version in your project.

Update @wunderkind-sdk-react/react-native-wunderkind-sdk package to the latest version.

  • If you are using yarn then run one of these commands: 
$ yarn upgrade @wunderkind-sdk-react/react-native-wunderkind-sdk

# or

$ yarn upgrade @wunderkind-sdk-react/react-native-wunderkind-sdk --latest
  • If you are using npm then run the following command:
$ npm install @wunderkind-sdk-react/react-native-wunderkind-sdk@latest
  • Verify that you did update Wunderkind SDK to the latest version by checking @wunderkind-sdk-react directory inside node_modules directory by looking at package.json file that has "version": "???" field.

Update Wunderkind pod dependency in iOS project.

  • If you previously decided to integrate Wunderkind pod using ***/latest.podspec then run the following command in ios directory:
$ pod update Wunderkind
  • If you previously decided to integrate Wunderkind pod using certain SDK version ***/x.y.z.podspec then just update x.y.z to the latest Wunderkind version and run the following command in root directory:
$ npx pod-install
  • Verify that you did update Wunderkind pod to the latest version by checking logs from npx pod-install or pod update Wunderkind commands. You can also verify it by opening ios/Podfile.lock file and searching for - Wunderkind (x.y.z) line, where x.y.z is the version of Wunderkind pod that was downloaded and integrated.

Perform gradle sync in Android project.

  1. Run Terminal CLI command ./gradlew sync in android directory or preferably click "Sync now" in Android Studio. This should be enough if you have done 1st step beforehand correctly.
  2. Verify that you did update Wunderkind dependency by going through "External Libraries" window in Android Studio and searching for co.wunderkind.sdk:wunderkindsdk:x.y.z, where x.y.z is the version of Wunderkind dependency that was downloaded and integrated.

4. Usage

In order to allow your app to track events, please follow the steps highlighted in this section.

4.1 Import the Wunderkind SDK to your project.

import { Wunderkind } from '@wunderkind-sdk-react/react-native-wunderkind-sdk'

💬 Please note that the Cannot resolve symbol warning may appear due to using WebStorm IDE. This thread may help you to resolve it.

4.2 SDK Initialization

Initialize SDK with your WEBSITE_ID (If you don't know your WEBSITE_ID, please contact our support team to resolve this issue), and set a corresponding environment configuration isDebugMode (details below).

This step is required, otherwise the SDK won't be initialized properly and event tracking will be disabled.

💬 By default debug mode is disabled, but setting isDebugMode to true allows you to verify events tracking functionality in a debug environment. Please do not forget to set to false before going live in production.

⚠️Set isDebugMode to false before promoting live in production.

Wunderkind.initializeSdk(WEBSITE_ID, isDebugMode);

4.3 Opting Users Out of Tracking

Client-side tracking of user data may be enabled/disabled by controlling a userʼs opt-in/out state. The opt-in/out state of a user is controlled by an opt-out flag that affects on the user's location, the IDFA and user's device information.

💬User information is tracked by default - A user must therefore explicitly opt-out to disable tracking.

4.3.1 Context Information Tracking

The Wunderkind SDK collects device/context specific information, which include:

  • Device Information:
    • operating system name
    • operating system version
    • device model
    • screen resolution
    • device type
  • App Information:
    • installation date
    • bundle identifier
    • version number
    • build number

Users may opt-in/out of context tracking and this may be set through the isContextInfoTrackingEnabled property, which is enabled by default.

💬Device/Context tracking is enabled by default.

Wunderkind.setContextInfoTrackingEnabled(false)

4.4 Track Events

⚠️It’s imperative that SDK functions be only called once for a single application event. Duplicate calls may occur when using inheritance patterns and accidental calls to the same SDK functions from parent and child objects simultaneously.

💬Please refer to the Wunderkind SDK Reference section for more information about classes and types that are used in SDK's API.

💬Underlying data points gathered by the Wunderkind SDK may be reviewed by using proxy applications such as Charles or Proxyman and through the use of request interceptions. This will help you to validate that events are sent with the expected arguments provided via the API functions. Also note that events are sent to the backend every 1 minute.

Please also refer to the Logging section below to customize your project's debug logs section to review Wunderkind SDK's expected results (initialization result, events saving and sending response).

The following is a list of public functions in Wunderkind class that may be used for tracking events.

4.4.1 Screen view event

Overview

This event should be triggered when a user navigates to a new screen, within the app.

Wunderkind.trackScreenViewEvent(url: string, screenType: ScreenType)

💬url property is required to be non-null otherwise this event will not be tracked. If you cannot provide corresponding screen's URL, please use your default home webpage URL.

💬type is a required Enum. There is no need to call trackScreenView if the page does not fall into one of the Enum's types.

⚠️This event should only be called once per page navigation. We recommend calling trackScreenView API when the page is presented to the user (componentDidMount + didFocus), and not when page is initialized and not yet presented.

Example Implementation:

export class HomeScreen extends React.Component {

    // ...

    componentDidMount() {
        // your code here
        
        var currentRoute = this.props.navigator.navigationContext.currentRoute;

        this.props.navigator.navigationContext.addListener('didfocus', (event) = {
            if (currentRoute === event.data.route) {
                // Pass here screen's URL or your default home webpage URL.
                Wunderkind.trackScreenViewEvent('https://www.your-webpage.com/search', ScreenType.SEARCH);
            }
        });
    }
}

4.4.2 Empty cart event

Overview

This event should be triggered when a user empties a cart.

⚠️This event should only be triggered when a user has items in their cart and empties it. Not every time a user opens their empty cart.

Wunderkind.trackEmptyCartEvent()

Example Implementation:

export class CartScreen extends React.Component {

    // ...

    cartBecameEmpty() {
        // This event should only be triggered when a user has items in their cart and empties it.
        // Not every time a user opens their empty cart.
        Wunderkind.trackEmptyCartEvent();
    }
}

4.4.3 View item event

Overview

This event should be triggered when a user views an item

Wunderkind.trackViewItemEvent(itemId: string, groupId: string)

💬itemId, groupId properties are required to be non-empty otherwise this event will not be tracked.
groupId represents a group of similar items. For example, a shirt will have the same groupId for all variations of that shirt (different sizes/colors, etc). I.e. each size/color combo will have a different itemId but the same groupId.

💬We recommend calling the trackViewItem API when the product screen is presented to the user (componentDidMount + didFocus) and not when screen is initialized and not yet presented.

Example Implementation:

export class ProductDetailsScreen extends React.Component {

    // ...

    componentDidMount() {
        // your code here
        
        var currentRoute = this.props.navigator.navigationContext.currentRoute;

        this.props.navigator.navigationContext.addListener('didfocus', (event) => {
            if (currentRoute === event.data.route) {

                // In the screenshot above the item id is equal to 17727082
                let itemId = '17727082';

                // In the screenshot above the group id is equal to "pin-dot-quilters-showcase-cotton-fabric"
                let groupId = 'pin-dot-quilters-showcase-cotton-fabric';

                Wunderkind.trackViewItemEvent(itemId, groupId);
            }
        });
    };
}

4.4.4 Select SKU event

This event is triggered when a user selects specific product attributes (e.g. color, size, etc…) and contains SKU details that were selected.

Wunderkind.trackSelectSkuEvent(groupId: string, feedId: string)

💬groupId and feedId properties are required to be non-empty otherwise this event will not be tracked.

groupId represents a group of similar items. For example, a shirt will have the same groupId for all variations of that shirt (different sizes/colors, etc). I.e. each size/color combo will have a different feedId but the same groupId.

Example Implementation:

export class ProductDetailsScreen extends React.Component {

    ...

    userSelectedProductSize(productSize) {
        // In the screenshot above the group id is equal to 2000469213
        let groupId = '2000469213';

        // In the screenshot above the feed id is equal to 20004692130203
        // In this example feedId = 2000469213 (groupId) + 02 (color) + 03 (size)
        let feedId = '20004692130203';

        Wunderkind.trackSelectSkuEvent(groupId, feedId);
    };
}

4.4.5 Add to cart event

Overview

This event is triggered when a user adds an item to their cart

Wunderkind.trackAddToCartEvent(itemId: string)

💬itemId property is required to be non-empty otherwise this event will not be tracked.

Example Implementation:

export class ProductDetailsScreen extends React.Component {

..

addToCartButtonTapped() {
// In the screenshot above the item id is equal to 17727082
let itemId = '17727082';

Wunderkind.trackSelectSkuEvent(itemId);
};
}

4.4.6 View category event

Overview

This event is triggered when a user views the category screen.

Wunderkind.trackViewCategoryEvent(productCategory: ProductCategory)

💬productCategory property is required to be non-null otherwise this event will not be tracked. If you cannot provide corresponding category’s URL, please pass your default home webpage URL.

Please refer to Product Category section to learn more about expected types and values to be sent.

⚠️Please pass productCategory as an object created by using keyword new: new ProductCategory(). Using object literal const productCategory = { ... } is not permitted.

Example Implementation:

export class ProductsListFromCategoryScreen extends React.Component {

    // ...

    productsLoaded(items) {
        // In the screenshot above leaf category name is "Fine"
        let categoryTitle = 'Fine';

        // Pass here category's URL or your default home webpage URL.
        let categoryUrl = 'https://www.your-webpage.com/top-level-category/leaf-category';

        // Pass here a list of item ids that are part of selected category
        let productsIds = items.map((item, index) = { return item.productId });

        let wunderkindCategory = new ProductCategory(title: categoryTitle,
            url: categoryUrl,
            itemIds: productsIds);

        Wunderkind.trackViewCategoryEvent(category: wunderkindCategory);
    }
}

4.4.7 View search event

Overview

This event is triggered when a user views the category screen

Wunderkind.trackViewSearchEvent(productCategory: ProductCategory)

💬 productCategory property is required to be non-null otherwise this event will not be tracked. If you cannot provide corresponding search’s URL, please pass your default home webpage URL. Please refer to Product Category section to learn more about expected types and values to be sent.

⚠️ sam

Example Implementation:

export class ProductsListFromSearchScreen extends React.Component {

    // ...

    productsLoaded(items) {
        // In the screenshot above leaf category name is "Fine"
        let searchInput = 'coconut';

        // Pass here search results URL or your default home webpage URL.
        let searchUrl = 'https://www.your-webpage.com/search?input=coconut';

        // Pass here a list of item ids in the search result
        let productsIds = items.map((item, index) = { return item.productId });

        let wunderkindCategory = new ProductCategory(title: searchInput,
            url: searchUrl,
            itemIds: productsIds);

        Wunderkind.trackViewSearchEvent(category: wunderkindCategory);
    }
}

4.4.8 Logged in event

Overview

This event is triggered when a user explicitly successfully signed in to their app. This event is also triggered when a user signed up to their app.

Wunderkind.trackLoggedInEvent(email: string, phone: number)

💬email property is required to be non-empty otherwise this event will not be tracked.

💬Please pass phone in the following format (country code)(phone number).             Example: 13305851212

Example Implementation:

export class LoginScreen extends React.Component {

..

loginWasSuccessfulViaGoogleSignIn(email) {
Wunderkind.trackLoggedInEvent(email, phone);
};
}

4.4.9 LoggedOut Event

Overview

This event is called when a user logs out of the application

Wunderkind.trackLoggedOut()

Example Implementation:

export class LogoutScreen extends React.Component {

userLoggedOut() {
Wunderkind.trackLoggedOut()
}
}

4.4.10 Text Opt In Event

Overview

This event is triggered when a user opts in to text messaging.

💬Pass null for language Code, unless the desired language is French then pass a String with value “fr”.

Wunderkind.trackTextOptIn(phoneNumber: number, languageCode: String?)

💬Please pass phone in the following format (country code)(phone number) Example: 13305851212

Example Implementation:

export class CheckoutScreen extends React.Component {

userSmsOptedIn() {
Wunderkind.trackTextOptIn(userPhoneNumber, "fr")
}
}

4.4.11 Purchase event

Overview

This event is triggered when a user purchases an item and completes their order.

Wunderkind.trackPurchaseEvent(order: Order)

💬order property is required to be non-null otherwise this event will not be tracked.

⚠️Please note that due to the importance of the Purchase event, it’s imperative that all of its attributes (Invoice, Customer, Product, Order) be correctly set.

⚠️Should purchase event attributes not be entered correctly, the following error may be generated in your project’s logs:
Unfortunately, event "Purchase" hasn't been tracked since you have provided a nullable parameter or a not valid one.

Example Implementation:

export class CheckoutScreen extends React.Component {

    // ...

    purchaseWasSuccessful() {
        let couponList: string[] = ["TestCoupon"];

        var purchasedProducts: Product[] = [];
        let price = 10.0;
        let quantity = 1L;
        purchasedProducts.push(new Product("PRODUCT-ID", "SKU-ID", price, quantity));

        let amount = 100.0;
        let tax = 10.0;
        let shipping = 10.0;
        let totalDiscount = 10.0;
        let paymentMethod = "Visa Card";
        let customerEmail = "test@reactnative.com";
        let customerPhone = 12223334445;
        let goal = "purchase";

        Order order = new Order(
            "TestOrderId",
            new Invoice(amount, tax, shipping, totalDiscount, Currency.USD),
            paymentMethod,
            purchasedProducts,
            new CustomerWithPhone(customerEmail, customerPhone),
            couponList,
            goal
        );

        Wunderkind.trackPurchaseEvent(order);
    };
}

4.5 Logging

The Wunderkind SDK provides logging capabilities in order to report on events collected and are useful to validate user data.

Setting logLevel property to debug will allow you to trace data going through the Wunderkind SDK.

Wunderkind.setLoggingLevel(LogLevel.DEBUG)

Setting logLevel property to none allows you to disable logging.

Wunderkind.setLoggingLevel(LogLevel.NONE)

💬logLevel default value is info, which notifies you about events deemed to be important (Activation, Validation Errors, etc.)

5. Wunderkind SDK Reference

5.1 Classes

Product Category

class ProductCategory {
    itemIds: string[];
    url: string;
    title: string;

    constructor(
        itemIds:string[],
        url:string,
        title:string
    );
};

💬title, url, itemIds properties are required to be non-empty, non-null and non-null, respectively. Failure to do so will prevent Wunderkind from tracking this event.
Note: If you cannot provide corresponding product category's URL, please pass your default home webpage URL.

Invoice

class Invoice {
    amount: number;
    shipping: number;
    currency: Currency;
    totalDiscount?: number;
    tax: number;

    constructor(
        amount: number,
        shipping: number,
        currency: Currency,
        totalDiscount?: number,
        tax: number
    );
}

💬amount, tax, shipping properties are required to be greater than or equal to 0.0 otherwise this event will not be tracked. Also, iftotalDiscount property is not null, it must be greater than or equal to 0.0.

Product

class Product {
    skuId: string;
    price: number;
    quantity: number;
    productId: string;

    constructor(
        skuId: string,
        price: number,
        quantity: number,
        productId: string
    );
}

💬productId, skuId properties are required to be non-empty and price, quantity properties are required to be greater than or equal to 0 otherwise this event will not be tracked.

Order

class Order {
coupons?: string[];
orderId: string;
invoice: Invoice;
 customer: Customer;
products: Product[];
goal: string;
paymentMethod?: string;

constructor(
coupons?: string[],
orderId: string,
invoice: Invoice,
customer: Customer,
products: Product[],
goal: string,
paymentMethod?: string
);
}

💬orderId, goal, products properties are required to be non-empty otherwise this event will not be tracked. Also, if paymentMethod or coupons properties are not null, they must be non-empty.

6.2 Enums

Screen Type

enum ScreenType {
HOME = 0,
PRODUCT = 1,
CATEGORY = 2,
SEARCH = 3,
CART = 4,
ARTICLE = 5,
GALLERY = 6,
CHECKOUT = 7
};

Currency

enum Currency {
    USD = 0,
    KRW = 1,
    AED = 2,
    LTL = 3,
    ARS = 4,
    MAD = 5,
    AUD = 6,
    MXN = 7,
    BGN = 8,
    MYR = 9,
    BOB = 10,
    NOK = 11,
    BRL = 12,
    NZD = 13,
    CAD = 14,
    PEN = 15,
    CHF = 16,
    PHP = 17,
    CLP = 18,
    PKR = 19,
    CNY = 20,
    PLN = 21,
    COP = 22,
    RON = 23,
    CZK = 24,
    RSD = 25,
    DKK = 26,
    RUB = 27,
    EGP = 28,
    SAR = 29,
    EUR = 30,
    SEK = 31,
    GBP = 32,
    SGD = 33,
    HKD = 34,
    THB = 35,
    HRK = 36,
    TRY = 37,
    HUF = 38,
    TWD = 39,
    IDR = 40,
    UAH = 41,
    ILS = 42,
    VEF = 43,
    INR = 44,
    VND = 45,
    JPY = 46,
    ZAR = 47
}

LogLevel

enum LogLevel {
NONE = 0,
DEBUG = 1,
INFO = 2
};

 

6. Upgrade the Wunderkind-SDK

💬To upgrade the Wunderkind-SDK please follow the steps in Podfile Modification, as well as incorporating any necessary Code Modifications that have been released since the currently implemented version in your app. Latest Wunderkind-SDK version: 1.4.0

Implementation Modifications

Update @wunderkind-sdk-react/react-native-wunderkind-sdk package to the latest version.

  • If you are using yarn then run one of these commands:
$ yarn upgrade @wunderkind-sdk-react/react-native-wunderkind-sdk

# or

$ yarn upgrade @wunderkind-sdk-react/react-native-wunderkind-sdk --latest
  • If you are using npm then run the following command:
$ npm install @wunderkind-sdk-react/react-native-wunderkind-sdk@latest
  • Verify that you did update Wunderkind SDK to the latest version by checking @wunderkind-sdk-react directory inside node_modules directory by looking at package.json file that has "version": "???" field.

Update Wunderkind pod dependency in iOS project.

  • If you previously decided to integrate Wunderkind pod using ***/latest.podspec then run the following command in ios directory:
$ pod update Wunderkind
  • If you previously decided to integrate Wunderkind pod using certain SDK version ***/x.y.z.podspec then just update x.y.z to the latest Wunderkind version and run the following command in root directory:
$ npx pod-install
  • Verify that you did update Wunderkind pod to the latest version by checking logs from npx pod-install or pod update Wunderkind commands. You can also verify it by opening ios/Podfile.lock file and searching for - Wunderkind (x.y.z) line, where x.y.z is the version of Wunderkind pod that was downloaded and integrated.

Perform gradle sync in Android project. 

  • Run Terminal CLI command ./gradlew sync in android directory or preferably click "Sync now" in Android Studio. This should be enough if you have done 1st step beforehand correctly.
  • Verify that you did update Wunderkind dependency by going through "External Libraries" window in Android Studio and searching for co.wunderkind.sdk:wunderkindsdk:x.y.z, where x.y.z is the version of Wunderkind dependency that was downloaded and integrated.

Code Modifications

⚡️ 1.4.0

Phone now Number

phone should be passed as an Number to ensure proper handling in all methods.

⚠️ Ifphone is deemed not valid they will not be tracked
and the below warning log will be emitted-
Unfortunately, eventName hasn't been tracked since you
have provided a nullable parameter or a not valid one.

Please update all methods including Login, Conversion, and TextOptIn Events.

Customer switched from object to function

Call the below code to create a Customer().

let customer = Customer.createCustomerWithPhone('myEmail@gmail.com', 13304443333);

Existing LoggedIn  and LoginMethod removed

The following LoggedIn functions involving Existing and LoginMethod have been removed, please remove these functions and replace with the correct LoggedIn functions.

deprecated: trackLoggedInEvent(email: string, loginMethod: LoginMethod)
use: trackLoggedInEvent_v2(email: string)
---
deprecated: trackLoggedInEvent(email: string, loginMethod: LoginMethod, phone: string)
use: trackLoggedInEvent_v2(email: string, phone: number)
---
deprecated: trackLoggedInEvent(email: string, loginMethod: LoginMethod, phone: string)
use: trackLoggedInEvent_v2(email: string, phone: number)
---
deprecated: trackExistingLoggedInEvent(email: string)
use: trackLoggedInEvent_v2(email: string)
---

⚡️ 1.3.3

Location Tracking

Location Tracking has been removed, any code referenced below can be omitted.

Wunderkind.setLocationTrackingEnabled(false)

MAID Tracking

MAID Tracking has been removed, any code referenced below can be omitted.

Wunderkind.setMAIDTrackingEnabled(false)

⚡️ 1.2.5

Any LoggedIn functions involving Existing and LoginMethod have been marked for deprecation, please remove these functions and replace with the corresponding function.

deprecated: trackLoggedInEvent(email: string, loginMethod: LoginMethod)
use: trackLoggedInEvent_v2(email: string)
---
deprecated: trackLoggedInEvent(email: string, loginMethod: LoginMethod, phone: string)
use: trackLoggedInEvent_v2(email: string, phone: string)
---
deprecated: trackLoggedInEvent(email: string, loginMethod: LoginMethod, phone: string)
use: trackLoggedInEvent_v2(email: string, phone: string)
---
deprecated: trackExistingLoggedInEvent(email: string)
use: trackLoggedInEvent_v2(email: string)
---
  • Please ensure the trigger of a TextOptIn Event when a user opts into text messaging.

💬Pass null for language Code, unless the desired language is French then pass a String with value “fr”

Wunderkind.trackTextOptIn(phoneNumber: String, languageCode: String?)

💬Please pass phone in the following format +(country code)(phone number)

Example Implementation:

export class CheckoutScreen extends React.Component {

userSmsOptedIn() {
Wunderkind.trackTextOptIn(userPhoneNumber, "fr")
}
}
  • Please input the phone parameter to LoggedIn Event. 
Wunderkind.trackLoggedInEvent(email: string, phone: String)

💬email property is required to be non-empty otherwise this event will not be tracked.

💬Please pass phone in the following format +(country code)(phone number)

Example Implementation: 

export class LoginScreen extends React.Component {

..

loginWasSuccessfulViaGoogleSignIn(email) {
Wunderkind.trackLoggedInEvent(email, phone);
};
}

 

7. Change Log

Version Release Date Details
1.4.0
 08.12.2024
  • phone number required to be Number
  • Remove LoginMethod Parameter, ExistingLoggedIn Methods
1.3.4 05.21.2024 Location/MAID/IDFA tracking Removed
1.3.3 05.01.2024 iOS- Privacy Manifest added, IDFA tracking removed
1.2.5 02.27.2024 Remove LoginMethod Parameter, ExistingLoggedIn Methods
1.2.1 1.10.2024 New events: TextOptIn, Loggedin- Phone Parameter
1.1.1 10.10.2023 New event: LoggedOut.
1.0.8 04.19.2023 Internal SDK's fixes and improvements.
1.0.7 01.10.2023 Internal SDK's fixes and improvements.
1.0.6 10.05.2022 Internal SDK's fixes and improvements.
1.0.5 09.12.2022 Internal SDK's fixes and improvements.
1.0.4 08.23.2022
  • ScreenType is required for ScreenView Event.
  • trackExistingLoggedIn event endpoint created.
  • Checkout ScreenType added.
1.0.3 03.31.2022 Internal SDK's fixes and improvements.
1.0.2 01.26.2022
  • Fixes bug related to public property Wunderkind.sdkVersion.
  • Slightly updates events payload and dispatch functionality.
  • Fixes minimum deployment target warning message.
  • Updates framework's name from Wunderkind to WunderkindKit
1.0.1 08.27.2021
  • Decreases minimum deployment target to 11.0.
  • Increases test coverage.
1.0.0 07.07.2021 Initial Wunderkind SDK release.

 

8. License

Distributed under the MIT License. To view the full license, visit http://www.wunderkind.co/legal/sdklicense-agreement

 

Related articles

Powered by Zendesk