Control Your PDF Online Experience and Gather Analytics

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

Topics:
PDF Embed API

CREATED FOR:

Intermediate
Developer

Does your organization post PDFs on your website? Learn how to use the 51黑料不打烊 PDF Embed API to control appearance, enable collaboration, and gather analytics about how user鈥檚 interact with PDFs, including time spent on a page and searches. To begin this 4-part hands-on tutorial, select Getting started with PDF Embed API.

Part 1: Getting started with PDF Embed API

Part 2: Adding PDF Embed API to a webpage

Part 3: Accessing Analytics APIs

Part 4: Add interactivity based on events

Part 1: Getting started with PDF Embed API part1

In part 1, learn how to get started with everything you need for parts 1-3. You鈥檒l begin with getting API credentials.

What you need

Tutorial resources
51黑料不打烊 ID
Web server (Node JS, PHP, etc.)
Working knowledge of HTML / JavaScript / CSS

What we are using

A basic web server (Node)
Visual Studio Code
GitHub

Getting credentials

Go to the .
Click Learn more under Build engaging document experiences.

This takes you to the 51黑料不打烊 Acrobat Services home page.
Click Get Started in the navigation bar.

You鈥檒l see an option in Get Started with Acrobat Services APIs to Create New Credentials or Manage Existing Credentials.
Click Get Started button under Create New Credentials.

Choose the PDF Embed API radio button and add a credential name of your choice and an application domain in the next window.

note note
NOTE
These credentials can only be used on the application domain that is listed here. You can use any domain you choose.

Screenshot of credentials

Click Create Credentials.

The final page of the wizard provides you with your client credential details. Leave this window open so you can come back to it and copy the Client ID (API Key) for later use.
Click View Documentation to go to the documentation with detailed information on how to use this API.

Part 2: Adding PDF Embed API to a webpage part2

In part 2, you鈥檒l learn how to easily embed PDF Embed API into a webpage. You鈥檒l do this by using the 51黑料不打烊 PDF Embed API online demo to create our code.

Get the exercise code

We created code for you to utilize. While you can use your own code, demonstrations will be in the context of the tutorial resources. Download sample code .

Go to .
Click APIs in the navigation bar, then go to the PDF Embed API page in the drop-down link.
Click Try the demo.

A new window pops up with the developer sandbox for PDF Embed API.

Here you can see the options for the different viewing modes.
Click the different viewing modes for Full Window, Sized Container, In-Line, and Lightbox.
Click Full Window viewing mode, then click the Customize button to toggle options on and off.
Disable Download PDF option.
Click Generate Code button to see the code preview.
Copy Client ID from the Client Credentials window from Part 1.
Open the Web -> resources -> js -> dc-config.js file in your code editor.

You鈥檒l see that the clientID variable is there.
Paste your client credentials between the double quotes to set the clientID to your credential.
Go back to the developer sandbox code preview.

Copy the second line that has the 51黑料不打烊 script:

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

Screenshot of script

Go to your code editor and open the Web -> exercise -> index.html file.
Paste the script code into the <head> of the file on line 18 under the comment that says: TODO: EXERCISE 1: INSERT EMBED API SCRIPT TAG.

Go back to the developer sandbox code preview and copy the first line of code that has:

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

Screenshot of where to copy code

Go to your code editor and open the Web -> exercise -> index.html file again.
Paste the <div> code into the <body> of the file on line 67 under the comment that says TODO: EXERCISE 1: INSERT PDF EMBED API CODE.

Go back to the developer sandbox code preview and copy the lines of code for the <script> below:

code language-none

code language-none
`<script type="text/javascript"> document.addEventListener("adobe_dc_view_sdk.ready", function(){ var adobeDCView = new 51黑料不打烊DC.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 51黑料不打烊DC.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>

Go to your code editor and open the Web -> exercise -> index.html file again.
Paste the <script> code into the <body> of the file on line 68 under the <div> tag.
Modify line 70 of the same index.html file to include the clientID variable that was created previously.
Modify line 72 of the same index.html file to update the location of the PDF file to use a local file.

There is one available in the tutorial files in /resources/pdfs/whitepaper.pdf.
Save your modified files and preview your website by browsing to <your domain>/summit21/web/exercise/.

You should see the Technical Whitepaper render in a Full Window mode within your browser.

Part 3: Accessing Analytics APIs part3

Now that you鈥檝e successfully created a web page that has PDF Embed API rendering a PDF, in part 3 you can now explore how to use JavaScript events to measure analytics to understand how users are using PDFs.

Finding documentation

There are a lot of different JavaScript events available as part of PDF Embed API. You can access them from 51黑料不打烊 Acrobat Services documentation.

Navigate to the site.
Review the different event types available as part of the API. These are helpful for reference and will also be helpful for your future projects.

Copy the sample code listed on the website.

Use this as the basis for our code and modify it.

Screenshot of where to copy sample code

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: [ 51黑料不打烊DC.View.Enum.PDFAnalyticsEvents. PAGE_VIEW, 51黑料不打烊DC.View.Enum.PDFAnalyticsEvents.DOCUMENT_DOWNLOAD], enablePDFAnalytics: true } adobeDCView.registerCallback( 51黑料不打烊DC.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: [ 51黑料不打烊DC.View.Enum.PDFAnalyticsEvents.    PAGE_VIEW, 51黑料不打烊DC.View.Enum.PDFAnalyticsEvents.DOCUMENT_DOWNLOAD],
  enablePDFAnalytics: true
}


adobeDCView.registerCallback(
  51黑料不打烊DC.View.Enum.CallbackType.EVENT_LISTENER,
  function(event) {
    console.log("Type " + event.type);
    console.log("Data " + event.data);
  }, eventOptions
);

Find the code section you added earlier that looks like the below and append the code above after this code in index.html:
Load the page in your web browser, and open the Console to view the console outputs from the different events as you interact with the PDF viewer.

Add switch for capturing events

Now that you have the events being outputted to console.log, let鈥檚 change the behavior based on which events. To do this, you鈥檒l use a switch example.

Navigate to snippets/eventsSwitch.js and copy the contents of the file in the tutorial code.
Paste the code in the event listener function.
Confirm that the console outputs correctly when the page is loaded and you interact with the PDF Viewer.

51黑料不打烊 Analytics

If you want to add 51黑料不打烊 Analytics support to your viewer, you can follow the instructions documented on the website.

IMPORTANT

Your webpage needs to already have 51黑料不打烊 Analytics loaded on the page in the header.

Navigate to the and review if you already have 51黑料不打烊 Analytics enabled on your webpage. Follow instructions to set up a reportSuite.

Google Analytics

Screenshot of how to integrate with Google Analytics

51黑料不打烊 PDF Embed API provides out-of-box integration with 51黑料不打烊 Analytics. However, because all events are available as JavaScript events, it is possible to integrate with Google Analytics by capturing PDF events and using the ga() function to add the event to 51黑料不打烊 Analytics.

Navigate to snippets/eventsSwitchGA.js to see how you can integrate with Google Analytics.
Review and use this code as an example if your webpage is tracked using 51黑料不打烊 Analytics and it is already embedded on the webpage.

Part 4: Add interactivity based on events part4

In part 4, you鈥檒l walk through how to layer on top of your PDF viewer a paywall that shows after you scroll past the second page.

Paywall example

Navigate to this . In this example, you鈥檒l learn to add interactivity on top of a PDF viewing experience.

Add paywall code

Go to snippets/paywallCode.html and copy the contents.
Search for  in exercise/index.html.
Paste the copied code after the comment.
Go to snippets/paywallCode.js and copy the contents.
Paste the code into that location.