Creating content previews

A content preview app provides a way to see what your website, app or other channel will look like at a specified time in the future. Your preview app can be as simple or as complex as you like, from previewing a single page to your entire website. You can also deploy multiple preview apps, for example one for your website and another to open your app in a web based Android simulator, and the user can choose which preview to open.

On this page we'll walk through the structure of a very simple preview app that renders the content of a single slot containing one content type. The structure of our example preview is very similar to the visualization and consuming content and shows the key concepts you'll need to know when writing a preview app.

Setting up the preview app settings

The preview app URL is added to the preview settings dialog, available by choosing "Preview settings" from the "Settings" menu in either the production or planning views.

In the case of our example, the preview is just a one page web app, but for more complex previews you might write a Node.JS app, for example. You can add more than one preview app and allow the user to choose which one they want to use.

The preview settings dialog
The preview settings dialog

The preview app templated URI

A preview app is specified as a templated URI, including a parameter that will contain the virtual staging environment(VSE) domain. Much like a visualization this domain is used in place of the production domain to retrieve unpublished content.

Here's the templated URI for the preview app example:

https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/bannerslotpreview.html
?api={{vse.domain}}
  • the VSE domain sent as a parameter to the app contains a timestamp
  • no slotIDs are sent in the parameters, so you choose which slots to render. That might be all the slots on your website. The IDs of these slots won't often change, unless you restructure the website, just the content of the slots will.

Retrieving content

An example of the VSE domain that is sent to our preview app is shown below:

1vkz2i2i1hlau19hndnr03duvb-gvzrfgnzc-1525129200000.staging.bigcontent.io

The timestamp included in the domain refers to the date from which the user chose to view the preview, which in this case is 1/5/2018. The domain is then used to build up the query to retrieve content.

If we want to retrieve the contents of the home page banner slot used in the Consuming content example, we know that this slot item has an ID of 8025a730-4394-4a22-8e4b-d3b9d35c766e. To retrieve the contents of this slot at the specified time, we can use the following code:

const slotId = '8025a730-4394-4a22-8e4b-d3b9d35c766e'; const encodedQuery = encodeURIComponent(JSON.stringify({'sys.iri':`http://content.cms.amplience.com/${slotId}))`; const contentDeliveryUrl = `//${getQueryVar('api')}/cms/content/query?fullBodyObject=true&query=${encodedQuery}&scope=tree&store=store`;

This query will return the contents of the slot as it is scheduled to be on 1/5/18. So, for example, if we've created an edition that updates the content in this slot and it's scheduled to go live on 30/4, then the query will return the content that is scheduled as part of that edition.

As in the consuming content example, content is returned to the preview app in JSON-LD format. The steps to render the content will then be the same:

  • convert the JSON-LD content into a content tree
  • combine it with handlebars (or other template) to generate the HTML
  • render the content

Download the complete example preview app, including the code shown on this page.

Using the preview app example

Expand the section below to see the preview app in action.

We've scheduled an edition called "May promotion sales teaser edition" to which we've added the home page banner slot and we've added a banner to this slot. The edition is then scheduled to go live on 30/4.

Scheduling an edition with content in the home page banner slot
Scheduling an edition with content in the home page banner slot

Back in the planning calendar, we right-click at the top of a date and choose "Preview content". A dialog is displayed allowing us to choose the date and time from which to view the preview. We'll choose 1/5, since we know that the edition is scheduled to be live then.

Choosing a date to preview
Choosing a date to preview

The preview app is launched and the preview is displayed in a new tab. The banner image of the model in a white shirt is displayed, the banner that we scheduled to be live on that date.

Viewing the preview
Viewing the preview

Next we'll create another edition, add the home page banner slot to it and add some content to this slot. This time it's a banner for the free shipping promotion. The edition is scheduled to go live on 3/5.

Scheduling a later edition with content for the same slot
Scheduling a later edition with content for the same slot

We'll choose to view the content preview on that date.

Choosing a date when the second edition is scheduled
Choosing a date when the second edition is scheduled

The content scheduled from the edition we created is now displayed.

iewing the content preview with the newly scheduled content
iewing the content preview with the newly scheduled content

If we go back and unschedule the free shipping edition and view the preview for 3/5 again, the content scheduled by the May promotion sales teaser edition is returned.

Preview app after the free shipping edition is unscheduled
Preview app after the free shipping edition is unscheduled

results matching ""

    No results matching ""