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:
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.
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:
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.
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.
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.
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.
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.
2) Trigger the banner call with a simple function, using the desired logic (on DOM load for instance):
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,
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.
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:
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
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)
- 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.
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.
<img src='http://edge.liveclicker.net/images/client/194/imageassets/image189.png' border='0'>
In the code above, the important things to notice are:
- 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