Follow

How do I implement a banner on my site?

Implementing banners on a site is as simple as dropping a snippet of HTML code with the proper dimensions. For example, the following snippet displays exactly one widget using the banner 219 definition, for client 31 and presenting the Video widget ID 1340:

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

Video Selection

Banners deployed on your site will display specific videos when clicked on. With Liveclicker, you have control over the video that's displayed either by exactly picking the widget ID you want, or passing a set of dimensions to the banner tag and letting Liveclicker dynamically select the appropriate video.

Manual mapping

If you want to deploy specific videos via a banner to your pages, this method will allow you to exactly control the video content per-page. Note that this type of implementation is not recommended in general because it requires you to map individual videos to specific product pages, by widget ID, and from your own content management system.

The code to deploy is simple:

<script type="text/javascript" src="http://sv.liveclicker.net/service
/getComponent?client_id=<CLIENT_ID>&component_id=<COMPONENT_ID>&widget_id=<WIDGET_ID>"
></script>

In the above,

  • CLIENT_ID is your Liveclicker customer ID (integer)
  • COMPONENT_ID is the banner ID. It has to be mapped to an existing banner that has been created in Liveclicker.
  • WIDGET_ID is the ID of the video widget in Liveclicker you want to be featured in this component.
Note: As you can see, with this method it's important to be careful with the widget you have created in Liveclicker 
and hard-coded into your application for the banners. If you delete a widget in Liveclicker that's called from one
of your pages via a banner, the banner will come out empty.

Dynamic mapping

This method is far more powerful than the above because it allows you to control the content entirely from the Liveclicker interface instead of your application server. For this, you will leverage the tags that are attached to your widgets, which will allow you to filter content dynamically.

Based on your dimensional tag assignments, when dynamically invoking a video banner from a page, you should pass the proper tag values as dimensions.

Tagging_c.png

 

The dimension values are generally passed as dim1, dim2, dim3 etc query string parameters in the JavaScript.

Deployment options and Tradeoffs

When deploying the Banner tags to your product or category pages, it is really important to understand the sequence of events leading to the banner rendering on the page. There are two options for embedding a banner on a page:

  • In-line: the banner is directly embedded while the page is loading.
  • On page load: the banner is displayed on the page only after the page is fully loaded.

In-line

When embedding a banner in-line, the banner is inserted on the page after a fast HTTP call is executed by the JavaScript. Upon receiving the response from the Liveclicker servers, the browser will display a clickable banner (or not). Because this happens as the page is loading, any slow response from the Liveclicker servers will directly slow down the page. Further, in the rare event of the Liveclicker servers experiencing some downtime, there is a risk that the page will not load on some browsers, or take a longer time to load.

The JavaScript tag to use in this scenario has the following structure:

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

On page load

This technique allows the banner to load only after all the page elements have been loaded and displayed on page, which eliminates the risk of page slowdown if the Liveclicker servers experience performance problems. However, because the banner is the last element of the page to load, there might be a delay to display the banner on the page.

The JavaScript tag to use in this scenario has the following structure:

<script type="text/javascript">var liveclicker_no_display = 1;</script>
<script type="text/javascript" src="http://edge.liveclicker.net/scripts/
getComponentOnload.js?client_id=31&component_id=219&dim1=&dim2=nike&dim3="
></script>
In this case, you are encouraged to host the getComponentOnload.js file on your own servers. 
To do so, simply download it from http://cdn.liveclicker.net/scripts/getComponentOnload.js.

On JavaScript call

This is a more advanced implementation method that combines the best of both worlds. This requires a little bit of JavaScript coding skills - the idea is as follows: rather than waiting for the onload event to trigger the banner load request, we actually wait for the DOM to be fully loaded then trigger the banner request. To accomplish this

1) Insert the JavaScript exactly where you want the banner to appear:

<script type="text/javascript">var liveclicker_no_display = 1;</script>
<script type="text/javascript" src="http://edge.liveclicker.net/scripts/
getComponentOnCall.js?client_id=31&component_id=219&dim1=&dim2=nike&dim3="
></script>

2) Trigger the banner call with a simple function, using the desired logic (on DOM load for instance):

<script type="text/javascript">
liveclicker.insert();
</script>

Starting the modal overlay automatically

If desired, on a page with a modal overlay the overlay can start automatically. There are two ways to do this:

1) Add "overlay_autostart=true" to the URL of the page containing the banner. For example, if the page http://mysite.com/product.php?product_id=123 contains a modal overlay banner, then visiting the URL http://mysite.com/product.php?product_id=123&overlay_autostart=true will load the same content, but the overlay will start as soon as the page is loaded.

2) Add "overlay_autostart=true" to the banner tag. For example,

<script type="text/javascript" src="http://sv.liveclicker.net/service
/getComponent?client_id=31&component_id=219&dim1=&dim2=nike&dim3=&overlay_autostart=true"
></script>

Note: If the banner is configured to display more than one thumbnail, the widget associated with the first thumbnail is the one that will be invoked.

Note 2: This feature is designed to work on pages that include a single banner, if more than one banner is on the page there is no way to specify which one will be affected by this.

Examples

Example for product pages

If you are trying to dynamically insert a banner on product pages, you may assign one of your tag dimensions to the product SKU.

  • When uploading the video for the product, tag it with the product SKU it's associated with
  • On the product page, instantiate the Liveclicker video banner with the SKU passed as one of the dimensions. For example:
<script type="text/javascript" src="http://sv.liveclicker.net/service
/getComponent?client_id=31&component_id=219&dim1=87766321&dim2=&dim3="
></script>

In the example above:

  • The client ID is 31
  • The component ID is 219
  • This tag is attempting to pull videos that match dimension 1 equals 87766321

If no video matches dimension 1 equals 87766321, then one of two things can happen:

  • If the banner was set as an 'Broad Match' or 'Exact Match', then the banner will be empty. Nothing will show.
  • If the banner is set to a playlist, then the widgets in the playlists will appear irrespective of the dimension value
  • If the banner is set to contextual, then a video might appear if Liveclicker can find a close match

Example for category or brand pages

For brand or category pages, multiple videos may be matching a single dimensional tag set on the page. In this case, Liveclicker will automatically pull the best videos based on your video banner settings.

As far as tagging is concerned, the rules are the same as for the product example. The tags need to be passed in the query string calling the Liveclicker banner

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

In the example above, let's assume we set up the tag structure to be as follows:

  • Dimension 1 is SKU (Integer)
  • Dimension 2 is brand (String)
  • Dimension 3 is category ID (Integer)

The copy/paste therefore follows the structure:

  • dim1 was left empty because this is brand page and there aren't any specific SKUs
  • dim2 was set to 'Nike'
  • dim3 was set to 765, the ID code for Running Shoes on this site.

Server side implementation (advanced)

If your site architecture allows it, it's possible to insert banner code directly into your server pages, using the Liveclicker REST API. When compared to the JavaScript implementation, the server side deployment presents a few pros and cons:

Server Side pros (vs JavaScript)

  • Faster for the end user: the various buttons will be generated on page load, which will always be faster than JS. Also there's a one less HTTP call and JS to execute on your pages.
  • All seems to come from one site (i.e. your site)
  • For pages that have no videos, there is not extra calls to outside servers (which may be wasteful)

Server Side cons

  • Some work involved to synchronize and cache Liveclicker information on your server, on a regular basis
  • No real-time: if a video needs to be pulled out of the site, this mechanism doesn't allow immediate action
  • Potential synchronization issues: when we have the video site, there will be situations where a video is on the video site (immediate), and not on your site (next day only). Also, this create problems when trying to take a video offline.
  • Styling changes will require your technical team's involvment (CSS, etc). The JavaScript method doesn't because the CSS is embedded in the Liveclicker response.
  • You lose access to Liveclicker's automated A/B testing features, which require a JavaScript implementation

If you are interested in this implementation strategy, please contact Liveclicker support.

Webcam capture banners

Webcam capture banners are a special type of onsite banners dedicated to capturing video from users via a Webcam device. Because this functionality does not need to dynamically be available to users (in general), the script to deploy this functionality will be different.

<a href='http://vms.liveclicker.com/component/webcam.php?&aid=19&component_id=643&assetTitle=My%20Asset'
onClick="javascript:window.open('','lc_19','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=600,height=415'); return true;" target='lc_19'>
<img src='http://edge.liveclicker.net/images/client/194/imageassets/image189.png' border='0'>
</a>

In the code above, the important things to notice are:

  • The fact that this is a JavaScript popup (and not a page overlay)
  • The dimensions of the popup are controlled by height and width parameters. You may also address scrollbars and other options as you wish
  • The aid and component_id parameters are essential. They are your account ID and banner ID
  • assetTitle is a recommended parameter. It's a free string that will be saved in Liveclicker. We recommend you use this as an encoded string to save where the video was submitted from (Example: assetTitle=ProductID%20998773)
  • The image or button is totally up to you. You may also have simple text
  • If you want to use your own overlay technology, you may change the onClick callback but be careful to point your overlay to the proper Liveclicker URL

Webcambanner.png

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.