モバイルウェブ アプリ ユーザーをネイティブ アプリ ユーザーに変える

たとえば、素晴らしいネイティブ アプリに加え、手間をかけて優れたモバイル ウェブサイトを構築したのに、そのウェブサイトよりもネイティブ アプリでのコンバージョン率のほうが高いことに気付いたとします。この場合、アプリをダウンロードするようにモバイルウェブ ユーザーを誘導すると、ビジネスの成長につながる可能性があります。ユーザーを誘導するのは難しい課題となりがちですが、Dynamic Links を利用すれば簡単です。ほんのわずかなコードを使用するだけで、ユーザーがモバイルウェブでリンクをクリックするとアプリ内の対応するページにリダイレクトする機能を追加できます。ユーザーがまだアプリをインストールしていない場合は、そのページを表示するために App Store または Google Play ストアにアクセスしてアプリをインストールすることになります。

主な利点

  • ユーザーにとって可能な限り簡単な方法で、モバイルウェブ ユーザーをネイティブ アプリのユーザーに転換することができます。
  • ユーザーはサイトで閲覧していたコンテンツと同じものをアプリで見られるようになります。
  • 必要となるインテグレーションはほんのわずかです。

以下の手順に従って、この機能を導入してください。

始める前に

アプリのコンテンツをディープリンク可能にする

モバイルウェブ ユーザーをネイティブ アプリのユーザーに転換させるための鍵は、ユーザーがアプリを開いたときに、ウェブで閲覧しているコンテンツと同じものが表示されるようにすることです。したがって、モバイルウェブ ユーザーをアプリに転換させるには、その前に、アプリでコンテンツへのディープリンクを受信できるようにする必要があります。

iOS ユニバーサル リンクまたは Android アプリリンクを実装している場合、この作業は完了しているはずです。まだ完了していない場合は、ウェブサイトから URL を取り込んで、アプリ内で対応するコンテンツをユーザーに表示するためのロジックをアプリに追加します。

新しい Firebase プロジェクトを設定し、アプリに Dynamic Links SDK をインストールします（iOS、Android、C++、Unity）。Dynamic Links SDK をインストールすると、ユーザーがアプリをインストールした後、ダイナミック リンクに関するデータを Firebase からアプリに渡せるようになります。アプリをインストールする前のクリック操作を、アプリをインストールした後のユーザーにつなげる方法は、この SDK を使用する以外にありません。

次は、ウェブサイトのユーザーをネイティブ アプリにリダイレクトするリンクを設定します。ユーザーがアプリをまだインストールしていないとしても心配する必要はありません。その場合には、Dynamic Links が自動的に対処します。

ウェブサイトの各ページで、ダイナミック リンクを動的に生成します。すでにコンテンツはディープリンク可能になっているので、link パラメータには単純にそのコンテンツを含むページの URL を指定できます。

このようなリンクの例を以下に示します。

<a href="https://example.page.link/?link=https://www.example.com/content?item%3D1234&apn=com.example.android&ibi=com.example.ios">Open this page in our app!</a>

ユーザーがデバイスでこのリンクを開く際に、apn パラメータ（Android の場合）または ibi パラメータ（iOS の場合）で指定されたアプリがデバイスにインストールされていない場合には、アプリをインストールするため Google Play ストアか App Store にリダイレクトされます。アプリをインストールするとアプリが開き、link パラメータで指定された URL がアプリに渡されます。

アプリ内でリンク先コンテンツを開く

次に、アプリに渡されたリンクを受け取って、そのリンク先コンテンツを開く必要があります。Dynamic Links SDK を使用すれば、簡単にリンクを受信できます。

iOS

iOS の場合、ダイナミック リンクを受信するには application:continueUserActivity:restorationHandler: メソッドを実装します。復元ハンドラ内で handleUniversalLink:completion: を呼び出すことで、ダイナミック リンクを取得できます。ダイナミック リンクがアプリに渡されている場合は、FIRDynamicLink の url プロパティから取得できます。次に例を示します。

Objective-C

注: この Firebase プロダクトは、macOS、Mac Catalyst、tvOS、watchOS の各ターゲットでは使用できません。
[[FIRDynamicLinks dynamicLinks]
    handleUniversalLink:userActivity.webpageURL
             completion:^(FIRDynamicLink * _Nullable dynamicLink,
                          NSError * _Nullable error) {
      NSString *link = dynamicLink.url;
    }];

Swift

注: この Firebase プロダクトは、macOS、Mac Catalyst、tvOS、watchOS の各ターゲットでは使用できません。
FIRDynamicLinks.dynamicLinks()?.handleUniversalLink(userActivity.webpageURL!) { (dynamiclink, error) in
    let link = dynamiclink.url
}

また、application:openURL:options: メソッドで dynamicLinkFromCustomSchemeURL: を呼び出して、アプリに渡された Dynamic Links をカスタム スキーム URL として受信する必要があります。次に例を示します。

Objective-C

注: この Firebase プロダクトは、macOS、Mac Catalyst、tvOS、watchOS の各ターゲットでは使用できません。
FIRDynamicLink *dynamicLink = [[FIRDynamicLinks dynamicLinks] dynamicLinkFromCustomSchemeURL:url];
if (dynamicLink) {
  NSString *link = dynamicLink.url;
  // ...
  return YES;
}

Swift

注: この Firebase プロダクトは、macOS、Mac Catalyst、tvOS、watchOS の各ターゲットでは使用できません。
let dynamicLink = FIRDynamicLinks.dynamicLinks()?.dynamicLinkFromCustomSchemeURL(url)
if let dynamicLink = dynamicLink {
  let link = dynamiclink.url
  // ...
  return true
}

link パラメータの値を取得したら、リンク先コンテンツをユーザーに表示します。

Android

Android では、getDynamicLink() メソッドを使用してダイナミック リンクからデータを取得します。

Kotlin+KTX 

Firebase.dynamicLinks
        .getDynamicLink(intent)
        .addOnCompleteListener { task ->
            if (!task.isSuccessful) {
                // Handle error
                // ...
            }

            val invite = FirebaseAppInvite.getInvitation(task.result)
            if (invite != null) {
                // Handle invite
                // ...
            }
        }
MainActivity.kt

Java 

FirebaseDynamicLinks.getInstance()
        .getDynamicLink(getIntent())
        .addOnCompleteListener(new OnCompleteListener<PendingDynamicLinkData>() {
            @Override
            public void onComplete(@NonNull Task<PendingDynamicLinkData> task) {
                if (!task.isSuccessful()) {
                    // Handle error
                    // ...
                }

                FirebaseAppInvite invite = FirebaseAppInvite.getInvitation(task.getResult());
                if (invite != null) {
                    // Handle invite
                    // ...
                }
            }
        });
MainActivity.java

link パラメータの値を取得したら、リンク先コンテンツをユーザーに表示します。