Search

Searching DEVELOPERS

Export Page

1. Getting Started

The Amplience rich media platform provides a comprehensive set of tools for importing and transcoding digital assets, configuring media players, including for Dynamic Images (images, zoom, spin), Video, the Amplience Interactive Media player (for carousels, editorial pages, look-books, product micro-sites, ePublications, eCatalogues and interactive video presentations.)

This integration guide details the integration steps required to deliver Amplience Media using the Interactive Media player, and it’s ePublishing and Interactive Video extensions, into web sites (including mobile sites).

Set-up and integration of Dynamic Video and Imaging services, including the Zoom and Spin players, can be found separately, in the Amplience Customer Support portal.


Architecture Summary 

 

The above diagram shows a high level view of all the systems interactions involved when integrating Amplience media into a digital channel such as a web or mobile site (App integration is covered separately).  To fully integrate Amplience the integration can be summarised into five key topics:

  • Publishing – Create, manage and publish Amplience media into your site
  • Data –incorporate live product data into your Amplience media
  • Channel integration – integrate Amplience media to support the purchasing process across your channels
  • SEO – make your Amplience Media SEO friendly
  • Analytics – include Amplience tracking events in your own analytics, such as Omniture, Coremetrics, Google Analytics and others.

Publishing

Publishing is the most basic and fundamental form of integration, providing a method to add Amplience media into your website that is completely managed by the Amplience authoring studio and media portal.   The integration process for implementing Amplience publishing can be easily achieved by following seven simple steps

  1. Identify all the locations to use Amplience media on your website. 
  2. For each Amplience area on the website create a publishing area in the Amplience Portal
  3. Allocate a publishing connector for the Amplience publishing areas
  4. Add Amplience embed code to webpages that require Amplience Media, 
  5. Assign media to the appropriated publishing areas
  6. Publish media from each of the publishing areas
  7. View Amplience media in the web page.

1. Identify Amplience Locations

The Amplience Interactive Media players can be configured to support a variety of media types and such as interactive banners, hero carousels, eCatalogues and shop-able.  Before making any decisions on how to implement Amplience first understand the full extent of how and where Amplience media is used.  This is useful as there are often implications for implementing Amplience embed code in the later stages.

2. Create Amplience Publishing Areas

Publishing areas provide an abstraction for mapping media created in Amplience into locations on your web pages.  This is analogous to merchandising /content zones, eSpots or slots available in most ecommerce platforms.  To create a publishing area in the Amplience media portal:

  1. Select the Publish tab from the top navigation
  2. Click 'New' located in the top right of the page
  3. Add an appropriate name for the area
  4. Click the 'Create' Button
  5. Your new area now appears in the area listing

Every publishing area created in Amplience is completely unique and is identified using a Universally Unique Identifier (UUID). The UUID is by Amplience to identify which content to pull into a web page.

To view the module UUID:

  1. Select Publish from the top navigation
  2. Select the area options using the cog icon in the top right corner of the area you created.
  3. Select the 'Modify Settings' option
  4. The SSID can be found in the area reference section

3. Allocate Publishing Connectors

Before media can be published from a publishing area it must be assigned a publishing connector.  Publishing connectors are used by the Amplience media platform during publishing process to distribute media to the correct location reserved for you on the Amplience CDN.  Standard implementations of Amplience have one preconfigured Amplience publishing connector, however, it is possible on request to configure additional connectors if required. 

4. Amplience embed code

To add Amplience media to a web page you need to place Amplience embed code into the area on your webpage where you want the module to appear.  The Amplience embed code is a fragment of HTML code which is generated by each publishing area in the media portal.  To generate the Amplience embed code:

  1. Select Publish from the top navigation
  2. Select the area options using the cog icon in the top right corner of the area you created.
  3. Select Generate Embed Code option

There are two parts to the embed code:

  1. Script include tags to be placed in the Head of the all pages with Amplience media:
<script   type="text/javascript" src="swfobject.min.js"></script>
<script   type="text/javascript" src="interact.min.js"></script>

Interact.min.js is used to decide and configure which player (HTML5 / Flash) to use, based on the calling browser capabilities.  By default the HTML5 player is used and Flash is used to support older browsers. The swfobject JavaScript is only required for the Amplience Flash alternative player .  

  1. Publishing Area embed code
//Div to contain Amplience Module
<div id='Amplience Area GUID’" encoding="off"/>'>
</div>
interact.embedApp({
//reference to Amplience div
target: 'Amplience Area GUID’,
 
//Module Width and Height
width: 100, height: 100,
 
//Reference to the Amplience publish Area to use
vars: {id: 'Amplience Area GUID’},
 
params: {     allowScriptAccess: "always",
//Where you Amplience content is published to
base: “Base Path on Amplience CDN”,
wmode: "transparent" },
 
//Player locations
src: [
        {type:"html5", src:" Base Path + tcplayer.js", xd: ["Path to Cross domain files"]},
        {type:"swf", src:" Base Path + tcplayer.swf ",version:"9.0.0"     }         
]
});  

The key parameters to note in the embed code are the:

  • Base path -  which describes the location of the media on the Amplience CDN
  • Area SSID - which uniquely identifies each area and is used to deliver the correct Amplience media from the Amplience CDN
  • Width/Height -  the size attributes for the media.

Data Integration

Integrating product data into the Amplience platform offers you the capability to incorporate live product information into any of your Amplience media using the authoring studio. This means that in Amplience you can also create very sophisticated product based media, such as PDPs and quick views.  Integrating product data is essential to support channel integrations including adding to basket. 

The preferred method for integrating product information is to use a REST based web service. This involves providing a URL that returns either specified product information or a product list in a standard XML format adhering to the Amplience product schema. The Amplience XML schema supports:

  • Standard product object model
  • Product variants and overrides
  • Custom fields

For a detailed description of how to implement product data see:

Product Data Integration

If you do not already have a login to the Amplience support portal, please register and you will be automatically provided with a username and password.

Single product integration

The single product data integration is used to support standard Amplience elements in the authoring studio such as the Hotspots, Image Map, Product and Data Container controls.   Adding these types of controls bound to product data ensures you can surface live data in your media that is pulled directly from your ecommerce system.  This has the benefit of up-to-date pricing and stock availability.  Using data bound controls you can build a variety of different Amplience media types including:

  • look books and product collections using the product control
  • Hotspoted interactive banners using the bound button and image map controls
  • Product details pages and quick view using the Data Container control

The process for integrating product data with Amplience Media and Authoring studio is a follows:

  • Create a REST web service on your ecommerce platform providing a SKU parameter to identify the product required.  The XML returned must follow the Amplience schema.

Single Product Schema

  • In the Amplience media portal create a new Data Feed
  1. Select Settings from the top navigation
  2. Select the Data Feeds option
  3. Click the Create New Data Feed button
  4. Name your data feed
  5. Enter the URL (REST Interface) replacing the SKU parameter with {{sku}}.  This token is mapped to SKUs you enter in the authoring studio for any data sensitive controls (e.g. hotspots)
  6. Click Create New Data Feed button
  • In the Amplience media portal associate the Data Feed to a piece of media
  1. Select Content from the top navigation
  2. Select Module Actions for the media you want to enable data for
  3. Select Associate Data Feed
  4. Select your Data Feed from the drop down
  5. Click the Associate Data Feed button
  • Add data to your media
  1. Select Content from the top navigation
  2. Select Module Actions for the media you want to enable data for
  3. Select Edit option
  4. Add  a product control to your media
  5. Enter a SKU for the product control
  6. The product control should now display product attributes inside your media.

Multiple product feeds

Multiple product feeds can be used to display groupings of products for example top sellers, special offers etc. These can be used by the Amplience components such as grids and product sliders to display multiple products such as recommendations, accessories or top rated products.  These data feeds can come from a variety of sources including search engines, recommendation engines and ecommerce platforms.  To support multiple product data integration the  product list must also be delivered as a REST interface as above providing a list of XML ‘product’ nodes using the same format as the single product data feed.  The schema can be found at

Multi Single Product xsd

Data Transcoding Services (DTS)

There are times when developing a live REST service is not possible but you still want the product data capabilities. Amplience provides a service that extracts product data from product pages on your live website and transcodes them into standard Amplience product XML. This service uses three key Amplience components:

  • Data Extraction - Using simple templates that overlay your product details pages Amplience automatically can extract product data.
  • Data Transcoding – Data transcoding processes a request for a specific product.  First it calls the Data Extraction service and then transforms the raw product data extracted from a page into Amplience product XML.
  • Data Caching – All DTS requests pass through the Amplience CDN and are cached based upon a pre-agreed TTL (8-24hrs).  When data become stale data is flushed from the cache and new requests are cached following a call to Data Transcoding

DTS requires additional professional services from Amplience and does not require any other technical implementation activities from third parties or systems integrators.


Channel Integration

Add to Basket

Any interactive control can be configured to trigger interactions on the hosting page such as adding a product to a basket.  This is achieved by configuring an interactive element in the Amplience studio to use a 3rd party action.  By doing this the control in the Amplience media will call a proxy JavaScript function called tencmsInvokeAction. 

tencmsInvokeAction (data, areaID, context){
}

Inside this function you can use the parameter objects to fire any other JavaScript function on your page including an add to basket function. 

For example

function tencmsInvokeAction (data, moduleID, context)
{    
              var params = {pid: "null", Quantity: 1, navid: null};          
              params.pid = context.variant.sku;
              app.minicart.add("", params, function(){});
}

You must ensure this JavaScript function is included on all pages containing Amplience media.  Also product data must be fully integrated to support this implementation

Trigger your quick view

If you already use a quick view component in your e-commerce platform it is possible to trigger it from any Amplience interactive control using the same method as described in the “Add to basket” integration.  This approach has the benefits of a standard customer experience or to provide “add to basket” functionality without the need for product data integration.

function tencmsInvokeAction (data, moduleID, context)
{    
              var params = {pid: "null", Quantity: 1, navid: null};          
              params.pid = context.variant.sku;
              app.quickview.display();
}

Amplience Light box

You have the option to deliver any Amplience media into an Amplience JavaScript Light box.  This can be triggered by any interactive control and configured completely within the Amplience Studio.  This is especially useful if you want to build a PDP to display advanced product data or to call a more advanced module overlays.  This is a standard out-of-the-box capability that requires no additional integration, however, if you use this approach to simulate a PDP / quick view you must follow the steps required for data integration and add to basket. For more details see:

Use the Amplience Lightbox


SEO

Every time an Amplience module is published into an area on a page, Amplience generates a unique HTML fragment that contains search engine friendly content for that specific module. In the Studio you have the option of deciding whether to define SEO content manually or more robust SEO generated by the system which contains all text, links and product data, and a reference to the background image of the first slide. However, the integration to implement this is not automatic, and needs to be configured in the publishing connector and referenced in the embed code by means of a SSI (server side include). There is much more detailed information on this process here:

SEO Generation Process

SEO Enhancements: Auto Generated


Analytics

All Amplience media contains in-built analytics based on an extensive event framework which is fully integrated into the Amplience analytics engine. This data is available to view in the media portal in

  • An interactive timeline chart tracking views, engagement and performance.
  • An interactive heat map overlaying data onto an interactive preview of the media

If you would like to capture the events triggered by the Amplience into you own analytics platform it is possible by implementing a custom JavaScript function in the web pages containing Amplience media. This uses the same approach as the “add to basket” method describe earlier and full information for implementation including the available events and full working examples can be found here:

Tracking Analytics

Google Analytics Integration

Tracking Amplience Events using Google Analytics Virtual Page views

Tracking Amplience Events using Google Analytics Events