Deep Linking in Roku Apps

To know more about deep linking in Roku, see the following sections:

You.i React Native Roku Apps

For You.i React Native apps, the deep linking code must be added in the app using the Linking module. Use the module’s getInitialURL() API to get the deep linking information for the session, as required.

For deep linking, the URL query for a Roku device contains:

  • Media content ID: To inform the app specifically which piece of content to launch
  • Media type: To inform the app’s behavior based on the type of media being launched

Example URL query: scheme://host/?MediaType=series&contentID=1234

For outgoing links (links to the app of a same organization), specify:

  • App ID: Roku assigned ID for the published app. Used in the path component of the URL for outgoing links.
  • Media type
  • Media content ID

For incoming links (links coming from other apps of a same organization), specify:

  • URL path, which contains app id
  • query, which contains media type and content ID

For more on how deep linking works, refer to the Facebook React Native Linking module.

Use Case:

As described earlier, Roku URLs are in the following format: scheme/host/?MediaType=season&contentID=1234. An example of using this information for screen navigation, might involve mapping the media type to different screen names, and appending the content ID to the end the URL. This would be transformed to: scheme://host/{map:{query:MediaType}:season=seasondetails&episode=player}/{query:contentID}, which results in the following URL that is used by React Navigation: scheme://host/seasondetails/1234.

C++ Roku Apps

The deep linking code must be implemented in the C++ app. For incoming deep link, do the following:

  1. Get the first URL launch using GetFirstLaunchUrl().
  2. Handle mid-execution incoming deep link using connection of IncomingSignal.

Handling incoming URL

For outgoing deep link, open the outgoing URL by:

  1. Verifying if the URL can be opened using CanOpenUrl(url)
  2. Opening the URL using OpenUrl()

The following is an example code for an incoming deep link:

void IncomingDeepLinkHandlingClass::Init()
{
    CYIDeepLinkBridge *pDeepLinkBridge = CYIDeepLinkBridgeLocator::GetDeepLinkBridge();
    if (pDeepLinkBridge)
    {
      // Get the First Launch URL
      const CYIUrl &firstLaunchUrl = pDeepLinkBridge -> GetFirstLaunchUrl();
      // Handle First Launch URL

      // Connect to the IncomingUrlReceived signal of the deep link bridge to handle mid-execution deep links.
      pDeepLinkBridge - > IncomingUrlReceived.Connect(*this, &IncomingDeepLinkHandlingClass::OnIncomingUrlReceived);
    }
}

void IncomingDeepLinkHandlingClass::OnIncomingUrlReceived(const CYIUrl &url)
{
   // Handle Incoming URL
}

The following is an example of outgoing deep link

void OutgoingDeepLinkClass::OpenUrl(const CYIUrl &url)
{
    CYIDeepLinkBridge *pDeepLinkBridge = CYIDeepLinkBridgeLocator::GetDeepLinkBridge();
    if (pDeepLinkBridge)
    {
      // Check that the URL can be opened
      if (pDeepLinkBridge->CanOpenUrl(url))
      {
        auto onOutgoingOpenUrlComplete = [](bool success, const CYIUrl &url) -> void {
        // Handle result of Outgoing URL

        // Note: Alternatively, you can pass in null instead of a callback function, and connect to the signals
        // CYIDeepLinkBridge::OutgoingOpenUrlSucceeded and CYIDeepLinkBridge::OutgoingOpenUrlFailed

        // Or if you're not interested in the result, you can pass no callback argument at all.
       };

       pDeepLinkBridge->OpenUrl(url, onOutgoingOpenUrlComplete);

       // Open the URL
       pDeepLinkBridge->OpenUrl()
      }
    }
}

You can trigger test deep link events with the Roku web-based deep linking tester.