How to Deep Link in Cordova, PhoneGap, and Ionic

Why add deep linking

URLs can navigate to websites, but not to apps. Deep Links allow users to install, open, and pass data into apps. Deep linking will increase app discovery and increasing overall app engagement.

What plugins allow deep linking

	EddyVerbruggen	Driftyco	Nordnet	Branch
Number of downloads
Free service	√	√	√	√
Supports Cordova	√	√	√	√
Supports PhoneGap	√	√	√	√
Supports Ionic	√	√	√	√
Handles URI Scheme linking [1]	√	√	√	√
Handles iOS Universal Links [2]			√	√
Handles Android App Links [3]				√
Hosts AASA and assetlinks files [4]				√
Implementation in pure JavaScript [5]				√
Pass any custom data from deep link into app				√
Tracks attribution through installs				√
Tracks deep link analytics with a dashboard				√
Tracks user and custom event				√
Tracks user referrals				√
Create and share deep links inside the app				√
Supports linking in social media and ad platforms				√
Supported by a full time integration team				√

• ^[1] URI Schemes will open the app, but cannot pass data discretely.
• ^[2] URI Schemes have been depreciated and replaced by Universal Links after iOS 9.2.
• ^[3] Android App Links allow for direct app opens without needing to open the browser first.
• ^[4] The AASA and assetlinks files are needed for Universal Links and App Links to work.
• ^[5] Simplicity in integration. No need to modify the native iOS or Android code.

How to deep link with Branch

Configure Branch

• Complete the Branch Dashboard

• • 
  • 

Configure App

• Cordova and Ionic
• • <!-- sample config.xml --> <widget id="com.eneff.branch.cordovatestbed" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <!-- Branch --> <plugin name="branch-cordova-sdk" spec="^2.5.0" /> <branch-config> <branch-key value="key_live_ndqptlgXNE4LHqIahH1WIpbiyFlb62J3" /> <uri-scheme value="branchcordova" /> <link-domain value="cordova.app.link" /> <ios-team-release value="PW4Q8885U7" /> </branch-config>
• PhoneGap
• • <!-- sample config.xml --> <widget id="com.eneff.branch.cordovatestbed" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0"> <!-- Branch --> <plugin name="branch-cordova-sdk" spec="^2.5.0" /> <branch-config> <branch-key value="key_live_ndqptlgXNE4LHqIahH1WIpbiyFlb62J3" /> <uri-scheme value="branchcordova" /> <link-domain value="cordova.app.link" /> <ios-team-release value="PW4Q8885U7" /> </branch-config>
• Change the following values in code to match the Branch Dashboard
• • com.eneff.branch.cordovatestbed
  • key_live_ndqptlgXNE4LHqIahH1WIpbiyFlb62J3
  • branchcordova
  • cordova.app.link
  • PW4Q8885U7

Initialize Branch

• Cordova and PhoneGap
• • // sample index.js var app = { initialize: function() { this.bindEvents(); }, bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); document.addEventListener('resume', this.onDeviceResume, false); }, onDeviceReady: function() { app.branchInit(); }, onDeviceResume: function() { app.branchInit(); }, branchInit: function() { // Branch initialization Branch.initSession(function(data) { // read deep link data on click alert('Deep Link Data: ' + JSON.stringify(data)); }); } }; app.initialize();
• Ionic 1
• • // sample app.js angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if (window.StatusBar) { StatusBar.styleDefault(); } // Branch $ionicPlatform.on('deviceready', function() { branchInit(); }); $ionicPlatform.on('resume', function() { branchInit(); }); function branchInit() { // Branch initialization Branch.initSession(function(data) { // read deep link data on click alert('Deep Link Data: ' + JSON.stringify(data)); }); } }); }) // ...
• Ionic 2 and Ionic 3
• • // sample app.component.js import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar, Splashscreen } from 'ionic-native'; import { TabsPage } from '../pages/tabs/tabs'; // Branch import declare var Branch; @Component({ template: `<ion-nav [root]="rootPage"></ion-nav>` }) export class MyApp { rootPage = TabsPage; constructor(platform: Platform) { platform.ready().then(() => { StatusBar.styleDefault(); Splashscreen.hide(); branchInit(); }); platform.resume.supscribe(() => { branchInit(); }); // Branch initialization const branchInit = () => { // only on devices if (!platform.is('cordova')) { return } Branch.initSession(data => { // read deep link data on click alert('Deep Link Data: ' + JSON.stringify(data)); }); } } }

Test deep linking in iOS

• Create a deep link from the Branch Dashboard
• Delete the app from the device
• Compile the app (cordova run ios)
• Paste deep link in Apple Notes
• Long press on the deep link (not 3D Touch)
• Click Open in "APP_NAME" to open the app (example)

Test deep linking in Android

• Create a deep link from the Branch Dashboard
• Delete the app from the device
• Compile the app (cordova run android)
• Paste deep link in Google Hangouts
• Click on the deep link to open the app

More information and next steps

• Branch Cordova SDK Documentation
• Branch Documentation
• Branch Support