Creating content previews

A content preview app provides a way for you to preview content in your website, app or other channel and allows you to see how it will look before it goes live.

The first step is to configure an online resource that will be used to preview your content. This resource can be as simple or complex as you like, from a single page to an entire website or a mobile app running on an online simulator. A common use case is to point to a staging version of your website.

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 a visualization and the example shown on the consuming content page. It shows the key concepts you'll need to know when writing a preview app.

Setting up the preview app settings

The preview app URL specifies the URL that will be launched when the preview feature is selected in the Dynamic Content UI.

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}}

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-1544054400000.staging.bigcontent.io

The VSE domain, when used in place of the production domain, will return the correct content for the context selected by the user:

  • How the content will look at a selected date/time in the future based on what is scheduled
  • How the content of the selected edition will look when it is published

For example 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 1f0fe60d-7b4b-4a39-a757-a1b221944443. To retrieve the contents of this slot at the specified time, we can use the following code:

const slotId = '1f0fe60d-7b4b-4a39-a757-a1b221944443'; 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`;

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

Specifying the timestamp format

In some cases it is useful to include the timestamp (the date and time chosen by the user) as a separate parameter to the preview app. To send the timestamp to the content preview, include the {{context.timestamp}} token in the preview app URL.

In the example below, the timestamp is sent to the preview app in the timestamp parameter. You would extract this parameter in the same way as the api parameter in the example shown above.

http://localhost:3000/preview/timestamp?vse={{vse.domain}}&timestamp={{context.timestamp}}

You can specify the format of the timestamp sent to the preview app using the date formats defined by the Angular date plugin and include this format in the preview URL. For example:

{{context.timestamp | date:'yyyyMMddHHmm'}}

If you do not provide a date format, then the timestamp is returned in epoch milliseconds.

For an example of setting up a content preview to use with the Dynamic Content Salesforce Commerce Cloud (SFCC) integration see the SFCC setup page.

Advanced preview features

It is also possible to generate a time specific Virtual Staging domain via the Virtual Staging microservice. This is useful if you want to:

  • Allow users to browse your preview resource directly. For example to navigate directly to a staging website without logging in to Dynamic Content
  • Quickly change the date/time context without going back to Dynamic Content

The Virtual Staging micro service accepts two parameters:

  • Timestamp (epoch milliseconds)
  • Base Virtual Staging Environment (Your base VSE is setup by Amplience when your account is created and provided during the onboarding process)

The format is:

https://virtual-staging.adis.ws/domain/<base-vse-domain>?timestamp=<epoch-millis>

Example:

GET  https://virtual-staging.adis.ws/domain/1vkz2i2i1hlau19hndnr03duvb.staging.bigcontent.io?timestamp=1543598417

This will return a 200 response and the body will be the newly generated API domain name you should use to request content.

Angular date format

results matching ""

    No results matching ""