Product Search Creative with Silverlight

This creative is especially interesting for you if you are an affilinet publisher.

With this Creative you are able to offer Product Search for your visitors that looks a bit different. To see a working sample please follow this link. 

You will find all files that you need here: c4aProductSearch.zip (237.84 kb)

How c4a ProductSearch works

c4a ProductSearch is implemented as a Microsoft Silverlight Application. This is a technique similar to Adobe flash, only that Silverlight is from Microsoft and has some additional features that are not relevant now. As Flash does, Silverlight only works if the user has installed a Plug-In. The Silverlight Plug-In can be obtained here. For further details please see e.g. http://silverlight.net/

The user of c4a Product Search enters search terms into a search field and searches for relevant products by clicking the 'go'-button. The result is displayed as a deck of picturecards with some description and details to the product. The user now can move these cards around, pull them to the front, close them and so on. The displayed products are from advertisers you do have a partnership with and were found by the affilinet Product Webservice.

Every time the user clicks search again, the deck disappeares and a new deck is shown, with slightly different products (if there are enough different products available on the affilinet servers taht do match the search criteria). Of course the search term canbe changed from search to search.

If the user clicks on one of the links (image, title, description.. on the picturecard) a new browser window opens and displays the product on the advertiser's site. affilinet will register the click and if the user creates a sale or lead it will be tracked accordingly.

How to use c4a ProductSearch on your pages

  • First of all you will need an affilinet account and have partnership(s) there with advertisers that do offer product data via the affilinet Product Webservices.

  • Then you should make sure your Webserver already supports the Mime type of XAP (which is the Silverlight Application type). An introduction on how to set up your IIS can be found here. All Webservers are able to serve XAP files, it does not necessarily have to be an IIS. Apache for example, no problem. Just use your favourite search engine and look for 'XAP Mime Type' and the name of your webserver.

  • Copy the file "ProductSearch.xap" that you will find inside the ZIP you downloaded above and place it in a folder on your website. The default location for the XAP files is 'ClientBin' but it is not necessary at all to name the folder like this. It only has to be on the same domain as the page you are about to use the Product Search on.

  • Open up the file 'c4a_ProductSearch.html' (also inside the ZIP) using a text editor (e.g. notepad) and mark and copy one of the <object data="data:application/x-silverlight..... ... </object> blocks (attention, it is spanning a number of lines)

  • Open up your target file and paste the Object code

  • Now you should edit the params, to make the creative fit your needs. This are the relevant ones:

  • <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="200" height="200">
    Put width and height here. The size of the product images willfit automatically. If not, please additionaly use the 'zoom' param described below.
    If you wish to use the Product Search stretched fullscreen, please put '100%' for both, width and height and also add the style definitions you can find in the second sample file's header.
  • <param name="source" value="ClientBin/ProductSearch.xap" />
    Put the path to your xap file here

  • <param name="InitParams" value="
    • PublisherID=123123,         
      your publisher ID at affilinet  (MANDATORY)

    • ProdWSpassword=xyzxyzxyz,         
      your affilinet Product Webservice password  (MANDATORY)

    • InitialKeyword=Jeans,         
      the initial search word the creative should use to initialize itself

    • maxNumResults=15,         
      the max number of displayed products

    • SearchButtonText=go,         
      the text on the 'search'-button

    • SearchFormTitle=this is my mega store,         
      the text in the title of the creative

    • InfoLinkText=Info,         
      the text on the info link in the bottom left corner

    • InfoLinkURL=http://www.clever4affiliates.de,         
      the destination URL for the info link

    • maxAngle=8,         
      the max angle the images of the products may be rotated (0: no rotation)

    • zoom=100,         
      the initial zoom value for the zoom slider

    • red=12,         
      a value between 0 and 255

    • green=30,         
      a value between 0 and 255

    • blue=128"         
      a value between 0 and 255           

      />
  • As users that do not have installed Silverlight 2 will not be able to see the Product Search, you should put some HTML between the <object></object> tags that will be displayed then instead of the Silverlight App. Of course it would make sense to put some code here that shows some other creatative instead of the default info that asks the user to install Silverlight.

  • That should be it for now. Save your page, upload it to your website (or use a local webserver) andcheck if it is working. Attention, it will most probably not work properly if you open the HTML now from the file system. This is related to built in cross site scripting securityof Silverlight (Microsoft, eh..).
This is the information for the version released on 2009-01-14. Any updates will be posted here.

Please comment on the blog entry introducing this creative if you like the idea, if you dislike the idea and also if you have any suggestion or questions, ideas for future features etc. I will be happy to get back to you and hope that together we can improve this nice creative.

 
c4a Product Serach is freeware. But please feel free to donate if you like the software.