Download Merchandising with Adobe® Digital Publishing Suite

Adobe Digital Publishing Suite White Paper
Merchandising with Adobe® Digital Publishing Suite
Drive additional revenue through a Custom Store with
Digital Publishing Suite, Enterprise Edition
Table of contents
1: Business advantages
of a Custom Store
2: Implementing a
Custom Store
5: Getting started
7:Custom Store API
Reference
10: Summary
To promote product sales and increase brand loyalty, companies have traditionally paid close attention to
how their content is presented to consumers. Publishers, for example, hire merchandisers to ensure that
their products are presented attractively in a retail store. Large brand organizations also work hard to craft
the physical presentation of their products and goods on store shelves. Similarly, with digital publications,
new merchandising capabilities in Adobe Digital Publishing Suite give companies control and flexibility in
the presentation of content, products, and services, enabling them to streamline the purchase process,
encourage brand engagement, and drive incremental sales.
With Adobe Digital Publishing Suite, Enterprise Edition, a company can implement a Custom Store in a
publishing application to merchandise content, products, and services to its audience. The Custom Store
helps consumers easily find and purchase products as well as engages users with the company’s
meticulously crafted brand. It also provides cross-sell and upsell opportunities for readers to purchase
additional content and non-publishing products and services, such as cinema tickets in a movie-oriented
publication, through both online and offline transactions. By supporting best-in-class merchandising
practices, Digital Publishing Suite allows companies to produce high-impact tablet apps that drive
business results.
This white paper describes how to design and build a Custom Store with Adobe Digital Publishing Suite,
Enterprise Edition.
Business advantages of a Custom Store
Attractively present content, products, and services
In a Custom Store, companies can attractively display content, products, and services available for
purchase. Publishers looking for extended merchandising functionality beyond the Library mode of
multifolio applications, which offers only basic in-app content purchase capabilities, can implement a slot
in the bottom navigation bar of their application to provide a Custom Store. Within this store, the publisher
controls all design decisions, including colors, typography, layout, and product descriptions. In contrast,
the basic Library mode only lists content sequentially and does not allow you to sell additional nonpublishing products or services.
By providing merchandising within the publishing application, companies can improve conversion and
purchase rates by facilitating product discovery, while helping reduce traditional lead-generation and
customer-acquisition expenses in the process.
Engage consumers with the brand
With increased control over the presentation of for-sale content, products, and services, companies can
immerse their readers in a meticulously crafted brand experience. Publishers can also integrate interactive
promotional assets, such as video, advertising, and social media feeds, such as to further capture and
retain reader attention. Publishers can also highlight timely special-interest publications, changing the
promotions as necessary to sell related content and products.
A Custom Store allows
publishers and brand
organizations to:
•Attractively present
content, products, and
services
•Engage consumers with
the brand
•Drive transactions and
incremental revenue
Drive transactions and incremental revenue
Implementing a Custom Store enables companies to drive incremental purchases of content, products,
and services according to merchandising best practices, beyond the sequential grid layout offered in the
basic Library mode. With increased control over merchandising, publishers can directly impact publishing
cross-sell and non-publishing product revenue, in addition to developing route-to-market efficiencies with
new and existing customers.
To feature additional publishing content as a cross-sell opportunity, a publisher can create assets in a
Custom Store to highlight a noteworthy folio for purchase or as a subscription offer. Because a Custom
Store uses HTML pages, publishers can link to external e-commerce providers or integrate display
solutions (like Adobe Scene7®) to sell non-publishing products and services. For example, a fashion
magazine could sell products featured in an article by linking directly an external web page or sell the
same merchandise using a custom slot, such as in a “Featured Products,” slot enabled in the navigation bar.
In-app merchandising provides a direct and repeatable communication conduit to interested customers to
drive subscription revenue, sell additional single issues, and promote other titles. Additionally, it enables
companies to cross-sell and upsell other products and services that are of interest to their readers.
Implementing a Custom Store
A Custom Store is a full-screen HTML page owned by the publisher that is inserted into one of the custom
slots available within a viewer application’s navigation toolbar. Unlike other options typically implemented
through a custom slot (like a My Account page or App FAQs), the Custom Store leverages an extended set
of JavaScript APIs that provide folio state and subscription information and allow developers to initiate
view and buy transactions for folios. Publishers can also include links that transfer a user to a company’s
website to complete a purchase of physical products or services.
Custom Store pages are created using HTML and can contain JavaScript and cascading style sheets (CSS)
to enhance interactivity and content presentation, respectively. Because the content is created in HTML, it
is displayed using a UIWebview on iOS and a WebView on Android.™ Because Custom Store content is
simply HTML, JavaScript, and CSS, publishers have complete control over the UI. While the Library view in
a viewer application continues to display and provides access to a reader’s purchases (although in a
sequential, non-merchandised fashion), the Custom Store displays additional content for purchase with
full control of the layout.
In addition to a Custom Store, developers can also use the custom slots at the bottom of the app
navigation bar for other purposes, such as subscriber-only content, a game, or a store to sell physical
goods. However, because many publishers will use a custom slot to create a Store, Digital Publishing Suite
provides a set of JavaScript APIs to mimic the interactions in the Library. A Custom Store can use these
APIs to buy subscriptions or folios, view folios, and more. Digital Publishing Suite offers up to three custom
slots within the navigation bar: One one slot can be dedicated to the Custom Store, and the remaining two
can be used for additional customized, branded content built using HTML.
Companies can also use the Direct Entitlement capabilities of Digital Publishing Suite, Enterprise Edition to
further customize content access and display in the Custom Store. Direct Entitlement offers the ability to
provide users content based on authentication with an external database (for example, a subscription
database or LDAP directory). Through a company can determine a user’s role and then decide whether to
display content to the user. In a Custom Store, companies can use Direct Entitlement to determine whether
to show different cross-sell opportunities to subscribers versus non-subscribers. Similarly, brand
organizations can display exclusive content to their loyalty program members. Additionally, publishers can
use Restricted Distribution functionality to display folios available for purchase or download only to a
specific, authorized group (like sales reps or premium members). For more information on these
capabliites, view a video at these capabilities, visit http://tv.adobe.com/watch/digital-publishing/
direct-entitlement.
Adobe Digital Publishing Suite White Paper
2
Required resources
The resources required to create a Custom Store are the same needed to create a web page: a designer
to create a compelling visual experience and a developer with HTML, CSS, and JavaScript experience.
Depending on the complexity of the Custom Store, the skills required could range from beginner
to advanced.
Store features
Using HTML, a Custom Store can include more interactive content, such as videos, live feeds, and
animation, than can be displayed inside the standard Library view that ships with Digital Publishing Suite.
Custom Stores can include animated banners to capture and retain visitor attention.
Adobe Digital Publishing Suite White Paper
3
Publishers can include cross-sell or upsell offers, like a subscription call-to-action, to drive incremental revenue.
Custom Stores can include live streaming information, such as a Twitter feed.
Adobe Digital Publishing Suite White Paper
4
Design considerations
When making decisions regarding the design and development of a Custom Store, it is important to
consider the environment in which it will function. The Custom Store sits inside a viewer application
alongside the standard Library view that is available as a default slot in a viewer. From a reader’s
perspective, it is critical that users understand when they are in the Library versus the Store. Readers
continue to use the Library to access, download, and view content, while the Store is the place for users to
discover new and related content available for purchase. Although users can purchase content in the
Library, the Store enables content discovery and purchase in a more engaging, customizable manner.
To make this distinction more clear, a best practice is to have a Custom Store use the flexibility provided
with HTML to differentiate itself from the Library view. To signal the distinction, a publisher can add
interactivity or use different colors for the Custom Store.
It is also important to consider the target device for your Custom Store. Because most users will access the
Custom Store from a mobile device, they will depend on finger-based gestures to interact with the Store
rather than a mouse-based input device. To accommodate touch interactions, carefully design target
areas, such as buttons, large enough for finger-based interaction.
Finally, consider the layouts supported by the target devices and the viewer application. Designs should be
created to match all supported orientations for each supported device. Although users cannot dynamically
change the window size as they can with a web page inside of a browser, they can rotate the device. On
rotation, the design should gracefully transition between landscape and portrait layouts to provide users a
consistent sense of location.
Getting started
To create a Custom Store:
1. Design and build the Store in HTML to suit your needs. A designer and developer should collaborate to
implement the HTML for the target device type in both landscape and portrait orientations. Single
orientation store functionality is planned for the near future.
To sell publishing content:
2.Obtain the ProductIds of the folios that you want users to interact with. These ProductIds are input in the
Folio Producer Service when publishing a folio and are used when making the JavaScript API calls.
3.Add the JavaScript API calls where necessary to the HTML page (see “Custom Store API Reference”).
To sell non-publishing products or services
4. Add relevant links to the Custom Store HTML to take users to your website and complete the transaction.
To finalize the Custom Store:
5.Zip the HTML and any other assets.
6.Create an icon to represent the Custom Store that is displayed in the slot.
7. Using Viewer Builder, create a viewer application that includes the Custom Store by uploading the ZIP
file, along with the Custom Store icon.
Adobe Digital Publishing Suite White Paper
5
Publisher Server
1. Embedded Custom Store loads
HTML, CSS, and JavaScript at
runtime from a publisher’s server.
2. CSS is used to style the page, and
JavaScript includes the ProductIds
used to interact with the Store API.
HTML
</>
3. JavaScript calls the Store API. For
example, buyFolio() is called with
the ProductId, which triggers a buy
transaction in the application.
HTML for a Custom Store is presented to the reader at runtime and allows for folio purchase via integrated APIs. In-app purchases made
through the Store API are subject to the terms and conditions of individual app marketplaces, including revenue-sharing requirements.
Design and build the Store in HTML
Creating a Custom Store is similar to creating a web page and uses the same set of skills, so additional
software is not necessary. After the designer creates the page, the developer implements the design and
tests it in a browser on the desktop. Because the JavaScript APIs are not available on the desktop, the next
step is to test the Custom Store on a device and verify that the page works correctly.
When creating a Custom Store, the folder structure should be flat, with all files in one folder rather than
putting CSS files in one folder and JavaScript files in another. The flat folder structure is a limitation of
Viewer Builder, which should be remedied in the near future. The viewer also suppresses JavaScript alert()
calls, so developers using alert() should use alternate techniques.
Determine Store updating
When creating a Custom Store, decide how the content is to be updated. Because the main HTML page is
embedded in the viewer, decide where the Custom Store logic lives. If it is directly part of the HTML page,
it cannot be changed until the viewer is updated and rebuilt using Viewer Builder. If it is loaded at runtime
from a server using a JavaScript include or window.location, it can be changed whenever a user navigates
to the Custom Store. When using a JavaScript include, because the Custom Store is running in an
application (rather than a browser), cross-domain security restrictions do not apply. As such, it is possible
to load data from multiple domains. If your Custom Store loads cross-domain data, use Safari when testing
on the desktop because local files are not restricted to cross-domain security restrictions.
Adobe Digital Publishing Suite White Paper
6
Add links
When implementing a page with <a> tags, keep in mind that <a> tags with an href attribute open a new
web view that slides up from the bottom. This happens even if the target is not specified or if it is set to
_self, _parent, or _top. However, setting window.location via JavaScript does not open a new web view,
rather it sets the URL for the current web view.
Include offline detection
Depending on the functionality of the Custom Store, it might be necessary to include offline detection.
Because most Custom Stores have dynamic data or the ability to buy and download a folio, implement
offline detection using JavaScript that is either embedded directly in the HTML or loaded using an include.
One way to detect network connectivity is by using an XMLHttpRequest object, loading a URL, and then
checking for readyState == 4 && status != 200 in the onreadystatechange callback.
Create the Store in Viewer Builder
After the Custom Store has been created and tested on the desktop, the next step is to zip the contents
and upload the assets in Viewer Builder. Viewer Builder allows publishers to also upload the Up and Down
buttons used for the tab bar. For end users, the hardware requirements are the same as the viewer. Users
with a device that supports your viewer can see the Custom Store. Performance and HTML
implementations vary across devices. Testing strongly recommended on the target platforms.
Custom Store API reference
For companies cross-selling additional publishing content from within a Custom Store, the following API
calls provide the necessary communication with Digital Publishing Suite, allowing your users to:
• Purchase subscriptions that entitle them to view and download items
• Discover items available for purchase within the Store
• View, purchase, and download items from the Store
Companies selling non-publishing products or services from the Custom Store can link directly to the
company’s website to complete the transaction.
The Custom Store APIs are ready for use when window.onadobedpscontextloaded is called. This call
is done automatically. To make use of this event, you can define it as:
window.onadobedpscontextloaded = function() {
// Store APIs are ready to use.
}
Store API documentation
To trigger a buy transaction for a folio:
adobe.dps.store.buyFolio(folioProductId, callback)
When this method is called, an iOS dialog appears so that a user can enter a password. Upon success, the
view is switched to the library for download of the folio.
• folioProductId—Unique product identifier of the folio assigned by the publisher from Viewer Builder.
• callback—Developer-supplied function to handle the result of the operation. The function receives one
parameter, an object with this property: {“result”:status}.
The status is either:
• succeeded
• failed
• cancelled
• refunded
Example:
adobe.dps.store.buyFolio(“OCT11”); // OCT11 represents the productId.
Adobe Digital Publishing Suite White Paper
7
To trigger a buy subscription transaction:
adobe.dps.store.buySubscription(subscriptionProductId, callback)
• subscriptionProductId—Unique product identifier of the subscription.
• callback—Developer-supplied function to handle the result of the operation. The function receives one
parameter, an object with this property: {“result”:status}.
The status is either:
• succeeded
• failed
• cancelled
• refunded
To display an optional custom dialog after a user buys a subscription:
adobe.dps.store.presentCustomDialog()
This value cannot be set from Viewer Builder, but this functionality is planned for the near future.
To dismiss the custom dialog displayed after a user buys a subscription or after a call to
presentCustomDialog():
adobe.dps.store.dismissCustomDialog()
To include constants to describe the library state of a folio that an API function is attempting to operate on:
adobe.dps.store.FolioState
The state indicates whether the folio can be purchased, downloaded, viewed, or updated, and whether
such an operation is already in process.
• Values are:
•
•
•
•
•
•
•
•
•
•
•
•
•
INVALID : 0,
UNAVAILABLE : 50—The folio is not yet available for purchase.
PURCHASABLE : 100—The folio be purchased and downloaded.
PURCHASING : 101—There is an active or paused purchase transaction.
DOWNLOADABLE : 200—The folio is free, or its purchase transaction is completed.
DOWNLOADING : 201—There is an active or paused download transaction.
EXTRACTABLE : 400—The folio content is stored locally.
EXTRACTING : 401—There is an active or paused extraction transaction.
VIEWABLE : 1000—The folio can be loaded in the viewer.
UPDATEDOWNLOADABLE : 1500—The folio is viewable but can be updated.
UPDATEDOWNLOADING : 1501—There is an active update download for this folio.
UPDATEEXTRACTABLE : 1502—The folio is viewable and has an update that can be installed.
UPDATEEXTRACTING : 1503—There is an active update extraction for this folio.
To retrieve a unique identifying string for the device that the viewer is running on:
adobe.dps.store.getDeviceId(callback)
Publishers might need the device ID if they have a custom login for entitlements.
• callback—Developer-supplied function to handle the result. The callback function receives one
parameter, deviceId, which is a string representing the unique device identifier.
To retrieve library state information for the folios in the library:
adobe.dps.store.getFolioData(callback)
If no current or cached information is available, the function returns an empty list. You can use this method
Adobe Digital Publishing Suite White Paper
8
to compare the valid folios in a library against another data source for a custom view. This method is also
helpful for displaying a button to download a folio. Because each item in the array contains price and state
information, a developer can determine whether to show a price or a string, such as “download” or
“update”.
• callback—Developer-supplied function that is passed an array of folios. Each folio is an object with these
properties:
•
•
•
•
id—Auto-generated ID of a folio.
state—State of the folio corresponding to a value from FolioState.
price—Price of a folio. If it is free, it is marked “FREE”.
productId—Publisher-supplied productId for a folio set from Viewer Builder.
Example:
adobe.dps.store.getFolioData(getFolioDataHandler);
function getFolioDataHandler(data) {
// Add JavaScript to handle the data, which is an array of objects with
properties.
}
To retrieve receipts for all purchased folios and purchased subscriptions:
adobe.dps.store.getReceiptData(callback)
• callback—Developer-supplied function that is passed an array of subscriptions. Each subscription is an
object with these properties:
•
•
•
•
•
•
productId—Store product identifier.
title—Formatted title of the subscription.
duration—Formatted duration of the subscription, such as 3 Months, 1 Week.
price—Localized string representing the price of the folio.
owned—True if this subscription has been owned by the user.
active—True if this subscription is currently active.
To retrieve library state information for the subscriptions available in the library:
adobe.dps.store.getSubscriptionData(callback)
If no current or cached information is available, the function returns an empty list. This method is helpful if
a publisher wants to display available subscriptions in a custom view.
• callback—Developer-supplied function to handle the list of subscriptions. Each subscription is an object
with these properties:
•
•
•
•
•
•
productId—Store product identifier.
title—Formatted title of the subscription.
duration—Formatted duration of the subscription, such as 3 Months, 1 Week.
price—Localized string representing the price of the folio.
owned—True if this subscription has been owned by the user.
active—True if this subscription is currently active.
To retrieve the authentication token and user name:
adobe.dps.store.getUserInfo(callback)
Adobe Digital Publishing Suite White Paper
9
You can use this method to determine if a user is logged in. If an authToken is not present, the user is not
logged in. You can also use this method to retrieve the authToken for entitlement purposes.
• callback—Developer-supplied function to handle the result. Either value can be empty. The result is an
object with these properties:
• authToken—Authentication token for a logged-in user
• userName—User’s login name
To initiate a refresh of entitlements in the viewer:
adobe.dps.store.refreshEntitlements()
This function has no callback. On error, the function fails silently.
To set the authentication token and username and let the viewer persist them:
adobe.dps.store.setUserInfo(authToken, userName)
This method is called on both sign-in and sign-out to update the viewer’s state. This function has no
callback. If either parameter is invalid, the function fails silently. You can use this method to provide a
custom login experience from a custom view. To sign out a user, a null value is passed for authToken.
• authToken Authentication token on sign-in, or undefined on sign-out.
• username Username on sign-in, or undefined to clear the persisted username on sign-out.
To download or view a folio:
adobe.dps.store.viewFolio(folioProductId)
If the folio is already on the device, the viewer opens it for viewing; otherwise, the viewer initiates
download of the folio. In either case, the store web view closes immediately. This function has no callback.
If the operation fails, the viewer handles the error.
• folioProductId Unique publisher-supplied productId for a folio set from Viewer Builder.
Summary
By merchandising content, products, and services with a Custom Store, companies can streamline the
purchase process, encourage brand engagement, and drive incremental sales. In addition to providing
flexibility and control over design, typography, and colors, a Custom Store immerses readers in the brand
experience of a publication, encouraging brand loyalty. Through cross-sell and upsell opportunities,
companies can drive incremental revenue of publishing and non-publishing content. In addition, when
used with the Direct Entitlement feature of Adobe Digital Publishing Suite, Enterprise Edition, publishers
can create customized offers based on a user’s role.
For more information on purchasing Digital Publishing Suite, Enterprise Edition and setting up a Custom
Store, request a sales consultation at www.adobe.com/products/digital-publishing-suite-enterprise.html.
For more information
Solution details: www.adobe.com/products/digital-publishing-suite-enterprise.html
Adobe Systems Incorporated
345 Park Avenue
San Jose, CA 95110-2704
USA
www.adobe.com
Adobe, the Adobe logo, and Scene7 are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Android
is a trademark of Google Inc. All other trademarks are the property of their respective owners.
© 2012 Adobe Systems Incorporated. All rights reserved. Printed in the USA.
91062621 1/12
10