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

Last update: Fri Jul 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

中級
開発者

所属する組織が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サイトに移動します。
「魅力的なドキュメントエクスペリエンスを構築する」の「詳細情報」をクリックします。

これにより、Adobe Acrobat Servicesホームページに移動します。
ナビゲーションバーの開始をクリックします。

Acrobat Services APIの使用を開始 して、新しい資格情報を作成 するか、既存の資格情報を管理 するためのオプションが表示されます。
新しい資格情報の作成 の下にある開始ボタンをクリックします。

「Application Embed API」ラジオボタンを選択し、次のウィンドウで任意の資格情報名とPDFドメインを追加します。

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オプションを無効にします。
[コードの生成] ボタンをクリックして、コードプレビューを表示します。
パート1のクライアント資格情報ウィンドウから クライアントID をコピーします。
コードエディターで 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 -> exercise -> index.html ファイルを開きます。
次のコメントの下の18行のファイルの<head>にスクリプトコードを貼り付けます： TODO：演習1: INSERT EMBED API SCRIPT TAG。

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

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

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

コードエディターに移動して、もう一度 Web -> exercise -> index.html ファイルを開きます。
<div>コードを、TODO: EXERCISE 1: INSERT PDF埋め込みAPIコード というコメントの下、67行のファイルの<body>に貼り付けます。

開発者サンドボックスコードプレビューに戻り、以下の<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 -> exercise -> index.html ファイルを開きます。
<script>コードを68行の<div>タグの下にあるファイルの<body>に貼り付けます。
同じ index.html ファイルの70行目を変更して、以前に作成されたclientID変数を含めます。
同じ index.html ファイルの72行目を変更して、ローカルファイルを使用するようにPDFファイルの場所を更新します。

/resources/pdfs/whitepaper.pdf のチュートリアルファイルで使用可能なものがあります。
変更したファイルを保存し、<your domain>/summit21/web/exercise/ に移動してWebサイトをプレビューします。

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に追加することで、イベントと統合できます。