React Native SDK: Implementing Deep Links

Singular React Native SDK 
Download
Singular React Native SDK version 3.3.0 (see Change Log)
Compatibility  React Native 0.46.4+
Integration Guides
  1. Basic Integration
  2. Tracking Events and Revenue
  3. Implementing Deep Links
  4. Adding SKAdNetwork Support
  5. Advanced Options

 

Introduction

Deep links are links that lead into specific content inside an app. When a user clicks a deep link on a device that has the app installed, the app opens and shows a specific product or experience.

Singular tracking links can include deep linking as well as deferred deep linking (see our Deep Linking FAQ and the Singular Links FAQ for more information).

The instructions below will show you how to:

  1. Access the tracking link that led to your app being opened,
  2. Read the deep link destination, and
  3. Show the appropriate content.

Note: This article assumes your organization is using Singular Links - Singular's new tracking link technology, launched in 2019.

Older customers of Singular may be using Singular's older tracking links. See Generating Links [Legacy Tracking Links].

Enabling Singular Links

To enable Singular Links in iOS and in Android, see Singular Links Prerequisites.

Handling Singular Links

The Singular SDK provides a handler mechanism to read the details of the tracking link that led to the app being opened.

To use the handler:

  1. Call withSingularLinks when you create the SingularConfig object, as in the example below. This registers a Singular Links handler.
  2. Inside the handler, call or define a callback function that receives a SingularLinksParams object, as in the example below. The SingularLinksParams object contains the following fields:
    • deeplink - the deep link address provided in the _dl query parameter. This is what you need to parse in order to show the users the right product or experience.
    • passthrough - all parameters included in the _p query parameter of the Singular Link.
    • isDeferred - true if this is a deferred deep link.
    • urlParameters - all query string parameters from the Singular Tracking Link. 
      • You must append the _forward_params=1 key/value pair to the Singular Tracking Link in order for all query string parameters to be available in the SDK.
const config = new SingularConfig('<SDK KEY>', '<SDK SECRET>');
config.withSingularLink(singularLinksParams => {
    const deeplink = singularLinksParams.deeplink;
    const passthrough = singularLinksParams.passthrough;
    const isDeferred = singularLinksParams.isDeferred;
    const urlParameters = singularLinksParams.urlParameters;
    
    // Add your code here to handle the deep link
});
...
Singular.init(config);

Setting Up Prerequisites

iOS Prerequisites

In the project’s AppDelegate.m, add the following:

// Top of the AppDelegate.m
#import <Singular-React-Native/SingularBridge.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Add inside didFinishLaunchingWithOptions
  [SingularBridge startSessionWithLaunchOptions:launchOptions];
  return YES;
}

// Add this method to the app delegate
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id> * _Nullable))restorationHandler{
  [SingularBridge startSessionWithUserActivity:userActivity];
  return YES;
}

Android Prerequisites

In the project’s MainActivity.java, add the following:


// Add as part of the imports at the top of the class
import android.content.Intent;
import net.singular.react_native.SingularBridgeModule;

// Add to the MainActivity class
@Override
public void onNewIntent(Intent intent) {
  if(intent.getData() != null) {
    setIntent(intent);
    super.onNewIntent(intent);
    SingularBridgeModule.onNewIntent(intent);
  }
}