Prerequisite knowledge
  • Knowledge of the Adobe Digital Publishing Suite
  • Experience working with HTML and JavaScript (for Custom Store implementation)
User level: Intermediate
Required products
Other Requirements:
  • Access to DPS Application Account configuration
Original publication date: 05/01/2013
Modified: 09/08/2014 (Change log)
Sample files
By downloading software from the Adobe Web site you agree to the terms of our license agreement. Please read it before downloading.
 
Note: If you have questions about this article, use the tutorial feedback link at the bottom of the article. Please don’t contact technical support with questions about Adobe Developer Connection articles.
How many times have you flipped through a magazine in line at the checkout counter before deciding to buy? With the Adobe Digital Publishing Suite, publishers can enable a Free Article Preview and pique readers’ interest with select free articles while also encouraging them to purchase with teasers of other articles within the preview experience. Readers will be able to enjoy the full experience of free articles while being prompted to buy or subscribe when they navigate to other articles within the publication.
The Article Preview feature can be enabled for retail folios published with Folio Version v26 or higher and Apps using the v26 or higher viewer. With v27 (July 2013), readers can also preview a limited number of metered articles before making a purchase. The Article Preview feature does not apply to free publications.
The Article Preview feature is currently available only for the iPad and is not available for folios with sections.
 

 
Overview of the Preview Folio Experience

When a preview folio is available, readers can click the Preview button to enter the preview folio.
 
Figure 1. New “Preview” button for a folio with free articles enabled
Figure 1. New “Preview” button for a folio with free articles enabled
 
 
Preview folios will open to the publication cover. Within the preview folio, readers will be able to fully interact with all free articles. As of v27 (July 2013), readers will also have the option to preview a limited number of metered articles based on a number specified by the publisher as a paywall threshold. When readers navigate to an article that is not free, either when flipping through, or when browsing, they will have the option to purchase the issue or subscribe to the publication.
With the support for metered article preview in v27, the Large Purchase Pane has been redesigned to include a "Read Article" button to enable a preview download of metered articles and to include the article TOC thumbnail and available article metadata including the Title, Author and Description. The article TOC thumbnail and metadata will update as the reader swipes through articles. 
When a reader navigates to a metered article in flip view, they will see a preview image of the first page of the article behind the large purchase panel. If the article is metered and the reader has not yet reached the paywall limit set by the publisher, the reader will have the option to dowload the metered article by tapping the “Read Article” button. After making a purchase, all remaining, non-free content will be downloaded to the reader’s device.
 
Figure 2. Article preview image and large purchase panel with read article, buy and subscribe buttons (for metered articles)
Figure 2. Article preview image and large purchase panel with read article, buy and subscribe buttons (for metered articles)
 
 
If the reader has reached the paywall limit set by the publisher, or the article has been set to protected, the “Read Article” button will not appear.
 
Figure 3. Article preview image and large purchase panel with buy and subscribe buttons only (for protected articles and when paywall threshold has been reached)
Figure 3. Article preview image and large purchase panel with buy and subscribe buttons only (for protected articles and when paywall threshold has been reached)
 
 
Readers can navigate to other articles in the preview folio by swiping while in folio view or by using the table of contents or browse mode. As of v27 (July 2013), thumbnails are displayed for all pages within browse mode and a gradient treatment is applied to articles that are not free to differentiate them from free content. This also applies to pages within articles marked as “Horizontal Swipe Only.”
 
Figure 4. Preview thumbnails and buy/subscribe buttons when in browse mode
Figure 4. Preview thumbnails and buy/subscribe buttons when in browse mode
 
 
As of v27 (July 2013), preview images in flip view use browse thumbnails with a mesh treatment applied. The thumbnails include proxy images for interactive overlays and reduce the overall preview folio size.
Note: If a reader archives a preview folio, only the free articles will be downloaded to their device when they restore the preview folio. The reader can request to download metered articles they previously viewed by tapping the “Read Article” button if they have not already reached the paywall threshold. In the next release, metered articles will be included when a preview folio is restored following an archive.

 
Article Preview with iOS 7

As of v28 (September 2013), the Article Preview feature displays with a new, lighter UI when a v28 app is running on iOS 7. To learn more about the new UI and design for v28 viewers running on iOS 7, see the article iOS 7 Support in v28 DPS Viewer.
 
Figure 5. iOS 7 display of Article preview image and large purchase panel with read article, buy and subscribe buttons (for metered articles)
Figure 5. iOS 7 display of Article preview image and large purchase panel with read article, buy and subscribe buttons (for metered articles)
 
 

 
Alternate Free Article Preview Experience

As of v32 (September 2014), you can choose to enable an Alternate Free Article Preview experience. The alternate experience has a smaller purchase pane and provides readers with the ability to easily navigate to free articles throughout the preview issue. Readers will also be able to identify free articles in the table of contents and browse view. To learn more about the Alternate Free Article Preview Experience and how to enable it, see the article Configuring the Alternate Free Article Preview Experience.
 
Figure 6. The purchase panel in the alternate free article experience includes a link to navigate to the next free article in the folio
Figure 6. The purchase panel in the alternate free article experience includes a link to navigate to the next free article in the folio
 
 

 
Using Free Article Preview

To use Free Article Preview, you must be using a v26 Viewer of higher. In addition, ensure that when creating your folios in InDesign you have specified folio version v26 or higher and that articles you want to specify as Free are also v26 or higher.
 
You will set the desired article access in Folio Producer and enable the Article Preview feature in the Account Admin Panel. Optionally, you can provide an Article Preview experience within a Custom Store.
 

 
Specifying Article Access in Folio Producer

With Article Preview in v26, Adobe Digital Publishing Suite introduced a new article access type: Free. In Folio Producer Editor, you will see a drop down for Article Access that contains three access types: Free, Metered, Protected. (See figure 5)
Your Folio and articles you intend to mark as free must be v26 or higher for the “Free” option to appear.
Article Access settings affect the experience for both Article Preview and Social Sharing and should be set to reflect the publisher's desired behavior (See the article Integrating Social Sharing into DPS Apps).
 
Article Access Controls
Free Articles are available to all readers and will be downloaded to the reader’s device as part of their Preview Folio. Free articles do not count against Paywall limits.
 
Metered Articles are available to readers who have not purchased the folio only up to the limit set by the publisher. Publishers control the number of Metered Articles that can be viewed by setting the Paywall Threshold for the Device Viewer in the Account Admin panel.
Metered articles are also available to readers when they are shared from any folio via email or a social network. Shared article views in the desktop Web Viewer are controlled by setting the Web Viewer Paywall Threshold in the Account Admin Panel (See the article Integrating Social Sharing into DPS Apps). Note that the Web Viewer Paywall Threshold is a different setting than the threshold for the Device Viewer.
 
Protected Articles are only available to readers who have purchased the issue, are subscribed to the publication, or are entitled to the publication via Direct Entitlement.
To use Article Preview, at least one article in each preview folio must set to have an Article Access of Free.
 
Figure 7. Enabling free articles in Folio Producer
Figure 7. Enabling free articles in Folio Producer
 
 
It is recommended that publishers set the cover, as well as the table of contents and at least one article, to Free. All preview folios will first open to the cover.
NOTE: If the “Free” option does not appear in the Article Access drop down menu in Folio Producer, your folio and articles do not have a version of 26 or higher specified. This is often noticed when enabling Article Preview for back issues. Updating the folio version in Folio Producer only updates the version at the folio level. It does not update any articles inside the folio. Update the specific articles you want to make Free so that the articles are v26. Once the articles are v26, the "Free" option will appear in the article access setting and you will be able to mark the articles as free.
It is not necessary to update all articles in a back issue. Only articles intended to be free must be v26.
 

 
Enabling Article Preview and Setting Paywall Limits in the Account Admin Panel

To use Article Preview, you will to need to enable the Article Preview feature at the publication level in the Digital Publishing Suite administration dashboard. Login to http://digitalpublishing.acrobat.com with an account that has administration privileges. When the dashboard loads, click the Account Administration link in the left sidebar.
Once you are presented with a listing of accounts, click the application account for which you wish to enable Article Preview.
 
Figure 8. Enabling Article Preview and Paywall Limits in the admin panel
Figure 8. Enabling Article Preview and Paywall Limits in the admin panel
 
 
Click the “Enable Article Preview” checkbox. This feature is off by default.
When you enable Article Preview, the fields to enable a Paywall Threshold for the Device Viewer will become active.

 

Setting a Paywall Threshold
After you enable Article Preview, you will have the option to enable a Paywall threshold. The Paywall setting controls how many metered articles a reader can preview. After a reader reaches the paywall limit you set, they will not be able to preview any additional metered articles and will have to purchase the issue or subscribe to access additional content.
Note: If you enable Article Preview and do not enable the Paywall Threshold, metered articles will be available to the reader with no limit.
 

 
Enabling Preview Folios from a Customer Store

For publishers who use a Custom Store implementation, they can provide an Article Preview experience by using the Library and Store JSAPI.
The files accompanying this article contain a very simple example of a store that supports folio preview. The snippets below can be found in main.js.
Below are the areas of the API to use to enable the preview folios from a custom store.
Check if the folio is purchaseable and supports previews:
 
if (this.folio.isPurchasable && !this.folio.hasSections) { // Only check to see if preview is supported if this folio is purchasable and doesn't have sections. var transaction = this.folio.verifyContentPreviewSupported(); // Check to see if this folio supports previews. transaction.completedSignal.addOnce(this.verifyContentPreviewSupportedHandler, this); }
Check if the preview has already been downloaded. If the preview folio has not been downloaded, provide the reader with the ability to download the preview folio:
 
FolioView.prototype.verifyContentPreviewSupportedHandler = function(transaction) { if (transaction.state == adobeDPS.transactionManager.transactionStates.FINISHED) { if (this.folio.canDownloadContentPreview() || // Preview has not been downloaded yet. this.folio.supportsContentPreview) { // canDownloadContentPreview()==false but supportsContentPreview==true so preview has already been downloaded. this.$el.append("<div class='open-preview'>PREVIEW</div>"); // Add a click handler for the text link. var scope = this; this.$el.find(".open-preview").on("click", function() { try { if (scope.folio.canDownloadContentPreview()) { // Preview can be downloaded. var transaction = scope.folio.downloadContentPreview(); // Start the download. // Add handlers so a download status can be displayed. transaction.progressSignal.add(scope.download_progressSignalHandler, scope); transaction.completedSignal.add(scope.download_completedSignalHandler, scope); } else { // Preview is already downloaded so view the folio. // Check to see if the downloaded content preview is now entitled. // First check if it is downloadable (only true if entitled) // and the folio is not updatable // and we do not have a download going. // If so, start a download because we expect one to // be acting on the folio if we are not done if (scope.folio.isDownloadable && !scope.folio.isUpdatable && scope.folio.currentStateChangingTransaction() == null) { // Start a new download transaction to get the rest of the folio scope.folio.download(); } // If a user is signing into direct entitlement it is recommended // to cancel any transactions on the folio using the code below // so the entire folio is downloaded when a user views it. This // will be the case if a preview download is occurring while // signing into direct entitlement. /* for (var uuid in adobeDPS.libraryService.folioMap.internal) { var folio = adobeDPS.libraryService.folioMap.internal[uuid]; if (folio.isPurchasable) { var transaction = folio.currentStateChangingTransaction(); if (transaction != null && transaction.isCancelable) { transaction.cancel(); } } } */ scope.folio.view(); } } catch(e) { alert(e); } }); } } } // Updates the progress bar for downloads and updates. FolioView.prototype.download_progressSignalHandler = function(transaction) { this.setDownloadPercent(transaction.progress); } // Handler for when a download or update completes. FolioView.prototype.download_completedSignalHandler = function(transaction) { transaction.stateChangedSignal.remove(this.download_stateChangedSignalHandler, this); transaction.progressSignal.remove(this.download_progressSignalHandler, this); transaction.completedSignal.remove(this.download_completedSignalHandler, this); this.isTrackingTransaction = false; this.folio.view(); }

 
Where to go from here

A summary the different methods for offering free content with DPS is available here. Additional help on enabling Article Preview is available in Digital Publishing Suite Help. The Adobe TV Digital Publishing Suite series has a video on Free Article Preview.
Comments are currently closed as we migrate to a new commenting system.  In the interim, please provide any feedback using our feedback form. Thank you for your patience.
 
Change log
9/8/14: Added section about the new Alternate Free Article Preview option.
9/14/13: Updated article for the v28 DPS release (September 2013) and added information about iOS 7 support.
7/15/13: Updated article for the R27 DPS release (July 2013) which includes Metered Article support.