Determining DPS Reader context with JavaScript and HTML

I have many customers who ask how to deliver different content to readers based on their reading context. For instance, I have a magazine customer who wants to ensure that readers who are using browsers to read a magazine online receive a message telling them that they can read the magazine offline on their tablet. While there is no way to distinguish between an app-based reader and a browser-based reader for DPS-native overlays, it is possible to do it in a Web Content overlay using JavaScript. (If you have my DPS Examples app installed on your iPad, and you’re reading this blog on your iPad, then tap here to see an example of content that changes with context.)

The object window.location.protocol will return file: for app-based readers, and it will return http: for browser-based readers. Using this, we can make a function to switch a div on or off based on the value of window.location.protocol.

Consider the following HTML snippet:

<head>
<!--I'm using Typekit for the web font and HTMLResources for the tablet
You'll need to get your own kit (available with your Creative Cloud membership)
and include contentviewer.adobe.com in the kit settings
-->
<script type="text/javascript" src="//use.typekit.net/get_your_own_typekit_code.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script>
 //This function turns divs on or off depending on how the reader accesses the folio
function webOrApp() {
 if (window.location.protocol == "file:") {
 document.getElementById('webMessage').style.display = "none";
 }
 else
 {
 document.getElementById('appMessage').style.display = "none";
 }
}
</script>
<!--the styles are just to show differences between app and browser
--><style type="text/css">
@font-face { font-family: minion-pro-bold;
 src:url(../../../HTMLResources/fonts/MinionPro_Bold.otf) format("opentype");
 } 
.web {
 font-family: "minion-pro-display",serif;
 font-style: normal;
 font-weight: 700;
 font-size: 36pt;
 color: #CFF;
 text-align: center;
}
.app {
 font-family: "minion-pro-bold",serif;
 font-style: italic;
 font-size: 36pt;
 color:#FCF;
 text-align: center;
}
</style>
</head>
<body bgcolor="#0000FF">
<div id="webMessage" class="web">This message is for readers on the web.<br>
<img src="chimp.png"></div>
<div id="appMessage" class="app">This message is for readers in the app.<br>
<img src="monkey.png"></div>
<script>webOrApp();</script></body>

This very basic example loads the page and then fires the switching function at the end, so that it can “see” the two divs and therefore hide the appropriate one. If the reader is using an app, then window.location.protocol returns file: and the div called “webMessage” gets switched off. In order for it to work for you, you will need to provide two images to replace my chimp.png and monkey.png. Put them in a folder along with an html file containing the snippet, make a Web Content overlay, and point it at the html file. Be sure to set it to auto play, and depending on the content of the divs, you might want to turn off “Allow User Interaction.”

The example also includes fonts to match the InDesign layout. In the App, I use the HTMLResources folder, about which you can learn more about in the help file for Hyperlinks. In the browser, I use fonts from Typekit, which is a web-based font service from Adobe that’s part of Creative Cloud Membership. You could also use Adobe Edge Web Fonts or other hosted web font services.

Now, to test how this works, you need to make a folio, add your InDesign file as an article, publish the folio into an app that has Web Renditions enabled and Social Sharing turned on in the Viewer. Notice the publish the folio instruction. In order to see the folio in a browser, you need to publish to a Viewer App and then socially share the article. Since Single Edition can’t use social sharing, this will only apply to customers who use Pro or Enterprise. In addition, in order to test whether this works, you will need access to a DPS Application account that has Web Renditions enabled and a Viewer App that has Social Sharing turned on. Once you’ve published, open the folio, browse to your app, and then share it by email with yourself to test.

Here is how the folio renders on an iPad:

context_on_ipad

…and in a browser:

context_in_browser

The ease with which we can distinguish between readers in a browser and readers in an app allows publishers to provide content that can target users based on how they engage with that content, as well as to offer differentiated advertising. It also allows you to take advantage of browser features that won’t work on a tablet due to the limitations of the WebKit overlay, simply by making two versions of the HTML and switching on the appropriate div. Sometimes, simple solutions open up complex possibilities, and this is one of those solutions.

Share on Facebook

5 Responses to Determining DPS Reader context with JavaScript and HTML

  1. jurecka says:

    Hello James, I’m a big fan of both your blog and your DPS ipad apps. I’m wondering if you could help me solve a problem…
    I’m still being asked for a serial number in DPS app builder, although I have a creative cloud subscription. I’ve already re-installed DPS app builder, with no results. I’m still getting the prompt to activate with a serial number. I should mention that I have two creative cloud memberships, one for home and one for work; I realize this might cause problems.

    I’ve already been here: http://helpx.adobe.com/digital-publishing-suite/kb/dps-ccm-users-get-a ctivate.html

    thanks, I really need the help.

    • James Lockman says:

      Hi, Jurecka.

      Thanks for being a fan. Keep your eye on the DPS Developer Center, too, as I have articles over there from time to time.

      I assume that you have deleted your App Builder and reinstalled. Also, have you tried to completely sign out of Creative Cloud from everywhere, including your browser(s) and your desktop sync (if you have it on)? Then, once you are completely signed out, sign in on the Folio Builder in InDesign and try to Create App from the flyout menu in the Folio Builder panel.

  2. Ilito says:

    Hi James,

    How configurate web viewer, embedded in our site, to show folio’s layout in portrait?

    Today, all pages are showing in landscape but, our magazine are using all content in portrait layout.

    We’r using both layouts , but landscape is only a advice “turn your tablet to portrait”

    Thanks!

    • James Lockman says:

      You can type the letter “R” on the keyboard or you can click the overlapping rectangle icon in the lower left hand corner of the folio viewer window. If your folio does not support dual orientation, then this icon will not be present.

      • Ilito says:

        But the portrait layout can be default?
        Can I call some method to change orientation?

        Thank you