Android Deep Linking with Branch

Hello guys! welcome back to my blog yang kali ini akan membahas sebuah third-party yang menyediakan jasa Deep Linking untuk aplikasi salah satunya di ber-platform android.

Oh ya, bagi yang belum tau Deep Linking itu apa langsung cek di sini aja ya!

Oke, mari diperjelas mengenai deep linking yang akan kita bahas nanti. Simak gambar berikut :

Source : https://blog.branch.io/uri-schemes-and-universal-links-for-ios/

Seperti yang nampak pada gambar diatas, saat pengguna membuka sebuah link (sebagai case kali ini sebut saja http://gibby.id/items/29) dimana items/29 ini mewakili sebuah item dengan id = 29, sebut saja "Item A" dan saat dibuka oleh smartphone itu, jika app sudah terinstall akan membuka applikasi Gibby dan membuka activity yang telah diset untuk menampilkan item berdasarkan id yang tadi diambil yaitu 29. Akan tetapi, apabila app Gibby belum terinstall, maka link tersebut akan membuka halaman Gibby di playstore untuk android atau appstore untuk iOS.

Singkatnya, dengan teknologi ini kita dapat men-generate sebuah link yang nantinya akan di-share di berbagai media berikut dengan data-data yang telah kita sisipkan sehingga informasi dapat diterima dengan baik sebagaimana mestinya.

Oke bagi yang masih bingung dan gw sendiri bingung gimana lebih menjelaskannya langsung demo aja yuk!

1. Registrasi di web-nya Branch : https://dashboard.branch.io/
2. Buat app baru di dashboard-nya :

3. Masuk ke menu Link Settings, kemudian masukkan Android URI Scheme, Play Store URL dan package name app-nya yang nantinya saat link itu dibuka, jika dibuka menggunakan android, maka android tersebut akan mengecek apakah app-nya sudah terinstall, jika sudah terinstall maka akan membuka app-nya sesuai dengan package name yang dimasukkan, dan jika belum terinstall, maka android akan membuka play store sesuai dengan link play store yang telah dimasukkan. Cek gambar berikut :

4. Scroll ke bawah sampai di bagian Link Domain, di sini domain link yang akan di-share nantinya dapat diganti dengan domain yang diinginkan :

5. Setelah semuanya dicek ulang dan telah selesai, jangan lupa tekan tombol Save paling bawah ya!

6. Selanjutnya, buka menu Set up SDK. Di sini kita bisa mengecek kembali informasi app yang telah kita masukkan tadi. Nah, setelah semuanya sesuai dengan yang diinginkan, lanjut ke install sdk melalui gradle seperti di gambar berikut ya :

7. Kemudian masukkan beberapa line konfigurasi Manifest.xml nya seperti yang di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="io.branch.branchandroiddemo"
    android:versionCode="1"
    android:versionName="1.0">

    <application
        android:allowBackup="true"

        android:name="io.branch.referral.BranchApp"









android:icon="@drawable/ic_launcher"
        android:label="@string/app_name">

        <activity
            android:name=".SplashActivity
            android:label="Splash Screen"


            android:launchMode="singleTask"









android:screenOrientation="portrait">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
    


            <!-- Branch URI scheme -->
            <intent-filter>
                <data android:scheme="gibby" android:host="open" />
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
            </intent-filter>

            <!-- Branch App Links -->
            <intent-filter android:autoVerify="true">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="https" android:host="gibby.app.link" />
            </intent-filter>









</activity>
    


        <!-- Branch init -->
        <meta-data android:name="io.branch.sdk.BranchKey" android:value="key_live_p**" />
        <meta-data android:name="io.branch.sdk.BranchKey.test" android:value="key_test_m**" />

        <!-- Branch testing (TestMode "true" to simulate fresh installs on dev environment) -->
        <meta-data android:name="io.branch.sdk.TestMode" android:value="false" />










        <!-- Branch install referrer tracking -->
        <receiver android:name="io.branch.referral.InstallListener" android:exported="true">
            <intent-filter>
              <action android:name="com.android.vending.INSTALL_REFERRER" />
            </intent-filter>
        </receiver>









</application>
</manifest>

8. Setelah konfigurasi selesai, inisiasi Branch SDK nya di Activity dan Application context seperti di bawah ini ya :

@Override
public void onStart() {
    super.onStart();
    Branch branch = Branch.getInstance();

    // Branch init
    branch.initSession(new Branch.BranchReferralInitListener() {
        @Override
        public void onInitFinished(JSONObject referringParams, BranchError error) {
            if (error == null) {
                // params are the deep linked params associated with the link 
                // that the user clicked -> was re-directed to this app
                // params will be empty if no data found
                // ... insert custom logic here ...
                Log.i("BRANCH SDK", referringParams.toString());
            } else {
                Log.i("BRANCH SDK", error.getMessage());
            }
        }
    }, this.getIntent().getData(), this);
}

@Override
public void onNewIntent(Intent intent) {
    this.setIntent(intent);
}

public final class CustomApplicationClass extends Application {
    @Override
    public void onCreate() {
        super.onCreate();


        // Initialize the Branch object
        Branch.getAutoInstance(this);









}
}

Nah, dalam JSONObject referringParams ini kita membaca payload yang telah kita sisipkan nanti saat generate deep link yang bakal di-share nantinya. Di fungsi onInitFinished ini kita bisa memberikan logic untuk redirect screen dan yang lainnya saat payload itu diterima. Sebagai contoh sederhana kita ambil sebuah aplikasi kontak pada umumnya, kemudian kita ingin men-share si kontak ini sebut saja namanya Dul dengan nomor 081234567890 dan memiliki foto selfie nya juga dong. Nah, di sini kita punya 3 field, yaitu Nama, Nomor, dan Foto dalam bentuk url. Ketiga field ini akan kita sisipkan atau bahasa kerennya embed ke sebuah deep link yang akan di-generate dan di-share nantinya. Dan sesuai ekspektasi kita yaitu link yang dibuka orang tersebut akan terbuka di app kontak yang telah kita define sebelumnya dan me-redirect ke screen kontak detail tentunya, di mana screen tersebut menampilkan informasi Nama, Nomor, dan Foto yang telah kita sisipkan sebelumnya.

9. Terakhir nih, cara generate link nya seperti ini ya :

BranchUniversalObject buo = new BranchUniversalObject()
    .setCanonicalIdentifier("content/12345")
    .setTitle("My Content Title")
    .setContentDescription("My Content Description")
    .setContentImageUrl("https://lorempixel.com/400/400")
    .setContentIndexingMode(BranchUniversalObject.CONTENT_INDEX_MODE.PUBLIC)
    .setLocalIndexMode(BranchUniversalObject.CONTENT_INDEX_MODE.PUBLIC)
    .setContentMetadata(new ContentMetadata().addCustomMetadata("key1", "value1"));

Di BranchUniversalObject kita bisa men-define Title, ContentDescription, ContentImageUrl, IndexingMode, IndexMode, dan ContentMetaData. Nah, yang perlu diperhatikan di sini yaitu :
- Title : ini yang akan menjadi judul / headline / teks yang di-bold di link preview nanti.
- ContentDescription : deskripsi konten yang akan muncul di link preview nanti.
- ContentImageUrl : gambar yang akan muncul di link preview nanti.
- ContentMetaData : payload yang akan diterima saat poin 8 tadi yang kemudian akan kita parsing melalui JSONObject referringParams yang telah disebutkan tadi.

Setelah BranchUniversalObject selesai kita define, kemudian kita define LinkProperties seperti berikut ya :

LinkProperties lp = new LinkProperties()
    .setChannel("facebook")
    .setFeature("sharing")
    .setCampaign("content 123 launch")
    .setStage("new user")
    .addControlParameter("$desktop_url", "http://example.com/home")
    .addControlParameter("custom", "data")
    .addControlParameter("custom_random", Long.toString(Calendar.getInstance().getTimeInMillis()));

buo.generateShortUrl(this, lp, new Branch.BranchLinkCreateListener() {
    @Override
    public void onLinkCreate(String url, BranchError error) {
        if (error == null) {
            Log.i("BRANCH SDK", "got my Branch link to share: " + url);
        }
    }
});

Di LinkProperties ini terdapat parameter yang harus di-define untuk keperluan analytics app kita dari sisi link yang bakalan di-generate nanti yang dapat diakses di menu Channels & Links pada Dashboard Branch.

Nah, pada fungsi generateShortUrl ini nanti kita bakalan dapet link yang telah kita sisipkan beberapa payload dan dapat kita share nantinya. Setelah Branch men-generate link hasil dari BranchUniversalObject yang telah kita define tadi bisa diambil dari fungsi listener onLinkCreate dengan parameter String url ini.

Lebih mudah lagi, Branch menyediakan fitur SharingSheet. Di mana fitur ini memudahkan kita sebagai developer tentunya untuk membuka beberapa app populer untuk berbagi seperti Gmail, WhatsApp, Facebook, Twitter, dan yang lainnya dengan menggunakan code berikut :

LinkProperties lp = new LinkProperties()
    .setChannel("facebook")
    .setFeature("sharing")
    .setCampaign("content 123 launch")
    .setStage("new user")
    .addControlParameter("$desktop_url", "http://example.com/home")
    .addControlParameter("custom", "data")
    .addControlParameter("custom_random", Long.toString(Calendar.getInstance().getTimeInMillis()));

ShareSheetStyle ss = new ShareSheetStyle(MainActivity.this, "Check this out!", "This stuff is awesome: ")
    .setCopyUrlStyle(ContextCompat.getDrawable(this, android.R.drawable.ic_menu_send), "Copy", "Added to clipboard")
    .setMoreOptionStyle(ContextCompat.getDrawable(this, android.R.drawable.ic_menu_search), "Show more")
    .addPreferredSharingOption(SharingHelper.SHARE_WITH.FACEBOOK)
    .addPreferredSharingOption(SharingHelper.SHARE_WITH.EMAIL)
    .addPreferredSharingOption(SharingHelper.SHARE_WITH.MESSAGE)
    .addPreferredSharingOption(SharingHelper.SHARE_WITH.HANGOUT)
    .setAsFullWidthStyle(true)
    .setSharingTitle("Share With");

buo.showShareSheet(this, lp,  ss,  new Branch.BranchLinkShareListener() {
    @Override
    public void onShareLinkDialogLaunched() {
    }
    @Override
    public void onShareLinkDialogDismissed() {
    }
    @Override
    public void onLinkShareResponse(String sharedLink, String sharedChannel, BranchError error) {
    }
    @Override
    public void onChannelSelected(String channelName) {
    }
});

Gak terlalu susah kan? Sederhananya dengan Branch ini kita sebagai developer bisa lebih fokus ke konten yang akan di-share, karena urusan bagaimana sharing itu terjadi, siapa aja yang ngebuka linknya, darimana user mendapatkan linknya, dan analytics lainnya cukup Branch aja yang tangani.

Oke guys, sekian dulu blog dari gw dan mohon maaf bila ada tutur kata yang tidak dapat dipahami mauapun kurang berkenan. Atas perhatiannya gw ucapin makasih banyak ya.

Oh ya untuk lengkap mengenai dokumentasinya bisa dicek di sini ya. Sampai ketemu di blog gw lainnya. See ya!

Reference :
https://branch.io
https://dashboard.branch.io
https://blog.branch.io
https://docs.branch.io