見出し画像

アプリインストール直後のUXを向上させる！AppsFlyerを使ったDeferred Deep Link

小笠原 京平 🐾 Tsun Inc.

こんにちは！
株式会社Caratでロボキャリアアドバイザーアプリ「GLIT」のフロントエンド開発を担当している小笠原です。

早速ですがDeferred Deep Link (ディファードディープリンク)という機能をご存知でしょうか？
ディープリンクには馴染みがあってもDeferred Deep Linkは初めて聞くという方もいるかと思います。
今回GLITアプリにDeferred Deep Linkを実装したので、Deferred Deep Linkの概要とReact NativeアプリでAppsFlyerを使った実装方法をご紹介します！

ディープリンクとDeferred Deep Linkの違い

ディープリンクとは

Deferred Deep Linkの説明の前にまずディープリンクとはなんでしょうか？
ディープリンクとは「ユーザーをアプリ内コンテンツへ遷移させるリンク」のことで、一般的にウェブページやEメールのリンク、別のモバイルアプリなどから遷移することが多いです。
ディープリンク例:

  1. iPhoneのSafariでウェブサイトを閲覧中にTwitterのリンクをタップ

  2. Twitterアプリでリンク先のコンテンツが開く(※ Twitterアプリをインストール済みの場合)

Deferred Deep Linkとは

対してDeferred Deep Linkもディープリンクの一種であり、「ユーザーをアプリ内コンテンツへ遷移させるリンク」は同じですが、アプリインストール前であっても動作するところが異なります。
これはどういうことかと言うと上記のディープリンク例にあるように、ディープリンクはアプリがインストール済みの場合、ユーザーを誘導できるのですが、アプリがインストールされていない場合、アプリストアへ遷移させることしかできません。
しかしDeferred Deep Linkを使えば、アプリのインストール後にアプリを起動したタイミングでユーザーを任意のアプリ内コンテンツに遷移させることが可能です。
今回GLITで行ったDeferred Deep Link例:

  1. iPhoneのSafariでGLIT Web版の求人ページを閲覧

  2. 求人ページのバナーからアプリをインストール

  3. アプリを起動し、オンボーディングが完了するとWebで閲覧していた求人ページに遷移

AppsFlyerとは

AppsFlyerロゴ

AppsFlyerはモバイルアプリ広告の効果計測及び最適化のためのツールです。
イスラエル発の企業が開発しており、世界最大のマーケットシェアを持っています。
日本語にも対応していて日本のサービスにも導入しやすいです。

AppsFlyerを使ったDeferred Deep Linkの実装

前提条件

  • React Nativeアプリがある

  • AppsFlyerプラグインが導入されている

AppsFlyerプラグインの導入方法を知りたい方はこちらを参照してください。
https://support.appsflyer.com/hc/ja/articles/217108646-React-Nativeプラグインの概要

Deferred Deep Linkの構造

Deferred Deep Linkは下記の構造によって実現されます。

  1. カスタムアトリビューションリンクのパラメータと値をカスタムリンクに含める

    • deep_link_value

    • [任意] deep_link_sub1

  2. ユーザーがカスタムリンクをクリックすると、AppsFlyerにパラメータの値が送られる

  3. ユーザーがアプリを起動時に上記のパラメータを取得する

  4. 取得したパラメータに応じてアプリ内のコンテンツに遷移させる

データ構成を決める

まずはカスタムアトリビューションリンクのパラメータの値を決めましょう。
起動時にどのようなハンドリングをしたいかでdeep_link_valueに入れる値を決めます。
deep_link_valueだけでは足りない場合、deep_link_sub1、deep_link_sub2といったパラメータも使うことができます。

アプリ内でコンバージョンデータを取得する

アプリ起動時にAppsFlyer SDKを用いて上記のパラメータの値を取得します。
下記のようにonInstallConversionData関数を実装することでdeep_link_value等の値を取得できます。

const onInstallConversionDataCanceller = appsFlyer.onInstallConversionData(
  (res) => {
    const isFirstLaunch = res?.data?.is_first_launch;

    if (isFirstLaunch && JSON.parse(isFirstLaunch) === true) {
      const deep_link_value = res.data.deep_link_value;
      alert(`This is first launch and deep_link_value is ${deep_link_value}`);
    } else {
      alert('This is not first launch');
    }
  }
);

appsFlyer.initSdk(/*...*/);

取得したコンバージョンデータを元に特定のコンテンツを表示する等のハンドリングを追加します。

開発環境でテストする

エミュレータでDeferred Deep Linkの挙動をテストする場合は、下記のようにすればOKです。

  1. 開発用のカスタムリンクを作成する

  2. エミュレータを起動し、開発用のカスタムリンクをクリック

  3. App ID (iOSはbundle identifier、Androidはapplication id)を1で設定したものに合わせてアプリをビルド

  4. 3でビルドしたアプリを起動

  5. onInstallConversionDataでパラメータが取得できているか確認

まとめ

今回はDeferred Deep Linkの概要とReact NativeでAppsFlyerを使って実装する方法をご紹介しました。
参考になりましたらぜひスキとフォローお願いします！
Caratでは下記職種の採用活動も行っているので、ご興味あれば気軽にDM等でご連絡ください。


この記事が気に入ったらサポートをしてみませんか？