Adobe Analytics 検証方法について - Webサイト編

Adobe Analytics を活用する中で、変数の追加・編集を実施したいが、検証方法がわからずなかなか実施できないと思われている方も多いのではないでしょうか。

今回はそのようなお悩みを解決すべく、その第一弾として、Webサイトの検証方法をご紹介します。

## 0. 検証全体の流れ
Adobe Analytics のデータ計測は、ざっくりとした流れとして、①Webサイトを訪問、②計測データを送信、③計測データの処理・格納、といった工程に分かれます。今回紹介する検証では、②計測データを送信、そして、③計測データの処理・格納結果を評価する、の二つの検証方法について触れていきます。

<img width="500px" alt="収集プロセス" src="https://experienceleague.adobe.com/docs/analytics/assets/data_collection.png?lang=ja">

## 1. 事前準備
検証に入る前に、以下事前準備を行います。
### 1-1：イメージリクエストをキャプチャするツールの用意
普段お使いのブラウザや、専用のツール（※）も可能ですが、Google Chrome、もしくは、Firefox の Extensinon がインストール可能な環境であれば、弊社のツール「Adobe Experience Platform Debugger」を活用することで、より容易に確認することも可能です。
今回はブラウザの開発者ツール、その中でも Google Chrome の DevTools を用います。そして Adobe Experience Platform Debugger の2つを利用してどのように検証していくか、についてご紹介します。

https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob

https://addons.mozilla.org/en-US/firefox/addon/adobe-experience-platform-dbg/

※専用のツールは以下からご確認いただけます。

https://experienceleague.adobe.com/docs/analytics/implementation/validate/packet-monitor.html?lang=ja-JP#%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AA-http-%E5%BF%9C%E7%AD%94%E3%81%AE%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89

### 1-2：開発環境用レポートスイート
検証用データを格納するレポートスイートを事前に用意しておくことで、後に記載するレポートでの確認が簡易になります。レポートスイートの作成は下記からご確認いただけます。

https://experienceleague.adobe.com/docs/analytics/admin/manage-report-suites/new-report-suite/t-create-a-report-suite.html?lang=ja-JP

## 2. 検証その1 〜レポートにデータが入る前の検証〜
では早速検証してみましょう。今回の条件は以下です。

・新規で eVar10 を有効化し、この変数にサイトのリファラを格納する
・開発環境用に、「lumadev」というレポートスイートを作成

### 2-1. ブラウザの機能を利用した場合
#### 2-1-1. DevToolsを開いた状態で該当サイトに訪問
Google Chrome の DevTools 起動し、Network タブを選択しておいた状態で、検証したいサイトに訪問
![luma001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1329688/3f6a77d6-90bc-c801-eb74-8ebd27c31bbf.jpeg)

#### 2-1-2. 送信データからイメージリクエストを抽出
① 検索窓に**「b/ss」**（※）と入力し、イメージリクエストのみを絞り込みます。
![luma002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1329688/34184526-68db-c37d-b10e-c0381084199c.jpeg)
※「b/ss」とはアドビのデータ収集サーバーに保存される画像のファイル構造の一部です。すべてのイメージリクエストにこの文字列が含まれるため、抽出する際にもこの文字列を利用します。

#### 2-1-3. イメージリクエストの中身を確認する
②絞られたデータを押下し、③の「Query String Parameters」までスクロールします。そこで今回検証したいデータが出力されているか確認します。
今回は④v10にorganicというデータが含まれている（※※）ので、正しく実装されていることが確認できます。

![luma004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1329688/ab795ee7-2d5c-c9f2-f8e8-fb6c8545b18b.jpeg)

※※ パラメータ「v10」は「eVar10」を指します。このように、イメージリクエストに含まれるパラメータは、Adobe Analytics の実装変数とは異なります。詳細は以下からご確認ください。

https://experienceleague.adobe.com/docs/analytics/implementation/validate/query-parameters.html?lang=ja#validate

**補足：イメージリクエスト構文**
イメージリクエストは以下のような構文となっています。

>https\://example.data.adobedc.net/b/ss/examplersid/1?AQB=1&g=http%3A%2F%2Fexample.com&pageName=Example%20hit&v1=Example%20value&AQE=1

1. **example.data.adobedc.net** は、trackingServer 変数に含まれる値です。
2. **examplersid** は、データの送信先のレポートスイートID です。ここで送信先のレポートスイートIDが、本番用か開発環境用か、を見分けることができます。
3. クエリー文字列の区切り文字「?」の後にある文字列はレポートに含めるデータです。

今回の例では以下のようなイメージリクエストが確認できました。

>https\://example.data.adobedc.net/b/ss/lumadev/1?AQB=1&g=http%3A%2F%2Fexample.com&pageName=Example%20hit&v1=Example&v10=organic%20value&AQE=1

上記を確認すると、

+ レポートスイートID が「lumadev」となっている。
+ パラメータに「v10=organic」が含まれている

よって、正しく実装されていることがわかります。

### 2-2. Adobe Experience Platform Debugger を利用した場合
#### 2-2-1. デバッガーを起動します。
Adobe Experience Platform Debugger をインストールし起動した状態で、該当サイトに訪問

**Adobe Experience Platform Debuggerを起動**
![luma008.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1329688/e64df7f4-4eb6-28ba-5920-4f8a24a409cf.jpeg)

**サイトに訪問**
![luma009.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1329688/f8105bce-4999-8a17-545c-1a6799aac257.jpeg)

#### 2-2-2. 出力データを確認

① Adobe Analytics、②レポートスイートを選択後、
![luma010.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1329688/f06b6af6-aa66-0157-4d7c-a0cfa273774c.jpeg)

③スクロールし、今回該当の変数eVar10が含まれているか確認
![luma011.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1329688/5429b97d-045e-5aae-6d72-a63cf99ee4cb.jpeg)

以上となります。いかがでしょうか？ブラウザの機能を利用するより、Adobe Experience Platform Debugger はよりわかりやすく検証できる事がご理解いただけたかと思います。

**計測できない場合**
v10 がパラメータにない、または、v10 の値が意図しない値となっている場合、実装が誤っている可能性がありますので、修正しこの手順を繰り返します。

## 3. 検証その2 〜レポートにデータが入った後の検証〜
検証その1に問題がない場合、Adobe Analytics のレポートを見て最終確認をします。

**ワークスペースを使った検証**
赤枠の部分を確認します。今回チェックするべき個所は
・レポートスイートが「lumadev」となっている
・eVar10（名前は「リファラー」としています）に、「organic」が含まれている
ですが、問題なく出力されているようです。
![luma012.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1329688/73647ccd-3319-b767-f28d-26b95adfa749.jpeg)


### 3-1. 意図するデータが出力されない場合
以下の個所を確認してみてください。

**3-1-1. 確認しているレポートが異なる**
普段から多くのレポートスイートを活用されているお客様によくある事として、そもそも閲覧しているレポートスイートが違うため、意図するデータが出力さないという事がございます。
改めてレポートスイートの確認をお願いします。

**3-1-2. 変数が有効になっているか** 
変数が有効になっていない場合、イメージリクエストが正しくてもレポートには反映されません。
管理者メニュー > レポートスイート から各変数の設定を確認し、有効になっているかどうかを確認ください。

**各変数の設定手順について**

https://experienceleague.adobe.com/docs/analytics/admin/admin-tools/success-events/t-success-events.html?lang=ja#admin-tools

https://experienceleague.adobe.com/docs/analytics/admin/admin-tools/conversion-variables/t-conversion-variables-admin.html?lang=ja#admin-tools


https://experienceleague.adobe.com/docs/analytics/admin/admin-tools/traffic-variables/t-traffic-variable.html?lang=ja-JP#admin-tools

**3-1-3. 各変数の有効確認**
 
| 変数名 | 確認方法 |
|:-:|:-:|:-:|
|event|「タイプ」が「無効」以外の値になっているか|
|eVar|「状態」が「有効」になっているか|
|prop|「状態」が「有効」になっているか|

**3-1-4. 上記確認してもうまく出力されない場合** 

上記3つの確認で殆どの場合は解決が見込めますが、それでもデータが上がってこない場合は、Data Warehouse、Data Feed 機能を利用することで、データの計測順序や値の変化等、ワークスペースよりも詳細なデータが確認できます。これによってデータが出力されない原因に近づけるかもしれませんので、これらレポート機能の利用も検討してみください。

## 4. 実装を本番環境に移行し、検証その1,2 を再度実施
検証その2で意図する変数に値が含まれていることを確認できたら、実装内容を本番環境に移行し、改めて検証その1、２を実施します。
これらを通して問題ないようであれば、検証作業は終了となります。

https://experienceleague.adobe.com/docs/analytics/admin/admin-tools/traffic-variables/t-traffic-variable.html?lang=ja-JP#admin-tools



## 5. まとめ
以上 Webサイトの検証方法を紹介させていただきました。いくつか事前準備は必要になりますが、想定以上に簡単と思われた方も多いのではないでしょうか。

また近日中にモバイルアプリからの計測データの検証方法に関してもお伝えしたいと思います。

この記事をきっかけに、Adobe Analytics を使いこなしていただけますと幸いです。