Skip to main content

Deep Linking

Deep linking is a technique that allows users to navigate directly to specific content within your app by clicking on a link. The AppTrove Expo SDK supports deferred deep linking, which handles cases where users need to install your app first.

Understanding Deferred Deep Linking​

Deferred deep linking occurs when a user does not have your app installed on their device. When this is the case, the deep link will first send the user to the device app store to install the app. Once the user has installed and opened the app, the SDK will redirect them to the screen specified in the link.

Deep Linking Scenario​

Deep Linking Flow

Overview​

Deferred deep linking ensures users reach intended content seamlessly:

  • Immediate Deep Link: When the app is already installed, the app captures the URL and navigates to the specified screen.
  • Deferred Deep Link: When the app is not installed, Trackier redirects to the app store. After installation, the SDK navigates to the specified screen.
  • Use Case: Show "Product: jeans, Quantity: 3" after clicking a link like https://trackier.u9ilnk.me/d/PGJ2m4NtPd?dlv=standard&productid=jeans&quantity=3.

Example URLs:​

  • Short: https://trackier.u9ilnk.me/d/PGJ2m4NtPd
  • Long: https://trackier.u9ilnk.me/d/PGJ2m4NtPd?pid=QR_Code&cost_value=100343&cost_currency=USD&lbw=1h&camp=VistMarketCampaign&dlv=standard&p1=reewrwrwerwe&p2=New+Product&productid=jeans&quantity=3&id=3234234

Prerequisites​

  • AppTrove Expo SDK: trackier-expo-sdk installed in your project
  • Expo: Expo SDK 48+ or later
  • Trackier Panel: Configured through Panel with deep link settings
  • App Store/Play Store: App available for testing
  • Dependencies: Internet permission

The SDK handles deep links in two scenarios:

  1. Immediate Deep Link: When the app is already installed and opened via deep link
  2. Deferred Deep Link: When the app is installed via deep link and opened for the first time

When the app opens via deep link, pass the URL to the Trackier SDK for tracking:

import { useEffect } from 'react';
import { Linking } from 'react-native';
import { TrackierConfig, TrackierSDK } from 'trackier-expo-sdk';

export default function App() {
  useEffect(() => {
    // Handle immediate deep links when app opens
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      if (initialUrl) {
        // Pass the deep link to Trackier SDK for tracking
        TrackierSDK.parseDeepLink(initialUrl);
      }
    };

    getUrlAsync();
  }, []);

  return (
    // Your app content
  );
}

Set up the deferred deep link callback during SDK initialization to handle cases where users install the app via deep link:

import { useEffect } from 'react';
import { Linking } from 'react-native';
import { TrackierConfig, TrackierSDK } from 'trackier-expo-sdk';

export default function App() {
  useEffect(() => {
    // Handle immediate deep links
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      if (initialUrl) {
        TrackierSDK.parseDeepLink(initialUrl);
      }
    };

    getUrlAsync();

    // Initialize SDK with deferred deep link callback
    const trackierConfig = new TrackierConfig("XXXXXXX-XXXX-XXXX-80e3-5938fadff", TrackierConfig.EnvironmentDevelopment);
    
    // Configure deferred deep link callback
    trackierConfig.setDeferredDeeplinkCallbackListener((uri: string) => {
      console.log("Deferred Deeplink Callback received");
      console.log("URL: " + uri);
      
      // Handle the deferred deep link
      handleDeferredDeepLink(uri);
    });
    
    TrackierSDK.initialize(trackierConfig);
  }, []);
  
  function handleDeferredDeepLink(uri: string) {
    // Handle deferred deep links (when app is installed via deep link)
    const urlObj = new URL(uri);
    const params = new URLSearchParams(urlObj.search);
    
    const dlv = params.get('dlv');
    const productId = params.get('productid');
    const quantity = params.get('quantity');
    
    console.log('Deferred deep link parameters:', { dlv, productId, quantity });
    
    if (dlv === 'FirstProduct') {
      // navigation.navigate('Product', { productId, quantity });
    }
  }

  return (
    // Your app content
  );
}

Step 2.2: Test Your Implementation​

  1. Test Immediate Deep Links:

    • Install your app on a device
    • Click a deep link URL (e.g., https://trackier.u9ilnk.me/product?dlv=FirstProduct&productid=jeans&quantity=3)
    • Verify the app opens and logs the deep link

  2. Test Deferred Deep Links:

    • Uninstall your app from the device
    • Click a deep link URL
    • Verify redirection to the app store
    • Install and open the app
    • Verify the app navigates to the correct screen based on the deep link

Trackier deep links follow this structure:

https://trackier.u9ilnk.me/product?dlv=FirstProduct&quantity=10&pid=sms

Where:

  • dlv: Deep link value (screen identifier)
  • quantity: Product quantity
  • pid: Product ID

The SDK provides a utility method to resolve dynamic links and extract SDK parameters. Use resolveDeeplinkUrl to resolve deep link URLs:

import { TrackierConfig, TrackierSDK } from 'trackier-expo-sdk';

async function resolveDeepLink() {
  try {
    const deepLinkUrl = "https://trackier.u9ilnk.me/d/PGJ2m4NtPd?dlv=standard&productid=jeans&quantity=3";
    
    const result = await TrackierSDK.resolveDeeplinkUrl(deepLinkUrl);
    
    console.log("Resolved URL:", result.url);
    console.log("SDK Parameters:", result.sdkParams);
  } catch (error) {
    console.error("Error resolving deep link:", error);
  }
}

Best Practices​

  • URL Parsing: Implement robust URL parsing to handle various deep link formats
  • Error Handling: Add error handling for malformed URLs or missing parameters
  • Navigation: Use your app's navigation system to properly route users to the correct screens
  • Testing: Test deep links thoroughly on both Android and iOS devices
  • Fallbacks: Provide fallback navigation for cases where deep link parameters are missing or invalid

Troubleshooting​

  • Deep Links Not Opening App: Verify the deep link URL structure and ensure the app is properly configured
  • Deferred Deep Link Callback Not Triggered: Verify the setDeferredDeeplinkCallbackListener method is called before TrackierSDK.initialize
  • Missing Parameters: Confirm URL includes required parameters like dlv, productid, and quantity
  • No Events Logged: Validate SDK key and network connectivity

Next Steps​

After implementing deep linking:

  1. Test deep links on both Android and iOS devices
  2. Implement campaign data retrieval for personalized experiences
  3. For assistance, contact Trackier support at support@trackier.com