Adobe Analytics でAppからWebViewに遷移した際に同一Sessionで計測する方法

# はじめに
アプリとWebの両方を展開してユーザーへサービスを届ける機会は増えていますが、アプリからWebページへ遷移する際、そこでセッションが途切れてしまうと分析がし難くなってしまいます。

**Adobe Experience Platform Mobile SDK** では異なる環境への遷移時にセッションが途切れないよう、計測用IDを引き継ぐURLパラメータ付与機能を提供しています。
この記事ではこの機能の実装方法、及び実装した後の引き継ぎ状態の確認方法についてご紹介いたします。

:::note info
本記事は投稿時点の情報に基づいて掲載しています。とくに <storng>Adobe Analytics</strong> に関する情報に関しては、その後の機能アップデート等によっては内容が変更となっている場合がありますのでご了承ください。
:::

# 前提
* **Project Griffon** に登録済みであること
* アプリ、Webの双方に **Adobe Analytics** を設定済みであること

:::note info
アプリ計測の確認には <strong>Project Griffon</strong> を利用します。記事作成現在(2021/12)ベータ版であり導入に際して申請が必要となります。とても便利なツールですので、ぜひご活用ください。
詳しくは以下をご参照ください。
<a href="https://aep-sdks.gitbook.io/docs/beta/project-griffon">https://aep-sdks.gitbook.io/docs/beta/project-griffon</a>
:::

# 環境
こちらの記事は以下の環境で実行しています。

### Web側
|名称|バージョン|
|---|---|
|Adobe Analytics (Tags Extension)|v1.8.7|
|Experience Cloud ID Service (Tags Extension)|v5.2.0|
この他、ID引き継ぎの検証にパケットキャプチャソフト(Charles)を使用しています。

### モバイル側
|名称|バージョン|
|---|---|
|Xcode Version|13.0|
|iOS (iOS Simulator)|15.0|
|ACPCore (iOS SDK)|v2.9.4|
|AEPAssurance (iOS SDK)|v1.1.3|
|ACPAnalytics (iOS SDK)|v2.5.1|
iOS(Swift)の環境でご紹介していますが、ヘルプの方ではAndroid、React Native、Unityなどの他環境のサンプルもありますので、こちらもご参照ください。

https://aep-sdks.gitbook.io/docs/foundation-extensions/mobile-core/identity/identity-api-reference

# 実装
実装には以下の対応を行います。

1. **appendToURL** を実装する(モバイル対応)
1. **overwriteCrossDomainMCIDAndAID** の設定を行う(Web対応)

## 1. appendToURL を実装する(モバイル対応)
アプリからのWebへの遷移時には **appendToURL** を使用し、URLパラメータとしてIDを引き継ぐように実装します。

```swift
//`goToWeb`を押した際に`SFSafariViewController`を使ってWebView表示を行うサンプル
@IBAction func goToWeb(_ sender: Any) {
    let url = "https://example.com" // 遷移先URL
    ACPIdentity.append(to:URL(string: url), withCallback: {(appendedURL) in
        // handle the appended url here
        if let appendedURL = appendedURL {
            // APIs which update the UI must be called from main thread
            DispatchQueue.main.async {
                // WebView（SFSafariView）
                self.present(SFSafariViewController(url: appendedURL), animated: true, completion: nil)
            }
        } else {
            // handle error, nil appendedURL
        }
    });
}
```
:::note warn
（iOSの場合）<strong>appendToURL</strong>　のコールバックとしてURLが渡されるため、WebViewの表示には　<strong>DispatchQueue.main.async</strong>　を利用してメインスレッドで呼び出す必要がありますのでご注意ください。
:::

他言語での実装サンプルや詳しい情報はこちらをご参照下さい。
[appendToURL / appendVisitorInfoForURL](https://aep-sdks.gitbook.io/docs/foundation-extensions/mobile-core/identity/identity-api-reference#appendtourl-appendvisitorinfoforurl)

## 2. overwriteCrossDomainMCIDAndAID の設定を行う(Web対応)
アプリ側の対応でIDの引き渡しURLの発行は行われますが、Web側でのID受け入れ（上書き）設定も必要です。
**Data Collection Tags** (旧Launch)で**IDサービス**のExtension **Experience Cloud ID Service** を導入し、Variables に`overwriteCrossDomainMCIDAndAID = true`を設定します。
![スクリーンショット 2021-12-01 9.47.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100545/84794522-ea91-15ed-679d-be73a5d2d224.png)

**Data Collection Tags** を使用していない場合、のjavascriptコードで実装が可能です。詳細は以下のヘルプをご参照ください。

https://experienceleague.adobe.com/docs/id-service/using/id-service-api/configurations/overwrite-visitor-id.html?lang=ja

セッション同期（ID引き継ぎ）の設定は以上で終わりです。
続いて検証を行なっていきます。

# 検証
検証には **Project Griffon** とパケットキャプチャソフトを利用し、以下の手順で確認します。

1. アプリで計測されているIDの確認
1. Web遷移後のIDの確認

## 1. アプリで計測されているIDの確認
アプリの計測値の確認は **Project Griffon** へ接続し、確認します。
### Project Griffon への接続
早速 **Project Griffon** のセッションを作成し、デバイスに接続していきます。
セッション名とベースURL(アプリのURIスキーム)を入力して接続用URLを発行します。今回はエミュレータを使うため、QRコードではなくURLリンクを使っていきます。
<img width="360px" alt="スクリーンショット 2021-12-04 11.58.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100545/0fe19ccf-fb08-2054-07c2-9d7fed64ae88.png">

エミュレータのSafariで発行されたリンクを開き、先の画面のPINコードを入力して接続します。アプリが起動し、接続ができるとアプリの右上にAdobeのロゴと接続中を示す緑の丸が表示されます。
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100545/194ce527-dfd7-9f39-6106-36d1f4e4116a.gif)

### 計測結果の確認
接続ができたので、続いて **Project Griffon** の画面で記録されたIDを確認していきます。

https://experience.adobe.com/griffon

左部のメニューから **Analytics Events** を選択し**①**、**Adobe Analytics** 向けに送信されたイベントを確認します。中央部には送信された順にイベントが並びます**②**（例では**Home**を表示した`Track State`のみが表示されています）。イベントを選択すると右部に **Adobe Analytics** に送信された情報が確認できます。こちらをスクロールしていくと`mcvisId`があります**③**。こちらが引き継ぎに使用されるIDです。
![スクリーンショット 2021-12-04 12.37.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100545/db3d22ce-baf8-9b32-e643-ce99d7d9448a.png)
今回のID`18630127801028916326742402013009832152`が確認できました。

## 2. Web遷移後のIDの確認
アプリ側でのIDは確認できたので、続いてWebに遷移した後のIDを確認します。
パケットキャプチャソフトで **Adobe Analytics** へのリクエストを確認していきます。パケットキャプチャソフトを立ち上げ、アプリでWebに遷移します。
![ezgif-7-88e2c498ac5f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100545/cd93748e-8592-b4e7-df74-16c1a116bf84.gif)
キャプチャ結果に`b/ss`でフィルターをかけ**①**、**Adobe Analytics** へのリクエストを確認します。**Query String** の`mid`には引き継がれたIDが記録されています**②**。`g`には遷移先のURLが記録されていること**③**が確認できます。
![スクリーンショット 2021-12-04 16.43.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100545/565aba80-8a38-d0ce-4665-bc17a279546f.png)
アプリ側のID`18630127801028916326742402013009832152`が引き継がれ、同じであることが確認できました。

### 引き継ぎURLについて
発行されたID引き継ぎ時のURLには`adobe_mc`パラメータが付与され、引き継ぎに必要な情報が格納されています。

```
[イメージ]
https://example.com/?adobe_mc=TS%3D1638603809%7CMCMID%3D18630127801028916326742402013009832152%7CMCORGID%3DXXXXXXXXXXXXXXXXXXXXXXXX%40AdobeOrg
```
`adobe_mc`パラメータには以下の項目が含まれます。

|名称|バージョン|
|---|---|
|MCMID|Experience Cloud ID (ECID)|
|MCORGID|Experience Cloud Org ID (組織ID)|
|MCAID|Analytics Tracking ID (AID) *Adobe AnalyticsのExtensionで指定している場合のみ|
|TS|引き継ぎURLが発行された時刻を表すタイムスタンプ|

URLパラメータの`MCMID`からも引き継ぎ対象のIDが確認できます。
また、発行されたURLをコピーしてPCブラウザでアクセスした場合にもIDは引き継がれます。

:::note warn
引き継ぎURLには有効期限が設定されており、発行から数分程度でIDの引き継ぎが実行されなくなります。通常の利用では問題ないと思いますが、検証の際などに発行されたURLを共有される際にはご注意ください。
:::

# まとめ
今回はアプリからWebへ遷移する際に **Adobe Analytics** のセッションを引き継ぐ機能をご紹介しました。
実装に手を入れる必要はありますが、複雑な手順なく対応できます。アプリとWebのセッションが繋がることによりデータ分析が進み、より深い理解からの施策検討もできるようになるかと思います。みなさまの導入にお役立ていただけましたら幸いです。

:::note
私が所属するアドビのカスタマーサクセス部門では技術のエキスパートを随時募集しています。私たちの部門や職種のご紹介をしていますので、以下のページもぜひご覧ください。
<a href="https://blog.adobe.com/jp/publish/2021/06/21/corp-adobe-life-talent-interview-11.html">https://blog.adobe.com/jp/publish/2021/06/21/corp-adobe-life-talent-interview-11.html</a>
:::