Your creator content hub can reside in one of two different locations on your site:
Subfolder (domain.com/storefronts/)
Subdomain (storefronts.domain.com)
Embeddable content on the Creatable Social Commerce Cloud will also be tied to the designated domain of choice. Each of these methods has different IT requirements.
Subfolder
Configure your CDN to reverse-proxy requests from your website to Creatable. This means that when a user requests domain.com/storefronts/video1, the request is routed to the Creatable platform. Creatable will render the HTML and return that to the CDN, and return it to the end user.
Subdomain
This configuration requires two CNAME entries on your DNS record (one for the subdomain to be used, and one for validation so that we can issue a SSL certificate) and involves setting up a new subdomain within your primary domain. The process generally take just a few minutes. Once configured, Creatable will complete the setup for your account.
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 Channels. The content on the Hub is fueled by your content channel. All channels are set up on the Creatable dashboard in your account. You can manually add any videos and/or photos to a given “manual channel”, or you can set up a “dynamic channel” to be generated by our recommendation engine programmatically.
You can configure a dynamic channel to pull content based on search (keywords) or attributes. Where the channel 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 channels 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. Hub Landing 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 and Mobile views of the Hub Landing Page
API endpoints used for the Hub Landing 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 and Mobile views 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 Collection 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 and Mobile views of the Shoppable Video Collection 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 and Mobile views of the Shoppable Photo Collection 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 and Mobile views of the Program Terms and Conditions page
- 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 and Mobile views 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.