Tracking user interaction within a PDF
We are using PDF.js a JavaScript library to parse PDF files using the HTML5 Canvas. The browser output is HTML, not a PDF. That makes tracking easy as cake.
- Git
- PDF.js by mozilla
- Google Analytics
- download
- zoomIn
- zoomOut
- presentationMode
- viewFind (user searches)
-
Get Git:
https://git-scm.com/downloads -
Get the JavaScript tracking snippet:
https://developers.google.com/analytics/devguides/collection/analyticsjs/ -
Get PDF.js:
$ git clone git://github.com/mozilla/pdf.js.git
$ cd pdf.js
# following pdf.js install instructions https://github.com/mozilla/pdf.js#getting-the-code:
$ npm install -g gulp-cli
$ npm install
$ gulp server
# open http://localhost:8888/web/viewer.html
- Add pdf-analytics.js:
- add pdf-analytics.js to pdf.js/web
- add your JavaScript tracking snippet to pdf.js/viewer.html (right before the closing body tag):
<script src="pdf-analytics.js"></script>
<script>
var trackInteraction = function(cat, url) {
ga('send', 'event', cat, 'scroll', url, {
'transport': 'beacon'
});
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'YOUR-TRACKING-ID', 'auto');
ga('send', 'pageview');
</script>
</body>
Done
Are very welcome
MIT