Control your PDF online experience and gather analytics

Does your organization post PDFs on your website? Learn how to use the Adobe PDF Embed API to control appearance, enable collaboration, and gather analytics about how user’s interact with PDFs, including time spent on a page and searches. To begin this 4-part hands-on tutorial, click on 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

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

What you need

  • Tutorial resources download
  • Adobe ID get one here
  • 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

  1. Go to the Adobe.io website.

  2. Click Learn more under Build engaging document experiences.

    Screenshot of the Learn more button

    This takes you to the Adobe Document Services home page.

  3. Click Get Started in the navigation bar.

    You’ll see an option in Get Started with Document Services APIs to Create New Credentials or Manage Existing Credentials.

  4. Click Get Started button under Create New Credentials.

    Screenshot of Get Started button

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

    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

  6. 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.

  7. Click View Documentation to go to the documentation with detailed information on how to use this API.

    Screenshot of create credentials button

Part 2: Adding PDF Embed API to a webpage

In part 2, you’ll learn how to easily embed PDF Embed API into a webpage. You’ll do this by using the Adobe 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 here.

  1. Go to Adobe Document Services website.

    Screenshot of Adobe Document Services website

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

    Screenshot of PDF Embed API dropdown

  3. Click Try the demo.

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

    Screenshot of Try the demo

    Here you can see the options for the different viewing modes.

  4. Click the different viewing modes for Full Window, Sized Container, In-Line, and Lightbox.

    Screenshot of viewing modes

  5. Click Full Window viewing mode, then click the Customize button to toggle options on and off.

    Screenshot of Customize button

  6. Disable Download PDF option.

  7. Click Generate Code button to see the code preview.

  8. Copy Client ID from the Client Credentials window from Part 1.

    Screenshot of Client ID

  9. Open the Web -> resources -> js -> dc-config.js file in your code editor.

    You’ll see that the clientID variable is there.

  10. Paste your client credentials between the double quotes to set the clientID to your credential.

  11. Go back to the developer sandbox code preview.

  12. Copy the second line that has the Adobe script:

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

    Screenshot of script

  13. Go to your code editor and open the Web -> exercise -> index.html file.

  14. 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.

    Screenshot of where to paste script code

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

    <div id=”adobe-dc-view”></div>
    

    Screenshot of where to copy code

  16. Go to your code editor and open the Web -> exercise -> index.html file again.

  17. 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.

    Screenshot of where to paste code

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

    <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. Go to your code editor and open the Web -> exercise -> index.html file again.

  20. Paste the <script> code into the <body> of the file on line 68 under the <div> tag.

  21. Modify line 70 of the same index.html file to include the clientID variable that was created previously.

    Screenshot of line 70

  22. 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.

  23. 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

Now that you’ve 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 Adobe Document Services documentation.

  1. Navigate to the documentation site.

  2. 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.

    Screenshot of reference guide

  3. 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

    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. Find the code section you added earlier that looks like the below and append the code above after this code in index.html:

    Screenshot of where to paste code

  5. 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.

    Screenshot of loading the page

    Screenshot of the code for loading the page

Add switch for capturing events

Now that you have the events being outputted to console.log, let’s change the behavior based on which events. To do this, you’ll use a switch example.

  1. Navigate to snippets/eventsSwitch.js and copy the contents of the file in the tutorial code.

    Screenshot of where to copy code

  2. Paste the code in the event listener function.

    Screenshot of where to paste code

  3. Confirm that the console outputs correctly when the page is loaded and you interact with the PDF Viewer.

Adobe Analytics

If you want to add Adobe Analytics support to your viewer, you can follow the instructions documented on the website.

IMPORTANT

Your webpage needs to already have Adobe Analytics loaded on the page in the header.

Navigate to the Adobe Analytics documentation and review if you already have Adobe Analytics enabled on your webpage. Follow instructions to set up a reportSuite.

Google Analytics

Screenshot of how to integrate with Google Analytics

Adobe PDF Embed API provides out-of-box integration with Adobe 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 Adobe Analytics.

  1. Navigate to snippets/eventsSwitchGA.js to see how you can integrate with Google Analytics.

  2. Review and use this code as an example if your webpage is tracked using Adobe Analytics and it is already embedded on the webpage.

    Screenshot of Adobe Analytics code

Part 4: Add interactivity based on events

In part 4, you’ll 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 example of a PDF behind a paywall. In this example, you’ll learn to add interactivity on top of a PDF viewing experience.

Add paywall code

  1. Go to snippets/paywallCode.html and copy the contents.

  2. Search for <!-- TODO: EXERCISE 3: INSERT PAYWALL CODE --> in exercise/index.html.

    Screenshot of where to copy code

  3. Paste the copied code after the comment.

  4. Go to snippets/paywallCode.js and copy the contents.

    Screenshot of where to paste code

  5. Paste the code into that location.

Try Demo with Paywall

Now you can view the demo.

  1. Reload index.html on your website.

  2. Scroll down to a page > 2.

  3. Show the dialog come up to challenge user after the second page.

    Screenshot of viewing the demo

Additional resources

Additional resources can be found here.

On this page