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

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

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

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

必要な項目

  • チュートリアルリソースダウンロード
  • Adobe ID こちらから入手してください
  • Webサーバー(Node JS、PHPなど)
  • HTML/JavaScript/CSSに関する実務知識

ご利用のプラン

  • 基本的なWebサーバー(ノード)
  • Visual Studioコード
  • GitHub

資格情報の取得

  1. Adobe.ioのwebサイトに移動します。

  2. 「魅力的なドキュメントエクスペリエンスを構築する」の「詳細情報」をクリックします。

    [詳細情報]ボタンのスクリーンショット

    これにより、Adobe Acrobat Servicesホームページに移動します。

  3. ナビゲーションバーの​ 開始 ​をクリックします。

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

  4. 新しい資格情報の作成 ​の下にある​ 開始 ​ボタンをクリックします。

    [開始]ボタンのスクリーンショット

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

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

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

  6. [資格情報の作成] ​をクリックします。

    ウィザードの最後のページに、クライアントの認証情報の詳細が表示されます。 このウィンドウは開いたままにしておきます。戻ってクライアントID(APIキー)をコピーし、後で使用することができます。

  7. ドキュメントの表示 ​をクリックすると、このAPIの使用方法に関する詳細な情報が記載されたドキュメントに移動します。

    資格情報の作成ボタンのスクリーンショット

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

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

演習コードを取得する

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

  1. Adobe Acrobat Services webサイトに移動します。

    Adobe Acrobat ServicesのWebサイトのスクリーンショット

  2. ナビゲーションバーの​ API ​をクリックし、ドロップダウンリンクの​ PDF埋め込みAPI ​ページに移動します。

    PDF埋め込みAPIドロップダウンのスクリーンショット

  3. デモを試す」をクリックします。

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

    デモを試す のスクリーンショット

    ここでは、様々な表示モードのオプションを確認できます。

  4. フルウィンドウ、サイズ調整されたコンテナ、インライン、ライトボックスの表示モードをクリックします。

    表示モードのスクリーンショット

  5. [ウィンドウ全体] ​表示モードをクリックし、[カスタマイズ] ​ボタンをクリックして、オプションのオンとオフを切り替えます。

    [カスタマイズ]ボタンのスクリーンショット

  6. ダウンロード PDFオプションを無効にします。

  7. [コードの生成] ​ボタンをクリックして、コードプレビューを表示します。

  8. パート1のクライアント資格情報ウィンドウから​ クライアントID ​をコピーします。

    クライアントIDのスクリーンショット

  9. コードエディターで​ Web -> resources -> js -> dc-config.js ​ファイルを開きます。

    clientID変数があることがわかります。

  10. 二重引用符の間にクライアント資格情報を貼り付けて、clientIDを資格情報に設定します。

  11. 開発者サンドボックスコードプレビューに戻ります。

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

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

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

  13. コードエディターに移動して、Web -> exercise -> index.html ​ファイルを開きます。

  14. 次のコメントの下の18行のファイルの<head>にスクリプトコードを貼り付けます: TODO:演習1: INSERT EMBED API SCRIPT TAG

    スクリプトコードの貼り付け先のスクリーンショット

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

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

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

  16. コードエディターに移動して、もう一度​ Web -> exercise -> index.html ​ファイルを開きます。

  17. <div>コードを、TODO: EXERCISE 1: INSERT PDF埋め込みAPIコード ​というコメントの下、67行のファイルの<body>に貼り付けます。

    コードの貼り付け先のスクリーンショット

  18. 開発者サンドボックスコードプレビューに戻り、以下の<script>のコード行をコピーします:

    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>
    
  19. コードエディターに移動して、もう一度​ Web -> exercise -> index.html ​ファイルを開きます。

  20. <script>コードを68行の<div>タグの下にあるファイルの<body>に貼り付けます。

  21. 同じ​ index.html ​ファイルの70行目を変更して、以前に作成されたclientID変数を含めます。

    70行のスクリーンショット

  22. 同じ​ index.html ​ファイルの72行目を変更して、ローカルファイルを使用するようにPDFファイルの場所を更新します。

    /resources/pdfs/whitepaper.pdf ​のチュートリアルファイルで使用可能なものがあります。

  23. 変更したファイルを保存し、<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のドキュメントからアクセスできます。

  1. ドキュメントサイトに移動します。

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

    参照ガイドのスクリーンショット

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

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

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

    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
    );
    
  4. 前に追加したコードセクションを以下のように検索し、このコードの後に上のコードを​ index.html ​に追加します。

    コードの貼り付け先のスクリーンショット

  5. Webブラウザーにページを読み込み、コンソールを開いて、PDFビューアを操作するさまざまなイベントからのコンソール出力を表示します。

    ページの読み込みのスクリーンショット

    ページを読み込むためのコードのスクリーンショット

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

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

  1. snippets/eventsSwitch.js ​に移動し、ファイルの内容をチュートリアルコードにコピーします。

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

  2. イベントリスナー関数にコードを貼り付けます。

    コードの貼り付け先のスクリーンショット

  3. ページが読み込まれ、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に追加することで、イベントと統合できます。

  1. snippets/eventsSwitchGA.js ​に移動して、Google Analyticsと連携する方法を確認してください。

  2. WebページがAdobe Analyticsを使用してトラックされ、既にWebページに埋め込まれている場合は、このコードを確認して例として使用してください。

    Adobe Analyticsコードのスクリーンショット

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

パート4では、2ページ目をスクロールした後に表示されるペイウォールを、PDFビューアの上に重ねる方法について説明します。

ペイウォールの例

このペイウォールの背後にあるPDFの例に移動します。 この例では、PDF表示エクスペリエンスの上にインタラクティブ機能を追加する方法を説明します。

ペイウォールコードを追加

  1. snippets/paywallCode.htmlに移動し、内容をコピーします。

  2. exercise/index.htmlで<!-- TODO: EXERCISE 3: INSERT PAYWALL CODE -->を検索します。

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

  3. コピーしたコードをコメントの後に貼り付けます。

  4. snippets/paywallCode.js ​に移動し、内容をコピーします。

    コードの貼り付け先のスクリーンショット

  5. コードをその場所に貼り付けます。

ペイウォールでデモを試す

これで、デモを表示できます。

  1. Webサイトで​ index.html ​を再読み込みします。

  2. 下にスクロールして> 2ページを表示します。

  3. 2ページ目の後に、チャレンジユーザーに上がるダイアログを表示します。

    デモを表示したスクリーンショット

その他の参考資料

その他のリソースは、こちらで確認できます。

recommendation-more-help
61c3404d-2baf-407c-beb9-87b95f86ccab