控制您的 PDF 線上體驗並收集分析結果

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

主題：
PDF Embed API

建立對象：

Intermediate
Developer

您的組織會在您的網站上發佈 PDF 嗎？瞭解如何使用Adobe PDF嵌入API來控制外觀、啟用共同作業，以及收集有關使用者如何與 PDF 互動的分析，包括花費在頁面和搜尋上的時間。若要開始此 4 部分的實作教學課程，請選 取「開始使用 PDF 嵌入」API 。

第 1 部分：PDF 內嵌API快速入門

第 2 部分：將 PDF 內嵌API新增至網頁

第 3 部分：存取 Analytics API

第 4 部分：根據事件增加互動

第 1 部分：PDF 內嵌API快速入門 part1

第 1 部分中，瞭解如何開始使用第 1 至 3 部分所需的一切。您將首先取得API認證。

您需要的

教學課程資源下載
Adobe ID在這裡取得
網頁伺服器（Node JS、PHP 等）
HTML/JavaScript/CSS 的工作知識

我們正在使用的

基本網頁伺服器（節點）
Visual Studio 程式碼
GitHub

取得認證

前往 Adobe.io 網站。
按一下「建立引人入勝的檔體驗」底下的「 進一步 瞭解」。

這會帶您前往 Adobe Acrobat Services 首頁。
按一下 導開始使用 列中的「開始使用」。

您可以在具有 API 開始使用中 看到一個選項，以 建立新認證或 管理現有認證 。 Acrobat Services
按一下 「建立新認證」下方 的「 開始使用」 按鈕。

選擇「 PDF 嵌入API 」選項按鈕，並在下一個視窗中新增您選擇的認證名稱和應用程式網域。

note note
NOTE
這些認證只能用於此處所列的應用程式網域。您可以使用您選擇的任何網域。

認證螢幕擷圖

按一下 「建立認證」 。

精靈的最終頁面會提供您的用戶端認證詳細資訊。將這個視窗保持開啟狀態，以便您可以返回並複製用戶端 ID （API 鍵），以供後續使用。
按一下 「檢視檔」 ，前往提供有關如何使用此API詳細資訊的檔。

第 2 部分：將 PDF 內嵌API新增至網頁 part2

第 2 部分中，您將瞭解如何輕鬆地將 PDF 嵌入API入網頁。您將透過使用 Adobe PDF Embed API 線上示範來建立我們的程式碼來完成此操作。

取得練習代碼

我們建立了可供您使用的程式碼。雖然您可以使用自己的程式碼，但示範將會採用教學課程資源的情境。在此 🔗 下載範例代碼。

前往 Adobe Acrobat Services 網站。
按一下 導覽列中的 API ，然後移至 下拉式連結中的「PDF 嵌入API 」頁面。
按一下 「試用示範」 。

隨即出現新的視窗，其中包含開發人員的 PDF 內嵌API沙箱。

您可以在此查看不同檢視模式的選項。
針對「完整視窗」、「大小容器」、「內側」和「Lightbox」按一下不同的檢視模式。
按一下 「全視窗」 檢視模式，然後按一下 「自訂」 按鈕以開啟或關閉選項。
停用「下載 PDF」選項。
按一下 「產生程式碼」 按鈕以查看程式碼預覽。
從第 1 部分的「用戶端認證」視窗複製 用戶端 ID 。
在 程式碼編輯器中開啟 Web -> 資源 -> js -> dc-config.js 檔案。

您會看到用戶端 ID 變數存在。
在雙引號之間貼上客戶認證，將用戶端 ID 設定為您的認證。
返回開發人員沙箱程式碼預覽。

複製含有 Adobe 腳本的第二行：

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

腳本的螢幕擷圖

前往程式碼編輯器，然後開啟 Web -> 練習 -> index.html 檔案。
將腳本程式碼貼到 <head> 第 18 行的檔案中，並加上注釋：「 TODO：練習 1：插入內嵌API SCRIPT 標籤」 。

返回開發人員沙箱程式碼預覽，並複製第一行具有：

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

複製程式碼所在位置的螢幕擷取

前往程式碼編輯器，然後再次開啟 Web -> 練習 -> index.html 檔案。
在 <div> 行 67 行的注釋下方，將程式碼 <body> 貼到檔案中：「 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> 。
修改相同 索引.html 檔案第 70 行，以包含先前建立的用戶端 ID 變數。
修改相同 索引.html 檔案第 72 行，更新 PDF 檔案位置，以使用本機檔案。

/resources/pdfs/whitepaper.pdf 中的教學課程檔案中有 一個可用的教學課程 檔案。
流覽至 <your domain>/summit21/web/exercise/ ，儲存修改過的檔案並預覽網站。

您應該會在瀏覽器中以全視窗模式顯示技術白皮書。

第 3 部分：存取 Analytics API part3

現在，您已成功建立網頁，其中包含 PDF 內嵌API呈現 PDF，第 3 部分現在可以探索如何使用JavaScript事件來度量分析，以瞭解使用者如何使用 PDF。

尋找檔

PDF 內嵌API中有許多不同的JavaScript事件可供使用。您可以從 Adobe Acrobat Services 檔存取這些檔。

流覽至檔網站。
檢閱API中提供的不同事件種類。這些都有助於參考，而且對未來的專案也有益。

複製網站上列出的範例程式碼。

請以此作為本公司程式碼的基礎，並加以修改。

複製範例程式碼的位置螢幕擷圖

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
);