Follow

What are some additional on-site deployment options?

Video banners do not cover all the possibilities for deploying video on your site. There are other scenarios where video can be cleverly inserted on a site page using Liveclicker.

Direct Embed

If you want to directly embed the Liveclicker player on product, category or other pages of your site, you may use this tag structure:

<script type="text/javascript" src="http://sv.liveclicker.net/service/getEmbed?client_id=85&widget_id=1926
&width=320&height=240"
></script>

In the example above, we are choosing to display widget ID 1926, with a width of 320 and height of 240 pixels. This is not exactly an onsite banner - to get the code and change height/width as well as player ID, go to the widget page in the Create section.

2016-05-17_16_45_48-Greenshot.png

 

Dynamic embedding

When embedding videos directly onto product pages, you could also use an SKU and its associated dimension. Example:

<script type="text/javascript" src="http://sv.liveclicker.net/service/getComponent?client_id=31&component_id=219&widget_id=1340"></script>

In the example above, dim1 is the SKU for the video we want to pull. It is matched against tagged videos in the library. If there is no match, then no video will appear.

Player options

With the Liveclicker Player, you have dozens of display options that will allow you to exactly customize the player's look and feel. You may hide your logo, the share and buy buttons, and control the final view when the video is done playing.

For example:

http://sv.liveclicker.net/service/getEmbed?client_id=19&dim1=99832&autoplay=yes&width=500&height=280&option_ buyAvailable=false

Will autoplay the video that's matching SKU 99832, while hiding the "Buy" button. For further customization options please refer to the Liveclicker Video Player documentation.

The better way to do this however is to create a custom player in Liveclicker, and attach it to the banner definition in the Liveclicker UI. The advantage of using a customer player id as opposed to manually setting the parameters is flexibility and control: you may change your customer player options at any time without any code change. All happens in Liveclicker.

Search results basic deployment

With Liveclicker you can easily add a mention to video on a search results page if videos are available for the product. See this example of a search results page, and notice the graphic "Video Available" on some of the search results:

Search.png

To do so, you will need to leverage the dimensional structure in place and make use of JavaScript and CSS to cleverly reach the desired result. This method will work best if you are already using in your dimensions a product ID or SKU. If you aren't, please contact Liveclicker Support to assist.

How it works

At a high level, the idea is to let Liveclicker selectively toggle the visibility of a "View Video" div, on a per product basis, using simple JavaScript techniques. To implement this technique, you will need to append a div to all your search results and drop a JavaScript with the list of all SKUs that are appearing as part of a search results page.

When the page is rendered, none of the product initially will have their "View Video" mention visible. However, as soon as the page is loaded, the Liveclicker JavaScript will communicate with the Liveclicker servers and selectively make the "View Video" div visible for products with video.

Steps to deploy

  • Step 1: Add a layer to each of your search results with the SKU or product code ID in the id for the div (Generally, the id name should be lc_dim_<SKU>). Using inline-CSS (or a class), set the visibility of the div to hidden.
<div class="searchresult">  
<div class="product">Product EC1015222<br>Brand: Addidas<br>Price:$150</div> 
<div id="lc_dim_EC1015222" style="visibility: hidden;" class="videoimg">Video available!</div> 
</div>
 
<div class="searchresult">  
<div class="product">Product EC1015221<br>Brand: Asics<br>Price:$45</div> 
<div id="lc_dim_EC1015221" style="visibility: hidden;" class="videoimg">Video available!</div> 
</div>

<script type="text/javascript" src="http://edge.liveclicker.net/scripts/MultiComponentOnload.js?client_id=85&
dim1=EC1015856,EC1015111,EC1015222,EC1015221,EC1015223"
></script>
NOTE: the various SKU values are separated by commas. Also, do not add extra dimensions,
even if there are empty, to the query string. This method only works on one dimension set.
  • Step 3 (recommended): Host your own version of the MultiComponent.js script to gain some extra performance and reliability, if applicable (you may use the version hosted on the Liveclicker servers if you don't mind an extra DNS domain lookup)

Enabling a video overlay on the search results page

If you want the video icon to be clickable and trigger a video overlay, follow these simple steps:

  • Step 1: Create an onsite banner. For the embed type, you should select an image ("View video" button) and will be asked to provide the URL for the image
  • Step 2: Add the component_id to the MultiComponentOnload.js call
<script type="text/javascript" src="http://edge.liveclicker.net/scripts/MultiComponentOnload.js?
client_id=85&dim1=EC1015856,EC1015111,EC1015222,EC1015221,EC1015223&component_id=123456"
></script>
NOTE: enabling an overlay for each search results page might require small changes to the Embed CSS.

Search results - advanced

A more sophisticated approach to featuring video as part of a search results page is to contextually show videos which may not necessarily be exactly featuring products.

 

SearchResults.gif

 

The main challenge is to understand exactly what content is desirable and when. Take for example a retailer selling running shoes. On a given search results page, this retailer may:

  • Feature videos of the brands that appear in the search results
  • Feature how-to videos for how to chose a video
  • Show product videos related to the products shown in the search results
  • Show a general video "Are you not finding what you're looking for" video when no results is found

For each of these, a separate onsite banner needs to be created in Liveclicker and placed on the search results template. We will examine three separate approach below which cover a wide base of scenarios.

Static banner insertion

This is the easiest of all. Say you want to embed a "Are you not finding what you're looking for" video when no results are found. To do this, create a banner, and select the manual playlist option to pick exactly the right video. Then in your search application, insert the Liveclicker JavaScript for the banner in the "no results found" template.

<script type="text/javascript" src="http://edge.liveclicker.net/scripts/getComponent.js?client_id=85&
widget_id=45223&component_id=914"></script>

Product video insertion

Here we are selecting videos by looking up precise videos by SKU or Product ID in Liveclicker. To do this, you need to pick "Auto/Broad" match type, and pass the SKU string as comma separated parameters in the query string:

<script type="text/javascript" src="http://sv.liveclicker.net/service/getComponent.js?client_id=85&
component_id=493&dim1=EC1015856,EC1015111,EC1015222,EC1015221,EC1015223"></script>
  • If one or more the SKUs is matched, the onsite banner is rendered on the page
  • If no video is found, the response comes back empty from Liveclicker and nothing is rendered on the page

Brand or category insertion

This scenario is an extension of the above, but instead of feeding SKUs to Liveclicker, your application needs to be smart enough to pass the proper brand IDs or category IDs. The IDs can also be strings - in any event they need to match the taxonomy you have used to upload your videos.

<script type="text/javascript" src="http://sv.liveclicker.net/service/getComponent.js?
client_id=85&component_id=493&dim2=nike,adidas"></script>
  • If one or more categories are matched, the onsite banner is rendered on the page
  • If no video is found, the response comes back empty from Liveclicker and nothing is rendered on the page

Default widgets

If you want to always have results, you can also assign default widgets for your banners.

Using your own overlay

If you are already using a media overlay technology that you want to reuse for featuring the video content, follow these steps:

  • First, you need to set the banner overlay type to "Client-defined: JavaScript callback function (LCTriggerOverlay)"
  • Second, on the page that contains the onsite banner tag, you need to define a JavaScript function called LCTriggerOverlay, which takes a URL as an argument.
<script type="text/javascript"> 
function LCTriggerOverlay(myurl) {
// Trigger your custom overlay here
triggerMyOverlayTechnology(params, url);
}
</script>

This function will be called everytime the user clicks on the banner.

  • Third, in your overlay, you need to embed an iFrame with myurl as the target:
<iframe frameborder="0" style="width: 600px; height: 400px;" src="http://vms.liveclicker.com/component/overlaycontent.php?
ref=aHR0cDovL3Ztcy5saXZlY2xpY2tlci5jb20vdm1zL3ZpZXdjb21wb25lbnQucGhwP2N1c3RvbWVyaWQ9MTkmY29tcG9uZW50aWQ9MTM0&amp;
widgetid=736&amp;aid=19&amp;playlist=789,736,1209,1512,1421&amp;overlay_type=3&amp;dim1=&amp;dim2=&amp;dim3=&amp;
component_id=134&amp;width=320&amp;height=240&amp;LC"
hspace="0"> </iframe>

In this iFrame, Liveclicker will render the video banner.

NOTE: Make the height and width as large as possible for the iFrame, within your overlay, and avoid scrollbars whenever possible.

LCTriggerOverlay context parameter

If you have multiple onsite banners on the same page, all calling your own overlay function, it may be useful for the LCTriggerOverlay function to be passed a "context" parameter, so it can adjust its size to the specific scenario for example.

Imagine for instance that you have two banners on your product page. One (called A) for the official product demo (single video), and another one (called B) for all the product manufacturer videos (which are presented as a playlist). A needs to be presented with a small overlay while B needs a wider overlay.

To solve this problem, add a context parameter to your Liveclicker JavaScript tag for banner A:

<script type="text/javascript" src="http://sv.liveclicker.net/service
/getComponent?client_id=31&component_id=219&dim1=&dim2=&dim3=&widget_id=973&context=product"
></script>

And another one for banner B:

<script type="text/javascript" src="http://sv.liveclicker.net/service
/getComponent?client_id=31&component_id=219&dim1=&dim2=&dim3=&widget_id=973,4334,3223&context=manufacturer"
></script>

Then change your LCTriggerOverlay function to take context into account:

<script type="text/javascript"> 
function LCTriggerOverlay(myurl, context) {
// Trigger your custom overlay here
if (context == 'product') {
triggerMyOverlayTechnology(someparams, url);
} else if (context == 'manufacturer') {
triggerMyOverlayTechnology(someotherparams, url);
}
}
</script>
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.