Shoppable Content Hub Configuration Guide

Article author
Matt Hanan
  • Updated

The following explains and illustrates the design and implementation framework for your shoppable content hub (the “Hub”). The Hub contains the following pages, logic, and content, resulting in a powerful and scalable shoppable content experience for your website.  

1. Marketing Page. If you are promoting your own creator program, this is an important page. It is where you direct prospective creators to apply for your program and where approved creators can access the creator web application. The marketing page is customized directly on the Creatable dashboard. Simply log into your account and access the marketing page settings. See here for detailed information on the marketing page and all customizable settings.


2. Content Playlists. The content on the Hub is fueled by your content playlists. All playlists are set up on the Creatable dashboard in your account. You can manually add any videos and/or photos to a given “manual playlist”, or you can set up a “dynamic playlist” to be generated by our recommendation engine programmatically. 

You can configure a dynamic playlist to pull content based on search (keywords) or attributes. Where the playlist is fueled by attributes, such attributes can be fixed (ie. product = nike shoe XYZ), or variable (ie. product = ‘SKU passed in real-time’).
In addition, all dynamic playlists can be set for most recent, or auto-optimized for highest-converting or highest-engaging using our proprietary algorithms that fuel the recommendations. The performance data that drives the engine is obtained directly from your ongoing first party Hub experience, product page widget, and correlated first party conversion events.

 

3. Content Commerce Index. The experience on the Hub is made shoppable by presenting matching products for a given video or photo programmatically. The platform maintains and grows all correlations between content and products in your catalog, at scale. As creators (or any of your staff) match content to products for your respective account, your catalog is enriched with such added metadata. See below for further information on how such products come to life in the Hub. 

4. Content APIs. Ingest content and products into the Hub programmatically to support all pages by accessing pre-configured playlists and the content commerce index via the Creatable API. See here for more information about the Creatable API. The relevant APIs are also referenced below where applicable in relation to each page.
 

5. Content Gallery Page. This is where all posted content appears. The Creatable recommendation engine can be configured to present content by most recent, highest converting, or highest engaging. This page contains a collective repository of content from all creators. We suggest setting the configuration to “most recent” unless there is a specific marketing objective that would be better supported by a performance-based content configuration.

Note that this (or any) page may also be used to promote select creators, in which case clicking on a promoted creator directs the visitor to the creator’s storefront (see creator storefronts below).

Desktop_Hub_-_Home.jpg

Desktop view of the Content Gallery Page
Mobile_Hub_-_Home.jpg

Mobile view of the Content Gallery Page


API endpoints used for the Content Gallery page include the following:

Content - /api/channels/{channel_id}/contents

Creator details - /api/accountUser/ambassador/{user_id}

Products - /v2/api/entity/{client_id}/entity/{asset_id}/products

6. Creator Storefront Page. This is where all posted content appears for a specific creator. It is also a page dedicated to each creator, that can be personalized by the creator directly from within their Creatable account. You can set a default storefront background that all creators receive, directly from your program settings in the dashboard. Creators can then change their background, profile image, and add links to all of their social destinations, all directly from their account. Remember that creators can log in via the Hub (creator sign in appears on all pages), and via the Storefront mobile app.
It is advisable to promote select creators who perform well. You can do this anywhere on your site. Use their profile image (directly accessible from the dashboard) and in doing so, simply link visitors to “check out the creator and their content” on their storefront. You can also promote creators in marketing emails, ads and other channels, in which case the creator storefront serves as a great landing page for such campaigns. Such promotions can also be video, photo or product centric. Given the shoppable nature and high conversion rates from all first-party shoppable content experiences, such promotional activity is highly advisable.

Desktop_Hub_-_Storefront.jpg

Desktop view of the Creator Storefront page


Mobile_Hub_-_Storefront.jpg

Mobile view of the Creator Storefront page


API endpoints used for the Creator Storefront page include the following:

Content - /api/channels/{channel_id}/contents

Creator details - /api/accountUser/ambassador/{user_id}

Products - /v2/api/entity/{client_id}/entity/{asset_id}/products

Live Shopping - /api/liveShopping/{user_id}

7. The Shoppable Content Page. This is the page that serves a given shoppable video post, or shoppable photo post, generated by your creators via their posting activity. Each time a video is clicked to view on and throughout the Hub, the visitor is taken to a shoppable content page for the given asset.


Desktop_Hub_-_Video.jpg

Desktop view of the Shoppable Video content page
Mobile_Hub_-_Video.jpg

Mobile view of the Shoppable Video content page


API endpoints used for the Shoppable Video content page include the following:

Content - /api/channels/{channel_id}/contents

Creator details - /api/accountUser/ambassador/{user_id}

Products - /v2/api/entity/{client_id}/entity/{asset_id}/products
Desktop_Hub_-_Video__Transcript_.jpg

Desktop view of the Shoppable Video content page

with video description and transcript showing (show more expanded)

Mobile_Hub_-_Video__Transcript_.jpg

Mobile view of the Shoppable Video content page

with video description and transcript showing (show more expanded)

Desktop_Hub_-_Video__Product_hover_.jpg

Desktop view of the Shoppable Video content page

showing product menu hover state

Desktop_Hub_-_Video__No_Products_.jpg

Desktop view of the Shoppable Video content page

where no products appear
Mobile_Hub_-_Video__No_Products_.jpg

Mobile view of the Shoppable Video content page

where no products appear

Desktop_Hub_-_Video__End_Screen_.jpg

Desktop view of the Shoppable Video content page

at the end of a video - interim state




Mobile_Hub_-_Video__End_Screen_.jpg

Mobile view of the Shoppable Video content page
at the end of a video - interim state

 

Desktop_Hub_-_Photo__6%2B_Product_.jpgDesktop view of the Shoppable Photo content page
Mobile_Hub_-_Photo__6%2B_Products_.jpg

Mobile view of the Shoppable Photo content page

API endpoints used for the Shoppable Photo content page include the following:

Content - /api/channels/{channel_id}/contents

Creator details - /api/accountUser/ambassador/{user_id}

Products - /v2/api/entity/{client_id}/entity/{asset_id}/products

 

8. Program Terms and Conditions. Your program terms and conditions, by which every creator is bound, also appear on the Hub, and are accessible by every creator when they sign up and agree to be bound by such terms & conditions, as an inherent part of the sign-up process.


Desktop_Hub_-_Terms.jpg

Desktop view of the Program Terms and Conditions pageMobile_Hub_-_Terms.jpg

Mobile view of the Program Terms and Conditions page

  1. 404 Page. In the unlikely case that a page may not be found, the visitor is sent to an elegant 404 page to communicate the same.


Desktop_Hub_-_404.jpg

Desktop view of the 404 page

Mobile_Hub_-_404.jpg

Mobile view of the 404 page

9. Analytics Library Implementation

On each of the pages that will fire analytics events, the following javascript must be implemented as close to the opening <body> tag as possible.

<script>

(function() {

  var ga = document.createElement("script");

  ga.type = "text/javascript";

  ga.async = true;

  ga.src = ("https:" == document.location.protocol ? "https" : "http") + "://a.tvpage.com/tvpa.min.js";

  var s = document.getElementsByTagName('script')[0];

  s.parentNode.insertBefore(ga, s);

})();

var _tvpa = _tvpa || [];

var analyticsConfig = {

  "li": {{client_id}},

  "logUrl": "https://app.tvpage.com/api/__tvpa.gif"

  "firstPartyCookieDomain": "www.macys.com";

};

_tvpa.push(["config", analyticsConfig]);

</script>

Note: {{client_id}} is highlighted in yellow, this is your account’s Creatable ID. Please check with client success if you are not sure what this value should be. This value will be used again in subsequent analytics events, so please maint this value within the page’s context.

Content Gallery Page

The content gallery page is the “home” page of the content hub. This page is intended to show a gallery of content that the user can browse and navigate into. The event that is fired on this page is a “PM” event. Since content isn’t actively being consumed on this page, no other engagement events need to be fired.

A single “PM” event should be fired once the page has successfully loaded and there is a grid of content present to be viewed. 

The “PM” event requires data related to the first asset in the content grid. This data is obtained from a channel API endpoint (discussed earlier in this document). The “PM” event requires an Asset ID and a User ID (the creator of the content), as well as the {{client_id}} discussed above. All events require a {{client_id}} to be passed along in the payload.

var data = {

  li: {{client_id}},

  vd: {{asset_id}},

  ui: {{user_id}},

  vti: 0

};

_tvpa.push([“track”, “pm”, data);

Shoppable Video/Photo Page

The shoppable video / photo page presents the content in a prominent manner, along with other content displayed as a grid, farther down on the page. The Creatable player will handle all of the video-related events, so we only need to concern ourselves with the “PV” event (photo view) and the “PK” event (product click). The “PK” event is fired when a product related to the photo or video is clicked. The “PV” event is fired upon page load, because the photo is viewable & consumed once the page has loaded.

The “PV” event requires data related to the photo asset. This event should be fired upon photo page load. This data object can be retrieved from the channel API response (discussed earlier in this document). The “PV” event requires just the {{asset_id}} of the photo itself, as well as the {{client_id}} discussed above.

var data = {

  li: {{client_id}},

  vd: {{asset_id}},

  ui: {{user_id}}

};

_tvpa.push([“track”, “pv”, data);

The “PK” event requires data related to the video/photo asset it is related to. This event should be fired when a user clicks on a product that is associated with a video/photo. The “PK” event requires just the {{asset_id}} (as the asset relates to the products), as well as the {{product_id}} and finally, the {{client_id}} as discussed above.

var data = {

  li: {{client_id}},

  vd: {{asset_id}},

  ct: {{product_id}}

};

_tvpa.push([“track”, “pk”, data);

Creator Storefront Page

The creator storefront page is the main landing page for a creator. This page is intended to show a gallery of all the creator’s content, which the creator’s audience can browse and interact with. The event that is fired on this page is a “PM” event. Since content isn’t actively being consumed on this page, no other engagement events need to be fired. All events require a {{client_id}} to be passed along in the payload.

A single “PM” event should be fired once the page has successfully loaded and there is a grid of content present to be viewed. 

The “PM” event requires data related to the first asset in the content grid. This data is obtained from a channel API endpoint (discussed earlier in this document). The “PM” event requires an Asset ID and a User ID (the creator of the content), as well as the {{client_id}} discussed above. All events require a {{client_id}} to be passed along in the payload.

var data = {

  li: {{client_id}},

  vd: {{asset_id}},

  ui: {{user_id}},

  vti: 0

};

_tvpa.push([“track”, “pm”, data);

This concludes the analytics data integration.