PDFのオンラインエクスペリエンスを制御し、分析を収集

Last update: Fri Aug 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
PDF Embed API

作成対象：

Intermediate
Developer

所属する組織がwebサイトにPDFを投稿していますか？ Adobe PDF Embed APIを使用して外観をコントロールし、共同作業を有効にし、ユーザーがPDFーとどのように対話するかについての分析（ページと検索に費やした時間など）を収集する方法について説明します。この4部構成の実践チュートリアルを開始するには、 PDF埋め込みAPIの概要.

パート1:PDF埋め込みAPIの概要

パート2:webページへのPDF埋め込みAPIの追加

パート3: Analytics APIへのアクセス

パート4：イベントに基づくインタラクティブ機能の追加

パート1:PDF埋め込みAPIの概要 part1

パート1では、パート1～3に必要なものをすべて使い始める方法を説明します。 API資格情報の取得から始めます。

必要なもの

チュートリアルのリソースダウンロード
Adobe ID ここに取り込む
Webサーバー（Node JS、PHPなど）
HTML/JavaScript/CSSに関する実務知識

現在使用している機能

基本的なWebサーバー（ノード）
Visual Studioコード
GitHub

資格情報の取得

に移動 Adobe.io webサイト.
クリック 詳細情報 「 Build engaging document experience 」の下にあります。

これにより、次の機能にアクセスできます Adobe Acrobat Services ホームページ
クリック 開始する をクリックします。

オプションが 今すぐ使用開始 Acrobat Services API から 新しい資格情報の作成 または 既存の資格情報の管理.
クリック 開始する 下のボタン 新しい資格情報の作成.

を選択します PDF埋め込みAPI ラジオボタンをクリックし、次のウィンドウで選択した資格情報名とアプリケーションドメインを追加します。

note note
NOTE
これらの資格情報は、ここにリストされているアプリケーションドメインでのみ使用できます。任意のドメインを選択して使用できます。

資格情報のスクリーンショット

クリック 資格情報の作成.

ウィザードの最後のページに、クライアントの認証情報の詳細が表示されます。このウィンドウは開いたままにしておきます。戻ってクライアントID（APIキー）をコピーし、後で使用することができます。
クリック ドキュメントを表示 このAPIの使用方法の詳細を記載したドキュメントに移動します。

パート2:webページへのPDF埋め込みAPIの追加 part2

パート2では、PDF埋め込みAPIを簡単にwebページに埋め込む方法を説明します。そのためには、Adobe PDF Embed APIのオンラインデモを使用し、コードを作成します。

演習コードを取得する

使用するコードを作成しました。独自のコードを使用できますが、デモはチュートリアルのリソースに関連しています。サンプルコードをダウンロードこちら.

に移動 Adobe Acrobat Services webサイト.
クリック API ナビゲーションバーで、 PDF埋め込みAPI をクリックします。
クリック デモを試す.

PDF埋め込みAPIのデベロッパーサンドボックスを含む新しいウィンドウが表示されます。

ここでは、様々な表示モードのオプションを確認できます。
フルウィンドウ、サイズ調整されたコンテナ、インライン、ライトボックスの表示モードをクリックします。
クリック フルウィンドウ 表示モードを選択してから、 カスタマイズ ボタンをクリックして、オプションのオンとオフを切り替えます。
無効 ダウンロード PDFオプション。
クリック コードを生成 ボタンをクリックすると、コードのプレビューが表示されます。
コピー クライアントID パート1の「クライアント認証情報」ウィンドウからアクセスします。
を開きます Web -> resources -> js -> dc-config.js ファイルをコードエディターに追加します。

clientID変数があることがわかります。
二重引用符の間にクライアント資格情報を貼り付けて、clientIDを資格情報に設定します。
開発者サンドボックスコードプレビューに戻ります。

Adobeスクリプトがある2行目をコピーします。

code language-none
`<script src=https://documentccloud.adobe.com/view-sdk/main.js></script>`

スクリプトのスクリーンショット

コードエディターに移動し、 Web -> 運動 -> index.html ファイル。
スクリプトコードを <head> というコメントの下の18行目のファイルについて： TODO：演習1: EMBED APIスクリプトタグの挿入.

デベロッパーサンドボックスコードプレビューに戻り、次のコードを含むコードの最初の行をコピーします。

code language-none
`<div id="adobe-dc-view"></div>`

コードのコピー先のスクリーンショット

コードエディターに移動し、 Web -> 運動 -> index.html もう一度ファイルを開きます。
ペースト <div> コードを <body> というコメントの下の67行目のファイルの TODO：演習1: PDF埋め込みAPIコードを挿入する.

デベロッパーサンドボックスコードプレビューに戻り、 <script> 下：

code language-none

code language-none
`<script type="text/javascript"> document.addEventListener("adobe_dc_view_sdk.ready", function(){ var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"}); adobeDCView.previewFile({ content:{location: {url: "https://documentcloud. adobe.com/view-sdk-demo/PDFs/Bodea Brochure. pdf"}}, metaData:{fileName: "Bodea Brochure.pdf"} }, {showDownloadPDF: false}); }); </script>`

<script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready",             function(){
        var adobeDCView = new AdobeDC.View({clientId:                     "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
        adobeDCView.previewFile({
            content:{location: {url: "https://documentcloud.                adobe.com/view-sdk-demo/PDFs/Bodea Brochure.                    pdf"}},
            metaData:{fileName: "Bodea Brochure.pdf"}
        }, {showDownloadPDF: false});
    });
</script>

コードエディターに移動し、 Web -> 運動 -> index.html もう一度ファイルを開きます。
ペースト <script> コードを <body> ファイルの68行目の <div> タグで作成されます。
同じ行の70を修正 index.html 以前に作成されたclientID変数を含めるファイル。
同じ行の72を修正 index.html ファイル：ローカルファイルを使用するためにPDFファイルの場所を更新します。

チュートリアルファイルには、以下の場所で利用可能なものがあります。 /resources/pdfs/whitepaper.pdf.
変更したファイルを保存し、次を参照してwebサイトをプレビューします： <your domain>/summit21/web/exercise/.

Technical Whitepaperのレンダリング結果が、ブラウザーのフルウィンドウモードに表示されます。

パート3: Analytics APIへのアクセス part3

これで、PDFをレンダリングするPDF埋め込みAPIを含むwebページが正常に作成されました。第3部では、JavaScript PDFを使用して分析を測定し、ユーザーがイベントをどのように使用しているかを理解する方法を確認できるようになりました。

ドキュメントの検索

PDF埋め込みAPIの一部として使用できるJavaScriptイベントは数多くあります。以下からアクセスできます Adobe Acrobat Services ドキュメント。

次に移動：文書サイト。
APIの一部として使用できる様々なイベントタイプを確認します。これらは参考になり、今後のプロジェクトでも役立ちます。

Webサイトに記載されているサンプルコードをコピーします。

これをコードの基準として使用し、変更します。

サンプルコードのコピー先のスクリーンショット

code language-none

code language-none
`const eventOptions = { //Pass the PDF analytics events to receive. //If no event is passed in listenOn, then all PDF analytics events will be received. listenOn: [ AdobeDC.View.Enum.PDFAnalyticsEvents. PAGE_VIEW, AdobeDC.View.Enum.PDFAnalyticsEvents.DOCUMENT_DOWNLOAD], enablePDFAnalytics: true } adobeDCView.registerCallback( AdobeDC.View.Enum.CallbackType.EVENT_LISTENER, function(event) { console.log("Type " + event.type); console.log("Data " + event.data); }, eventOptions );`

const eventOptions = {
  //Pass the PDF analytics events to receive.
   //If no event is passed in listenOn, then all PDF         analytics events will be received.
listenOn: [ AdobeDC.View.Enum.PDFAnalyticsEvents.    PAGE_VIEW, AdobeDC.View.Enum.PDFAnalyticsEvents.DOCUMENT_DOWNLOAD],
  enablePDFAnalytics: true
}


adobeDCView.registerCallback(
  AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
  function(event) {
    console.log("Type " + event.type);
    console.log("Data " + event.data);
  }, eventOptions
);

先ほど追加したコードセクションで次のようになったら、そのコードの後に上記のコードを追加します。 index.html:
Webブラウザーにページを読み込み、コンソールを開いて、PDFビューアを操作するさまざまなイベントからのコンソール出力を表示します。

イベントをキャプチャするためのスイッチを追加

これでconsole.logに出力されるイベントが作成されました。次に、イベントに基づいて動作を変更しましょう。これを行うには、スイッチの例を使用します。

移動先 snippets/eventsSwitch.js ファイルの内容をチュートリアルのコードにコピーします。
イベントリスナー関数にコードを貼り付けます。
ページが読み込まれ、PDFビューアを操作したときに、コンソールが正しく出力されることを確認します。

Adobe Analytics

ビューアにAdobe Analyticsのサポートを追加する場合は、webサイトに記載されている手順に従います。

IMPORTANT

Webページには、ヘッダーのページにAdobe Analyticsが既に読み込まれている必要があります。

次に移動： Adobe Analyticsドキュメント WebページでAdobe Analyticsが既に有効になっているかどうかを確認します。指示に従ってreportSuiteを設定します。

Google Analytics

Google Analyticsとの連携方法のスクリーンショット

Adobe PDF Embed APIは、Adobe Analyticsとの事前定義済みの連携を提供します。ただし、すべてのイベントはJavaScriptイベントとして使用できるため、PDFイベントを取得し、ga()関数を使用してGoogle AnalyticsをAdobe Analyticsに追加することで、イベントと統合できます。