TWA での AppsFlyer の使用

アプリ内イベントは、ネイティブアプリアクティビティの AppsFlyer SDK を使用して送信されます。TWA はネイティブアクティビティではなくウェブベースであるため、AppsFlyer SDK を使用してアプリ内イベントを送信することはできません。代わりに、サーバー間アプリ内イベント を使用できます。以下の手順に従って、TWA を使用してサーバー間イベントを送信します。

前提条件：

TWA から AppsFlyer へのイベントの送信を開始する前に、次の手順を実行します。

1. 次のリポジトリをプロジェクトレベルの gradle ファイルに追加します。
   

   maven { url "https://jitpack.io"}

2. 次のライブラリを追加します。
   • android.support ライブラリ：
     • build.gradle に以下を追加します。
       implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:91b4a1270b'
     • 次のライブラリをインポートします。

       import android.support.customtabs.CustomTabsClient;
       import android.support.customtabs.CustomTabsIntent;
       import android.support.customtabs.CustomTabsServiceConnection;
       import android.support.customtabs.CustomTabsSession;
       import android.support.customtabs.trusted.TrustedWebActivityIntentBuilder;
       import static android.support.customtabs.TrustedWebUtils.EXTRA_LAUNCH_AS_TRUSTED_WEB_ACTIVITY

   • androidX ライブラリの場合：
     • build.gradle に以下を追加します。
       

       implementation 'com.github.GoogleChrome:android-browser-helper:ff8dfc4ed3'

     • 次のライブラリをインポートします。

       import androidx.browser.customtabs.CustomTabsClient;
       import androidx.browser.customtabs.CustomTabsIntent;
       import androidx.browser.customtabs.CustomTabsServiceConnection;
       import androidx.browser.customtabs.CustomTabsSession;
       import androidx.browser.trusted.TrustedWebActivityIntentBuilder;
       

AppsFlyer ID の取得

サーバー間イベントを送信するには、AppsFlyer ID が必要です。AppsFlyer ID は、AppsFlyer Android SDK から取得できます。 

まず、AppsFlyer Android SDK を統合してください。その後、次の SDK API を使用して AppsFlyer ID を取得できます。

String appsflyerId = AppsFlyerLib.getInstance().getAppsFlyerUID(this);

AppsFlyer ID を TWA に送信する

AppsFlyer ID は、次のいずれかの方法で送信できます。

private void launchTwa(String cuid, String af_id) {

    CustomTabsServiceConnection customTabsServiceonnection = new CustomTabsServiceConnection() {

        @Override
        public void onCustomTabsServiceConnected(ComponentName name, CustomTabsClient client) {
            Log.d(LOG_TAG, "onCustomTabsServiceConnected");

            // Setting up CustomTabsSession that is used to build an intent
            mClient = client;
            CustomTabsSession session = mClient.newSession(null);

            // Creating the intent to launch TWA using URL with query params that can be read by the Web App
            TrustedWebActivityIntentBuilder twaIntentBuilder = new TrustedWebActivityIntentBuilder(Uri.parse(defaultUri + "?cuid=" + cuid + "&appsflyer_id=" + af_id));
            Intent twaIntent = twaIntentBuilder.build(session);

            startActivity(twaIntent);
        }

        @Override
        public void onServiceDisconnected(ComponentName name) {
            Log.d(LOG_TAG, "onCustomTabsServiceDisconnected");
        }
    };

    CustomTabsClient.bindCustomTabsService(getApplicationContext(), "com.android.chrome", customTabsServiceonnection);
}

let url = new URL(document.location.href);
    let appsflyerID;
url.searchParams.forEach((value, key) => {
    if(key === 'appsflyer_id') {
    	appsflyerID = value;
    }
})

private void launchTwa(String cuid, String af_id) { 
        CustomTabsServiceConnection customTabsServiceonnection = new CustomTabsServiceConnection() {

        @Override
        public void onCustomTabsServiceConnected(ComponentName name, CustomTabsClient client) {
            Log.d(LOG_TAG, "onCustomTabsServiceConnected");

            // Setting up CustomTabsSession that is used to build an intent
            mClient = client;
            CustomTabsSession session = mClient.newSession(null);

            // Creating the intent to launch TWA using URL with query params that can be read by the Web App
            TrustedWebActivityIntentBuilder twaIntentBuilder = new TrustedWebActivityIntentBuilder(Uri.parse(defaultUri);
            Intent twaIntent = twaIntentBuilder.build(session);

            // Passing additional custom headers to the intent so they can be read by the Web App
            Bundle customHeaders = new Bundle();
            customHeaders.putString("twa_params", "cuid=" + cuid + "&=appsflyer_id" + af_id");
            twaIntent.putExtra(Browser.EXTRA_HEADERS, customHeaders);
            startActivity(twaIntent);
        }

        @Override
        public void onServiceDisconnected(ComponentName name) {
            Log.d(LOG_TAG, "onCustomTabsServiceDisconnected");
        }
    };

    CustomTabsClient.bindCustomTabsService(getApplicationContext(), "com.android.chrome", customTabsServiceonnection);
}

// get the conversion data cookie 
// function taken from https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null;
}

// get the cookie
var conversionData = JSON.parse(getCookie('appsflyer_id'));
console.log(appsflyer_id);

アプリ内イベントの送信

アプリ内イベントを送信するには、サーバーにイベントデータを送信し、サーバーから AppsFlyer にイベントを送信する必要があります。アプリ内イベントを送信するには、他にもいくつか前提条件があります。

• SDK dev key - 重要！SDK dev キーはセンシティブな値であり、TWA には存在してはいけません。TWA を使用し、サーバー間アプリ内イベントを送信する場合は、SDK dev キーを常にサーバー側で安全に保存します。
• App ID - Android Manifest.xml に表示されるアプリID。

これら3つのパラメーター(AppsFlyer ID、SDK dev key、アプリID) を取得したら、アプリ内イベントを送信できます。ウェブアクティビティでイベントが発生するたびに、このイベントを処理するためのリクエストをウェブサーバーに送信する必要があります。ウェブサーバは、イベントに関連するデータを取得し、イベントを作成して AppsFlyer に送信します。

サーバー間アプリ内イベントの送信方法の例については、こちら を参照してください。

AppsFlyer SDK では、次の2つの API を使用してコンバージョンデータを提供します。

• コンバージョンデータを取得 - インストール後にアプリを初めて起動したとき、およびその後のアプリ起動時に呼び出されます。
• アプリ起動時のアトリビューション - アプリケーションが OneLink を使用してディープリンクされている場合に呼び出されます。

コンバージョンデータを使用して、ウェブコンテンツをカスタマイズできます。

コンバージョンデータの TWA への送信

上記のいずれかの方法でコンバージョンデータを取得したら、ウェブサーバーに送信できます。そのためには、カスタムヘッダーを使用します。

private void launchTwa(Map<String, String> conversionData, String cuid, String af_id) { 
        CustomTabsServiceConnection customTabsServiceonnection = new CustomTabsServiceConnection() {

        @Override
        public void onCustomTabsServiceConnected(ComponentName name, CustomTabsClient client) {
            Log.d(LOG_TAG, "onCustomTabsServiceConnected");

            // Setting up CustomTabsSession that is used to build an intent
            mClient = client;
            CustomTabsSession session = mClient.newSession(null);

            // Creating the intent to launch TWA using URL with query params that can be read by the Web App
            TrustedWebActivityIntentBuilder twaIntentBuilder = new TrustedWebActivityIntentBuilder(Uri.parse(defaultUri);
            Intent twaIntent = twaIntentBuilder.build(session);

            // Passing additional custom headers to the intent so they can be read by the Web App
            Bundle customHeaders = new Bundle();
            customHeaders.putString("twa_params", "cuid=" + cuid + "&=" + af_id");
            customHeaders.putString("conversion_data", conversionData);
            twaIntent.putExtra(Browser.EXTRA_HEADERS, customHeaders);
            startActivity(twaIntent);
        }

        @Override
        public void onServiceDisconnected(ComponentName name) {
            Log.d(LOG_TAG, "onCustomTabsServiceDisconnected");
        }
    };

    CustomTabsClient.bindCustomTabsService(getApplicationContext(), "com.android.chrome", customTabsServiceonnection);
}

クライアント側からのコンバージョンデータの取り出し

JavaScript は、デベロッパーがヘッダにアクセスできるようにする API を提供しません。したがって、サーバーは、コンバージョンデータを Cookie としてウェブアクティビティに戻す必要があります。サーバーは、コンバージョンデータを含むカスタムヘッダーを取得し、データを解析して、Cookie としてウェブページに送信します。

ページがロードされると、JavaScript スニペットが設定され、コンバージョンデータ cookie を取得し、それに応じてコンテンツがカスタマイズされます。例えば、ユーザーが航空券のお得なキャンペーンからアプリをインストールした場合、キャンペーンが宣伝するセールに関連するコンテンツをウェブアクティビティに入力できます。

// get the conversion data cookie 
// function taken from https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null;
}

// get the cookie
var conversionData = JSON.parse(getCookie('conversion_data'));
console.log(conversionData);
/*
conversion data example:
{ 
        campaign: "CAMPAIGN_NAME", // "None" if not specified on the link
        media_source: "MEDIA_SOURCE", //"None" if not specified on the link     
        cost_cents_USD : "0",
        is_first_launch: true,
        install_time: "2018-12-30 23:59:39.330",
        orig_cost: "0.0",
        af_click_lookback: "7d",
        click_time: "2018-12-30 23:59:09",
        cost_cents_USD: "0",
        af_status: "Non-organic"
}
*/

コンバージョンデータの使用例の詳細については、こちらを参照してください。

他の Android アプリと同様に、AppsFlyer SDK をアプリと統合してインストールを測定し、コンバージョンデータを取得することができます。

インストールを測定するには、ここでの指示に従って SDK を統合するだけです。 

ユーザーにアプリのインストールを求めるキャンペーンに従って、ウェブコンテンツをカスタマイズできます。例えば、ユーザーがウェブストアの製品を20%割引で購入できるキャンペーンからアプリをインストールするとします。アプリがウェブアクティビティを開いたらすぐに、コンバージョンデータを取得して割引を適用できます。

ウェブコンテンツをカスタマイズするためのコンバージョンデータの使用方法については、こちら を参照してください。

PWA は、本質的にウェブ活動である TWA を利用します。 TWA はネイティブアクティビティではなくウェブベースであるため、AppsFlyer SDK を使用してアプリ内イベントを送信することはできません。別の方法として、サーバー間アプリ内イベントを使用できます。

PWA のアプリ内イベントの送信方法については、こちら の指示に従ってください。