ウェブに掲載されているPDF内の計測をAdobe Analyticsで実施する

ウェブに掲載されているPDFをDocument Cloud SDKとして提供されている[Embed API](https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html)を利用することでAdobe Analyticsでウェブサイト上に掲載されているPDFのページビューや検索キーワードなどを計測できるようになりました。このエントリではその計測方法のご紹介です。

##何が出来るのか？
Document Cloud SDKで提供されているEmbed APIでは、ウェブサーバー上で提供されているPDFのビューワーを用意することが出来るようになりました。これまではウェブサーバー上で提供されているPDFのリンクなどは、Chromeなどではブラウザ側にてレンダリングされたものを表示していましたが、これをページ上でより閲覧しやすい形で提供が可能になりました。

このビューワーのオプションとしてAdobe Analyticsを利用して、ウェブページ内に埋め込まれたPDF内のアクティビティを計測できるようになります。

これまでAdobe Analyticsで計測する場合は、PDFの拡張子を持ったリンク先をクリックすることで、ダウンロード計測というのはされていましたが、実際のViewやどのページを閲覧したなどを計測することが出来るようになります。

##動作の概要
Document Cloud SDKの一部は、JSのライブラリになっていて、HTMLと一緒にこのライブラリを読み込ませ、API KeyをもとにDocument Cloud上にあるmain.jsにアクセスすることで（Embeded APIの利用）、該当するPDFに対して閲覧の埋め込みを簡単にできるようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608794/2ce473b4-7df9-6542-ae8d-d906d71b2cbf.png)
[What are Document Services APIs?](https://www.adobe.io/apis/documentcloud/dcsdk/docs.html)

このSDKを利用することで、HTMLの埋め込み時のJavaScriptのパラメータ設定などにより、HTML内に埋め込む際のHTMLの埋め込み方法のUIのカスタマイズから、計測の設定などができるようになります。

##Adobe Analyticsでの計測設定
既に上記にも記載している部分もありますが、下記、実施にあたっての注意点となります。

###注意点
- Viewerで表示しているウェブページ上のものだけが計測可能対象です。ダウンロードされたものは対象外となります。
- 計測の際には埋め込みを行っているウェブページでAppMeasurementが読み込まれている必要があります。
- AppMeasurementの設定を一部利用するため、レポートスイートID（RSID）は、読み込みを行っているものと同じものを利用する必要があります。
- 計測時はPDFのページが切り替わるごとに、サーバーコールが発生します。
- 記事執筆現在においてはEmbed APIは無料で利用が可能ですが、今後、サービスの体系が変わる可能性もございます。

###ステップ1：API Keyの取得
Embed APIを利用するにあたり、Document CloudのAPI Keyを発行します。Adobe I/Oからプロジェクトを作成し、取得を行います。PDFの埋め込みを行うドメイン単位での発行となります。[Adobe I/O Project](https://console.adobe.io/projects)

###ステップ2：ページ埋め込みの実施
PDFをページ内に埋め込み表示する方法は大きく4つ存在し、メニューに表示する機能などをパラメータによりコントロールすることが可能です。
- Full Window
- Sized Container
- In-Line
- Lightbox

デモサイトで確認しながら埋め込み用のコードを発行することが可能です。ぜひご利用ください。
[PDF Embed Mode Demo Site](https://documentcloud.adobe.com/view-sdk-demo/index.html#/view/FULL_WINDOW/Bodea%20Brochure.pdf)

###ステップ3：計測設定の実施（埋め込み側）
埋め込み設定をしたJSファイル内に2カ所設定をすることでサーバーコール自体の設定が可能になります。

- adobeDCViewをNewしているところでRSIDを設定する
- registerCallbackの箇所で、enablePDFAnalyticsをTrueにする

RSIDの設定箇所は下記となります。

```
document.addEventListener("adobe_dc_view_sdk.ready", function () {
    /* Initialize the AdobeDC View object */
    var adobeDCView = new AdobeDC.View({
        /* Pass your registered client id */
        clientId: "YOUR DC API KEY",
        /* Pass the div id in which PDF should be rendered */
        divId: "adobe-dc-view",
        //Adobe Analytics RSID//
        reportSuiteId: "REPORTSUITE ID",
    });
```

計測をONにする

```
     /* options to control the callback execution */
     {
        /* Enable PDF analytics events on user interaction. */
        enablePDFAnalytics: true,
    }
```

全体のコードの設定については[GitHub](https://github.com/adobe/pdf-embed-api-samples)のMore Samples配下のCapture PDF Embed API Eventsにサンプルコードがありますので併せてご確認ください。

計測データはContextData（計測ページ側で変数を設定せず、計測サーバー側で設定）を利用したものとなります。開発者ツールなどで、RSIDで絞ったサーバーコールが飛んでいることが確認できたらステップ4へ進みAdobe Analytics側の設定を行います。

###ステップ4：計測設定の実施（Adobe Analytics側）
ContextDataとして設定されたものはAdobe Analyticsの管理者画面がから実施できるプロセシングルールを利用し、変数へのマッピングを行います。

お薦めの設定としては下記を取得しておくことをお薦めします。

Events（成功指標）

- PDF Loads（PDFの読み込み）
- PDF Page Views（PDF内のページビュー）
- PDF Downloads（Viewerのダウンロードボタンの押下）
- PDF Search（PDF内の検索の実施）

eVar（コンバージョン指標）

- PDF File Name（計測しているPDFの名前。SDK内で指定しているものが入ります）
- PDF File Page Nume（計測しているページ番号）
- PDF Search Term（検索したキーワード）

これらをマッピングすることで、かなりの計測が可能になります。

###ステップ5：レポーティング
レポーティングについては、計測されているものを自由に設定して頂くことで、これまでのページなどの分析同様に実施して頂くことが可能になっています。

PDF別主要指標
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608794/fd78452e-8194-6a8d-533a-a967f3fbc942.png)

閲覧ページのブレイクダウン（セグメントでの絞り込みも可）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608794/8dbc834f-b0e8-4f08-f423-a9f0889fb88f.png)

検索キーワード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608794/6b7e2234-f374-6647-a7fb-0a7a24959246.png)

埋め込んだページから特定PDFのページ閲覧までを繋げたパス分析
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608794/41c9906a-730e-55e5-b2ce-bb24e117a256.png)

オンラインでは動画も計測できる割にPDF内はブラックボックスだったので、ぜひこれを機会に最適化などにご活用頂ければと思います。

##リファレンス
- [Adobe Developers \- PDF Embed API \| Embed PDF in HTML \| Adobe Document Services](https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html)
- [PDF Analytics: Get Insights on Embedded PDFs on Your Website \| by Ben Vanderberg \| Adobe Tech Blog \| Medium](https://medium.com/adobetech/pdf-analytics-get-insights-on-embedded-pdfs-on-your-website-44e6a314fb1f)
- [Documentation](https://www.adobe.io/apis/documentcloud/dcsdk/docs.html?view=view)