PDF Analytics: Get Insights on Embedded PDFs on Your Website

One of the primary reasons that PDFs have become so ubiquitous is that it is so easy to take anything from any app and turn it into a PDF and know that it will look exactly as you intended. For web developers, though, they need tools to make it easier to use on the web.

Ben Vanderberg
Apr 17, 2020 · 5 min read

Making sure that the document looks exactly as you originally intended has always been the vision of PDF from its founding. It’s for this reason PDF often holds legal weight for customers around the world and is as ubiquitous as paper is in the physical world.

For web developers, though, PDFs can sometimes be a struggle. While the PDF does display documents exactly as the author intended, web developers expect control, ease when incorporating into their designs, and expect to have the same analytics that they have grown accustomed to with web content.

So, what if you could:

  • Get more data to understand how your visitors were viewing and interacting with your PDFs?
  • Make PDF a first-class citizen in viewing experiences on the web?

In my previous post, I walked through how you can easily embed a PDF into any website using Adobe PDF Embed API (PDF Embed). In this post, I will walk-through how you can connect this viewer to Adobe Analytics, and how you can connect event listeners to whatever you want!

What You Will Need

Events Tracked

PDF Embed has a variety of different events that can be tracked within the embedded viewer. These can be used to:

  • Track and understand visitor’s interest and behaviors while reading PDFs
  • Extend the viewing experience by adding additional functionality such as chatbots or calls to action based on things like how long they spent on the page, how many pages they viewed, etc.

There are a variety of events available including:

Source: Adobe PDF Embed API documentation

Check out examples on GitHub.

Connecting to Adobe Analytics

Adobe DC View SDK when embedded into websites can be connected to Adobe Analytics to get insights on reading habits of PDFs.

Are you a subscriber of Adobe Analytics? PDF Embed can push data easily into your Report Suite. All you will need is your reportSuiteId and you can create a dashboard to learn about your viewers. You can see instructions here on how to get more insights. You can also use the live demo to generate your embed viewer.

Once you have your reportSuiteId set, you will need to configure your Report Suite in Adobe Analytics to add your context variables to make sure they are associated with the appropriate event tags. When you read the instructions, you can set your context variables to each of the events listed:

  • a.dc.zoomLevel
  • a.dc.loadPDF
  • a.dc.viewPage
  • a.dc.download
  • a.dc.search
  • a.dc.bookmarkClicked
  • a.dc.copyText
  • a.dc.print

Using event listeners

Not an Adobe Analytics customer? Not a problem! You can still take advantage of PDF analytics by capturing all of the events from PDF Embed in JavaScript.

Let’s start with embedding a viewer into a webpage:

Sample embed code to place an PDF Embed viewer in a webpage.

If you’re unsure how to create your Client ID, check out my post on how to quickly setup your viewer for the first time. It takes only a couple minutes. The Client ID is used to authenticate a domain. So if you use the code above locally in an HTML file, it will render, but if you host it on a web server, your Client ID must match the domain related to your Client ID or it will not render your PDF.

Below is a snippet of how, within your addEventListener function, you can add code to collect events that come from PDF Embed:

Register a callback with PDF Embed to collect events. See full code here.

See the full snippet below to see all of the different events you can use as callbacks:

What you will see in the code is a switch that will list out each of the different events that are provided by PDF Embed. You can then use this code to push data into your own applications or analytics software, or trigger other events to occur on a page, such as prompt a paywall after you reach the second page, trigger to collect data from a person to create a lead, etc.

Once you add this code to your website, you will be able to use your Inspector to see the different outputs. You can then use these to push the data into whatever application you like!

From the snippet, this will export your events out to the Console so that you can understand what data you can collect from PDF Embed.

Conclusion

PDF Embed provides greater control back to the web developer to easily manage the viewing experience and understand their visitors better. It provides developers more flexibility to extend PDF viewing experiences using their own web-native tools. Using integration with Adobe Analytics, it allows you to better understand how your content is being read and viewed so that it can inform your content creation.

Resources

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store