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. 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. 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. 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. 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. 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. 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 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) 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