Search

Searching USERS

Export Page

UGC User Documentation

The Amplience User Generated Content (UGC) solution simplifies the integration of user generated and social media content for use on retailers' home and landing pages, grid pages and product detail pages.

 

Amplience UGC key features

  • Curate content feeds from major social platforms
  • Enable customers and employees to upload content directly to platform
  • Moderation app provides a simple image accept/reject mechanism
  • Enrich images with one or more product SKUs or destination URLS
  • Curate and track multiple UGC streams and publish to site
  • Configure pre-built carousels, create custom players with the SDK
  • Combine social and branded media into shoppable campaign content
  • Advanced event-based analytics for all user interactions, tracked to basket

Table of contents


Where to find the UGC App on your account

Once enabled by your Account Manager, start on ondemand.amplience.com log-in to your account and go to 'Assets'. In the vertical left-hand navigation panel, click on the Cube Icon which will load the Apps area. Click on 'Social'.


This will load the following UGC dashboard:

Dashboard shortcuts

Number of feeds running – searches currently ingesting assets 
Number of streams – groups than can be output into a viewer 
Feeds set to expire – how many active searches have an expiration date 
Images for moderation – images to be accepted or rejected

Ingesting UGC images

Creating a feed

A feed is a search set up to ingest images into Amplience through specifying one or multiple hashtags from one or several social media channels (Instagram or Twitter). 
After clicking on 'Feeds' in the left hand navigation, this will load the details all of the active feeds, and those with a start date in the future. Click on the top right option to Add New Feed:


This opens the following panel:

In order to create a feed, you need to specify a hashtag. For example #amplience. You do not need to type in the hashtag symbol itself. Multiple hashtags can also be entered through clicking on the + sign after each one. 


The Feed Title will change by default to the first hashtag you have entered although you can update this name to anything you wish. For example:

A Start Date must be specified but an end date is not necessary. Click on the field in order to open the drop down calendar. If an end date has been set, this is the time at which the feed will stop ingesting

Running the Processing Job

Once a feed has been created, assets with the specified hashtags will need to be ingested into the Amplience account. This is achieved through running the processing job set up on your account.

By default the processing job will be set to run every 1 hour. It is also possible to run the job immediately so that you can see the images that are being brought through into the Amplience platform.


In your Ondemand account, go to 'Assets', 'Tools' and then to 'Processing Jobs'. This will open the Processing Jobs page. In your account, you will see that there is a Processing Job named 'UGC'. This is the job which is used to ingest assets into your account. The 'Last Run Date' displays the date at which the last ingestion occurred


It is possible to run the processing job immediately. This is achieved by clicking on the cog next to UGC and clicking on 'Run Now':

This will cause the egg timer to appear which shows it is in the process of running: 

When the job has completed, this will update the 'Last Run Date' and the green tick will show:

Note: It may be possible that you do not have the appropriate access to run the processing job. If so, please contact provisioning@amplience.com and we can set this up for you. 

Curating UGC images

Accepting or Rejecting images

The moderation of images can be done once the UGC processing job has been run and images with the specified hashtag have been ingested. To moderate images, go back into the Social app and if any images have been pulled through with the specified hashtag, you will see on the homepage that the number of 'Images for Moderation' will have increased.

Moderation allows a user to filter through the images and decide whether or not they are appropriate through acceptance or rejection. 
On the Moderation page (accessed through the shortcut on the UGC homepage or through the left hand navigation), all of your images will load and be paginated:


Clicking on 'Accept' will mean that you would like to Enrich the image at a later date. Clicking on 'Reject' will reject the image.

You can speed up this process bulk selecting all images in a page. This is done with a simple keyboard shortcut 'A' then cicking 'Accept All' or 'Reject All'. Twitter assets still need to go through a permission request process for 'Accept', so you'll still have to approve these individually. Bulk rejection will work for all assets, including Twitter.

 

Filtering Accepted or Rejected images

As a user, you are able to filter images on the Moderation page to show what has been accepted or rejected. 
Raw – images that have not been accepted or rejected
Accepted – images that a user has clicked 'Accept' for
Rejected – images that a user has clicked 'Reject' for


Under the 'Accepted' filter, you will have the option to reject an image:

Likewise with Rejected images, you will have the option to re-accept them should you require.

 

Enriching with product data

The enrichment phase follows the moderation of images and enables users to enrich accepted images with related URLs or SKUs.

 

In order to enrich an asset with a SKU or URL, click on the selected accepted asset which you wish to enrich. This will open the right hand expandable panel.

Name: name of instagram poster / user
Choose an enrichment type: option to enrich with either a SKU, multiple SKUs or a URL
For a SKU, ensure SKU is selected and insert and press save. Multiple SKUs can be entered by clicking on the + sign and adding in a new SKU each time:


To enrich with a URL, select URL and add in the required related URL. 
Click on Save. The page will then show a green confirmation banner to confirm that the asset has been enriched with the inputted details:

Your asset will then be hidden from the Enrichment page. In order to show assets that have been enriched, select the drop down filter and click on 'Enriched':

This will then show all enriched assets and enable you to amend any of the inputted data and re-save. 
Going back to 'Image Only' will take users back to images which have not been enriched.

Grouping images

Once assets have been moderated, followed by enriched, a stream needs to be created. A stream is the collection of assets which are being published onto the site. Clicking on 'Add new stream?' will open the expandable right hand panel.


Create a stream name: type in the desired name for the stream i.e. 'Amplience Test'

Select the Hashtag(s) or Feed you would like the moderated assets to be pulled from. The search functionality will pull through used hashtags or existing feeds which can then be selected:

Multiple hashtags can be selected: 

On clicking save, the following confirmation pop up will show:

The stream will now show in the main window:

On the main page, click on 'Add Content'. This will show a page with all assets with the specified hashtag(s) in the stream where the images have been accepted and then enriched. 
When the stream is empty, the right hand panel will look as follows. When the stream is empty, the options to 'reset' or 'publish' and to 'save' is unavailable. 

Click on 'Add to Stream' for each image you require to show in the stream. For any assets that have already been added, these will be highlighted in grey and appear in the right hand panel, listed as 'new'.


Clicking on 'Reset' will reset all of the moves since the last publish. This is confirmed by the following green banner:

Clicking on 'Publish' will bring the following toolbar up at the top of the panel:

When the stream has been published, the following confirmation will show:

A stream can be edited on the 'Streams' page by clicking on the thumbnail. This allows you to remove or add hashtags or delete the stream. 

'Clear all' will remove all hashtags from the stream. These can be re-added.


When adding content, a stream can also be edited by clicking on the following icon:

Click on 'Save' to save any changes. 
Click on 'Delete' to delete a stream. This will be confirmed by the following:

Skipping enrichment

How to create a UGC stream without enriching with product data

1. Create your feed as normal

 

2. Moderate your images as normal.

The Enrichment stage is still available if you do wish to add product data to some assets

3. Create a stream as normal, and select “Show all approved assets”

This will pull ALL approved assets into the stream, whether or not they have been enriched

4. Add any approved assets to your stream and republish after adding or removing any content

Assets that have not been enriched will have a blue border

 

How to add non enriched assets to an existing stream

1. Open your existing stream and select "Add Content"

2. Click "Edit Stream"

3. Tick “Show all approved assets” and save settings 


 

4. Add any approved assets to your stream and republish after adding or removing any content

Assets that have not been enriched will have a blue border


How disable Skip Enrichment on an existing stream

1. Open your existing stream and select "Add Content"

2. Click "Edit Stream"


3. Un-tick “Show all approved assets” and save settings 

4. You will now only be able to add enriched assets to your stream

Existing non-enriched assets will not be removed automatically, but can be manually removed

Republish after adding or removing any content from your stream



Standard UGC player: Configure how to display your images

Once you have created and published your UGC stream, click ‘Standard Players' in the left menu and select the Stream you want to show.

 

Here you can decide if you want to create a UGC Carousel or UGC Mediawall. Select this at the bottom of this view. You will see a preview of this and how it will look with standard settings and you can play around with the options while the preview updates in real time.

Auto Play - Whether or not the carousel will autoplay / loop

Rotation speed - From 1 second to 30 seconds, incremeting by second

Number of Slides - How many assets are visible on the carousel at a given time

Side spacing - Space between each image

DI options - Dynamic Imaging options, now the images are assets within the account here you can change width, quality etc parameters within the mediawall. Read more here.

 

Wall Layout - How it will appear, as a grid system or with larger block integrated within the grid

Column Width - How many pixels the column width is

Slide Padding - Space between each image

Transition Duration - Time it takes for the grid to rearrange when the screen size changes, that 'assets flying' effect

 

Modal - Whether or not the carousel will have a pop-up. It includes deep linking, so any image has a shareable direct link with the pop-up on.

Display text - Whether or not the model will display the comment made by the user

Display username - Whether or not to display the social media poster's username

DI options - Dynamic Imaging options, now the images are assets within the account here you can change width, quality etc parameters within the mediawall. Read more here.

Webinar

 

  • Note form the webinar: Now your user can buy even for URL enrichments and modal on:

Note: You can still contact your account manager about tailoring a player just for you, or you can create your own player with our SDK.

Generating code: Adding the player into your page 

Once you have chosen the configurations you require, you can generate the embeddable codeby pressing the button 'Generate code'

 

Copy the entire code displayed to the <head> and <body> of the target page. Please note that you can miss out jQuery if you have your own version already. 

Adding a Terms and Conditions URL

Every player has a Terms and Conditions placeholder. To add yours, just find this line and replace the placeholder with your url.

This will show in and in the T&C's link when uploading an image:

 

Note: The URL should include the protocol http:// prefix.

Changing "Shop the look" text

Currently the text defaults to 'Shop The Look'. It is possible to change the text of "Shop to look" to something more suitable for your business. In order to do this you change callToActionText after generating the code text will show once hovered over the image panel.

In this example of Roses, we changed it to "Shop for roses":

 

Ecommerce Bridge Code

Once the modal option is "on", clicking an image brings the modal with your product data: product image, name, price and the "buy now" button.

Clicking the buy now button will display a product preview or, when that is not available, link directly to the PDP. If it opens the quick view, we will close the modal underneath.

Since this needs a data feed configured, please allow for dummy images inside the Amplience platform. Real product data will show once the code is pasted onto your site.

Bonus: If the image was enriched with more than one SKU, all products will be showing!

Note: As we will be using media CSS sizing, this will only be responsive for IE9+

 

In order for this to work, you need to include an Ecommerce Bridge in the code generated within the view. This is to standardise connection to whatever ecommerce platform you may be using and to link the product feed where you have defined skus. We have created a way to use IM data connections via the IM Ecommerce Bridge Generator.

To get your UGC content to link to your ecommerce system, you need to use this script file;

 

 

This script file needs to be copied into the header section of the code you just entered. so it should look like this;

In order to get your UGC code to link with your Data feed, you need  to Initialise a bridge with a Interactive Merchandising data connector.

To get this work you need to add the below JavaScript snippet including the details of the Interactive Merchandising Data Feed:

 

The two required values are:

xd: The path to the xd.html file on the same domain as the data content. eg htttp://test.amplience.com/xd.html

url: The url to the data endpoint, complete with tokenised sku representing where the sku will be placed.

 

EG.

In the "url" field, you need enter your data feed.

eg. http://staging.amplience.com/v3/data/products/{{sku}}.xml can be found under content>tools>feeds

 

 

In the "xd" field you need to enter the same domain as the data feed, followed by "/xd.html"=

The domain can be found in this part of your feed;

So the 'xd' part of the code now becomes;

"xd":"http://staging.amplience.com/xd.html"

 

This code need to then be copied under the body section of your embed code.

 

Limitations:

  • Muti-product datafeeds aren’t supported

  • POST isn’t supported

  • Custom fields not supported

  • XML only

Success:

  • Should parse relative urls automatically

  • Easy to modify lib for more advanced data mapping

After you have pasted this in to your page along with the standard player generated embed code your carousel or mediawall should appear on the page.

 

More info about the e-comm bridge can be found here.

More info on the standard Amplience data XML schema can be found here.

Configure your UGC content to launch quickview / add to basket from a product

Instead of your UGC modal displaying product information and linking directly to the URL supplied in your data feed, it is possible to configure your content to send product information to a JavaScript function on a page which can be used to launch a quickview / add to basket etc.

 

How to set up Direct Uploads

 The embedded carousel has an "Upload your photo" option on the bottom left for your users to upload their images to the player from their folders or from their Instagram account.

The uploaded images will be ready in your moderation section together with the injested ones, you can filter them by clicking "filter by direct".

Once in your player, the modal will display "direct upload" under the username.

Note: Upload does not work for IE8 or older

 

In order to setup the "via Instagram" direct uploads follow these two steps:

1. Download instagramUploadConfig file and upload it to your site

Right click on this link and "save link as" instagram.html. 

Place that file into a folder that exists on the same domain as where the end UGC Carousel/Mediawall will be.

For example, if the Carousel/Mediawall is going to be placed on http://amplience.com/blog/ , you will need to place the file anywhere on http://amplience.com/

 

2. Add the location of the instagramUploadConfig to your generated code

Currently the callbackUrl in the generated code is a placeholder:

You should change it to point to your instagramUploadConfig location (without the brackets) e.g:

This is done to comply with the crossdomain rules and enable the Instagram authentication token to be relayed back to the uploader script. 

Hiding direct uploads

If you want to hide the option for direct uploading from your player, you can add the following piece to the embed code:

 

Reporting inappropriate images

Your users can report images they find inappropriate. At the moment, these images will be put down by our team in less than 24h, but we are looking to give you full control over this on the next versions.

 

Tracking with Google Analytics to standard UGC players

Analytics callback function can now be passed to relevant ugc-viewer and will receive events for the viewer with an object response containing the following properties:

  • viewer: viewer name e.g., ugc-carousel or ugc-mediawall
  • eventName: e.g., selectPost
  • element: dom element where event originated from,
  • parent: the viewer itself,
  • value: relevant values specific to the event
  • sdkComponent: will only exist if the event came from an sdk client component

In addition to SDK component events, if any, additional events tracked include:

 

 

  

Player is loaded

event: moduleView, value: {stream:'streamName',ugcdata: Array of all ugc data for posts in stream, count: integer count of posts in stream}

Clicking on an asset of the player, regardless of whether that opens a modal or goes to the PDP page

The next/prev buttons of the modal trigger a reload of the modal content which also triggers the selectPost event

event: selectPost, value: {ugcdata: post specfic ugc data,index:index of post}

Modal is closed

event: postClosed, value: {ugcdata: post specfic ugc data,index:index of post}

Image gets reported as unappropriate

event: postReported, value: {ugcdata: post specfic ugc data,index:index of post}

Clicking the "shop now" button on the modal will trigger productQuickView and productDisplayPage depending on if we have a sku or a url

event: (depends on ecombridge capabilities, could be 'productQuickView' or 'productDisplayPage'), value: {ugcdata: post specfic ugc data,index:index of post, sku}

as we have

Direct upload is completed

uploadComplete, value: {status:'fail'/'success',type:'instagram'/'direct'}

 

(ugcdata contains asset id, post id, enrichment and social data)

 

var viewer = new amp.Carousel(accountConfig, viewerConfig, modalConfig, uploadModalConfig, uploadConfig, instagramUploadConfig, function(response){ console.log(response);
})

 

More info on Tracking - Extending Amplience Analytics.

Examples of UGC Players

Click here to see the following example of a roses carousel:

Click here to see the following demo of a mediawall:

Click here to see Dune's UGC live carousel:

Click here to see Very's UGC live Mediawall:

 

UGC Analytics Dashboards

You will find them under the Analytics tab

 

 

 

 

Dashboard shows a Graph with data related to the UGC.

  • Week view (default): bars show data per day
  • Monthly view: bars show data per week
  • This month: bars show data per week
  • Last month: bars show data per week
  • Custom date range

 

 

 

 

You can see three kinds of data on the graphs:

  • Revenue: Successful purchases of a product from users who have clicked on 'buy now' of the said product on the same session.
    • Does include data from purchases on following sessions up to 24h after the 'buy now' click but not later sessions even if the product was added to the basket earlier.
    • Does not include data from rest of the products purchased.
    • Does not include data from a browser private session, unless you are including the userId optional data on our checkout tracking code.
    • Does not include revenue data from a carousel/mediawall player that has the modal off.

  • Click throughs: Total events from clicking the 'buy now' on the UGC modal. Depending on your UGC configuration, this means triggering a quick view or a PDP
  • Interactions: Total events from clicking an image

A grid of analytics data per channel per feed.

A triangle icon compares data from the period selected with a previous period, green if data incleased and orange if decreased. No triangle if no data from previous period.

A list of most successful images ordered by the revenue, click-throughs or interactions, depending what's selected. 

They also display the channel they came from, so you can learn what is working better for your brand, and arrange your UGC images accordingly.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • No labels