ハイブリッドアプリでのアナリティクスセッションの同期方法 | リモートコマンド

概要

ハイブリッドアプリは、ネイティブコード（iOSの場合はObjective-C、Androidの場合はJavaなど）で書かれたコンポーネントと、HTMLとJavaScriptで書かれた1つ以上のWebビューコンポーネントを組み合わせたものです。一般的な使用例は、ネイティブコードのコンポーネントで商品の閲覧を行い、Webビューコンポーネントでチェックアウトや支払い処理を行うショッピングアプリです。

問題

ハイブリッドアプリのアナリティクスベンダーにとっての共通の課題は、ネイティブコンポーネントとWebビューコンポーネントの間でセッションを追跡することです。ベンダーが両方のコンポーネントに統合されていても、訪問はそれぞれに別々のセッション識別子が割り当てられ、ベンダーのレポートではセッション数が過大評価されます。

この問題を解決するためには、ネイティブコードが読み込むWebビューのURLにクエリ文字列パラメータを追加して、これらのコンポーネント間で情報を共有する必要があります。このパラメータには、ネイティブコンポーネントとWebビューコンポーネントの両方で使用される共有セッションIDが含まれます。

このセッションIDの開始と共有は、Tealium iQの構成とネイティブアプリのカスタムコードを使用して行われます。カスタムリモートコマンドタグは、非表示のWebビューとネイティブコードの間でセッションIDを共有するために使用され、それが可視なWebビューから読み込まれるウェブサイトに渡されます。

解決策

この記事では、Google Analyticsを使用した解決策を示しますが、セッション管理をサポートする他のベンダーにも適用できます。Google Analyticsの解決策では、Tealium iQ SDKでセッションID（clientId）を取得し（非表示のWebビューで生成され、リモートコマンドを介してネイティブコードに渡される）、クエリ文字列パラメータを介してハイブリッドアプリのWebビューコンポーネントにセッションIDを渡し、Tealium iQを使用してセッションIDをWebビュー内のウェブサイトで実行されているGoogle Analyticsに戻します。この例では、主にAndroidに焦点を当てますが、iOSのプロセスも同じです。

この解決策の要件は次のとおりです。

ネイティブコード
- カスタムリモートコマンド
  ネイティブコードで定義されたカスタムコマンドで、カスタムリモートコマンドタグによって呼び出されることができます。これにより、非表示のWebビューがセッションIDをネイティブコードに渡すことができます。
- Webビューのクエリ文字列パラメータ
  セッションIDを含むクエリ文字列パラメータが、ハイブリッドアプリのWebビューコンポーネントを読み込むURLに追加されます。
モバイルアプリ用のiQプロファイル
ネイティブアプリを管理するプロファイルには、次の構成が必要です。
- カスタムリモートコマンドタグ - 非表示のWebビューとネイティブアプリコードの間の通信を容易にするタグ。
- session_id - カスタムリモートコマンドタグからネイティブコードに渡されるベンダーセッションIDを格納するUDO変数。
- JavaScriptコード拡張 - ベンダーから現在のセッションIDを取得し、それをカスタムリモートコマンドタグに渡すためのJavaScriptコード。
モバイルWeb用のiQプロファイル
ハイブリッドアプリのWebビューコンポーネントには、次のカスタマイズが必要です。
- session_id - WebビューのURLで使用されるクエリ文字列変数で、ネイティブコードからセッションIDを渡します。
- カスタムJavaScript - セッションIDをベンダータグに渡すためのJavaScriptコード（拡張またはタグテンプレート）。

この記事では、Android/iOS v5.0以降のTealiumを使用していることを前提としており、アプリを再デプロイする必要があります。

以下は、ハイブリッドアプリの各コンポーネントに対する解決策の概要です。

ハイブリッドアプリ
ネイティブコードコンポーネント		ネイティブコードがURLを読み込む際にクエリ文字列パラメータ`&session_id=SESSION`を追加します。	Webビューコンポーネント
iQモバイルプロファイル (非表示のWebビューで実行)	ネイティブコード		ウェブサイト用iQプロファイル
カスタムリモートコマンド`syncSessionId`コマンドの構成ベンダーからセッションIDを取得するJavaScriptコード拡張セッションIDを渡すための`utag.link()`の呼び出し	syncSessionIdを処理するカスタムコードセッションID変数をWebビューに渡すカスタムコード		WebビューURLのクエリ文字列変数`session_id` `session_id`のデータマッピングを持つベンダータグ

実装

リモートコマンドの追加（ネイティブコード）

addRemoteCommandメソッドを使用して、カスタムリモートコマンドタグが利用するための新しいコマンドを定義します。これにより、非表示のTealium Webビューがネイティブコード環境のTealiumライブラリにデータを渡すことができます。

Android（Javaコード）：

このコードは完全に機能しますが、このタスクを達成するためのサンプルコードです。ご自身の判断で使用し、ライブアプリにデプロイする前に必ずテストしてください。

syncSessionIdという新しいリモートコマンドを定義し、渡されたセッションIDの値をsessionIdというネイティブ変数に格納します。このコードをTealiumのinitブロックに配置します（通常、ヘルパーファイルに配置されます）：

// Tealiumの初期化
Tealium.Config config = Tealium.Config.create(application, "", "", "");
// 上記のconfigオブジェクトを使用して新しいTealiumインスタンスを作成
Tealium inst = Tealium.createInstance(TEALIUM\_INSTANCENAME, config);
// "syncSessionId"という名前の新しいRemoteCommandをTealiumに登録
inst.addRemoteCommand(new RemoteCommand("syncSessionId", "セッションIDを同期します") {
    // onInvokeはTealium iQがコマンドをトリガーしたときに呼び出されます
    @Override
    protected void onInvoke(Response response) throws Exception {
        // レスポンスオブジェクトを取得
        JSONObject resp = response.getRequestPayload();
        // レスポンスのキー"sessionId"の値をアプリケーションレベルの"gaSessionId"文字列変数に構成します
        // これは、この共有変数をApplicationクラスで作成したことを前提としています。詳細については、サンプルアプリを参照してください。
        DemoApplication.sessionId = resp.optString("sessionId", null);
    }
});

Webビューをカスタマイズして、ネイティブコードに格納されたセッション値をクエリ文字列パラメータsession_idとして追加します。以下は、Webビューが作成され、セッションIDがクエリ文字列パラメータとして渡される例です：

public class WebviewActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview);
        webview mywebview = (webview) findViewById(R.id.webview);
        mywebview.clearCache(true);
        mywebview.getSettings().setJavaScriptEnabled(true);
        mywebview.loadUrl("https://solutions.tealium.net/hosted/cpr/mobile_ga_demo.html?session_id=" + DemoApplication.sessionId);
    }
}

iOS（Objective-Cコード）

以下は、同じことをiOSで実現するために必要なObjective-Cコードの一部です。このコードにはWebビューの作成は含まれておらず、出発点として含まれています。

// インスタンス名を置き換えてください
Tealium *instanceHandle = [Tealium instanceForKey: @"tealium"]; 
[instanceHandle addRemoteCommandID:@"syncSessionId"
   description:@"セッションIDを同期します"
   targetQueue:dispatch_get_main_queue()
 // レスポンスはTealium iQで構成したマッピングから生成されます
   responseBlock:^(TEALRemoteCommandResponse * _Nonnull response) {
 // レスポンスオブジェクトからセッションIDを取得します
       NSString *session_id = response.requestPayload[@"sessionId"];
 /* セッションIDを取得したので、後でWebビューを作成する際にアクセスできる場所に保存します。詳細については、Androidのコードを参照してください */
}\];

カスタムリモートコマンドタグの追加（モバイルWeb用のiQプロファイル）

iQモバイルプロファイルでは、カスタムリモートコマンドタグを使用して、ネイティブコードで定義したリモートコマンドをトリガーします。このタグにデータマッピングを追加すると、リモートコマンドがそのデータを受け取ります。

モバイルWeb用のiQプロファイルで以下の手順に従ってください。

データレイヤーに次のUDO変数を追加します：session_id
カスタムリモートコマンドタグを追加します：
コマンドIDをsyncSessionId（ネイティブコードで定義したリモートコマンドの名前）に構成します：
session_idをsessionIdにマッピングするデータマッピングを追加します。

ベンダータグの追加（モバイルアプリ用のiQプロファイル）

モバイルアプリのiQプロファイルでは、ベンダータグ（この例ではGoogle Analytics）を使用してセッションを開始し、utag.link()を呼び出してカスタムリモートコマンドタグにセッションIDの値を渡します。おそらく、ネイティブアプリのトラッキングの目的で既にこのタグをモバイルプロファイルに追加しているでしょう（多くの人気のあるアナリティクスタグはモバイル対応しています）。

ベンダータグを追加して構成する手順は次のとおりです。

ベンダータグを追加します（まだ追加していない場合）。

ベンダータグ（Google Analyticsの場合）にスコープが構成されたJavaScriptコード拡張を追加します。以下はその内容です。UIDをカスタムリモートコマンドタグのUIDに置き換えてください。

window.setTimeout(function() {
     // ベンダー固有: Google AnalyticsからセッションIDを取得
     var tracker = window.ga.getByName('tealium_0'); // ページ上にGAトラッカーが1つしかないことを前提としています
     var clientId = tracker.get('clientId');
     // カスタムリモートコマンドがトリガーされるトラッキングコール
     utag.link({session_id : clientId}, null, ['UID'])
}, 1000);

この拡張は1秒待機してタグが十分に読み込まれるのを待ち、ベンダーからセッションIDを取得します。その後、utag.link()を呼び出してカスタムリモートコマンドタグをトリガーし、パラメータとしてsession_idを渡します。その後、カスタムリモートコマンドタグはそのデータをリモートコマンドsyncSessionIdに渡し、ネイティブコードでそれを後で使用するために保存します。

ベンダータグの追加（モバイルWeb用のiQプロファイル）

ハイブリッドアプリのWebビューコンポーネントで読み込まれるウェブサイト用のiQ Webプロファイル（Webプロファイル）では、セッションIDに使用されるクエリ文字列パラメータを検出し、その変数をベンダータグにマッピングします。

セッションIDを同期するためにベンダータグを構成する手順は次のとおりです。

ベンダータグを追加します（まだ追加していない場合）。
クエリ文字列パラメータのタイプであるsession_idという名前の新しいデータレイヤー変数を追加します。
ベンダータグで、session_idをclientIdにマッピングします（Google Analyticsの場合）。

以上で完了です。上記の手順に従った場合、アプリのWebビューはネイティブアプリと同じセッション識別子を受け取り、ユーザーはGoogle Analyticsの観点からは単一のセッションを使用することになります。

結果の検証

上記のコードをデプロイした後、Charles ProxyやFiddlerなどのローカルプロキシを使用して、アプリの出力を表示できます。www.google-analytics.comへの送信ヒットを検査すると、ネイティブアプリからのヒットとWebビューコンポーネントからのヒットでcidパラメータが同じであることを確認できます。

詳細については、モバイルインストールのトラブルシューティングを参照してください。

ネイティブアプリからの共有セッションID：

インアプリのWebビューからの共有セッションID：

Android Studioプロジェクトとしてサンプルアプリをダウンロード：GAwebviewDemo.zip。

その他の解決策

このガイドでは、Google AnalyticsのセッションIDを同期する方法について説明しましたが、同じ手順をWebtrends、Webtrekk、Adobe Analyticsなどの他のベンダーにも簡単に適用できます。ベンダーによっては、セッションIDを提供するAPIがない場合、クッキーの値を読み取る必要があるかもしれません。

この記事で文書化された解決策は、アナリティクスツールの範囲外でアプリに他の情報を渡すためにも使用できます。カスタムリモートコマンドタグにさらにマッピングを追加することで、1回の呼び出しで複数のパラメータを渡すことも可能ですが、レスポンスオブジェクトで追加のパラメータを処理するためにネイティブリモートコマンドコードを適応する必要があります。