Online store inside the banner

All of us have long been accustomed to advertising banners on our favorite sites. Some of them modestly blink in the corner of the page, others obsessively suggest clicking on them, suddenly appearing in the center of the screen and annoying (yes, annoying) animation. The time has passed when beautiful effects could introduce a user into a stupor and make you click on an advertisement, the effectiveness of boobs and other dubious marketing moves also dropped sharply, because users had evolved. Now they click on the banner only if they are really interested in what he sells.

Web developers have at their disposal a lot of technologies with the help of which gmail, facebook and many other great services were made, but why are banners still just an electronic sign-lure, and no more? We decided to make a banner that not only attracts to the site, but sells itself.

Banner store

')

Look at the banner in the original article.

Especially for the demonstration of our ideas, we have developed a banner that you can see by clicking on the link above. It uses the real YML distribution of one online home appliance store , so the catalog is not “fishy,” and you can even buy your favorite product. Clicking on the "buy" link will take you to the product profile on the online store website.
Technically, this is rather a widget, but we focus our every development primarily on the user, and from the user experience point of view, this is definitely a banner, as it has a rectangular shape, will be located in those areas of the site where banners are usually located, and serves as advertising purposes. So in this article (except for the section on implementation) the word “banner” will appear.

With our banner, the user has a choice. He does not go to another site right away, it doesn’t prevent him from using the banner search, view product information, and if he doesn’t find anything interesting, just continue browsing the site. But if a user found a product of interest to him and clicked on the “buy” link, the online store that owns such a banner gets the user several times more motivated to buy than if he had switched from a regular banner, even if it was the most animated in the world. In addition, our banner does not irritate (I want to think) the user, does not impose himself, he just does his job - he sells.
The banner has a size of 240x400px (a vertical rectangle, there is one, for example, on Habrahabr , on the right, over “Live”) and consists of the following pages:

Home Page. Here you can set the search parameters, while if you select a category, the list of available subcategories is automatically adjusted.	Loading search results. A request for products by the selected criteria is sent to our server. Need to wait a bit.
Searching results. Products are displayed on 10 pieces. You can look through the results pages, see the product description by hovering over the image or go to the detailed information about the product.	Product information. A bigger photo, a detailed description of the product and of course a large “buy” link. Detailed information is not very much, but the banner is something demo.
About the banner. The most boring page of our application. It was added to ensure that the banner does not forget its owner, even if someone wants to place it in his blog for example.	Feedback. You can send us a wish or suggestion about the banner. Just do not forget to fill in all the fields!

Implementation

Our widget receives the product catalog for the widget from an online store in YML format ( Yandex Market Language ). This standard supports the majority of large online stores and all the information necessary for the widget is present in their YML output. The data extracted from the YML document is placed in the database on our server, all images of the goods are reduced to the same size and type. The client part of the widget is also on our server and is loaded into the iframe on the advertising platform (in this case, instead of the advertising platform, our blog), the interaction with the banner server is done via AJAX. Technically, the entire widget consists of a single HTML page, managed by JavaScript.



The client part of the widget is written using jQuery, and has a size of 38KB. The jQuery library is loaded from code.google.com so that for some users it will be cached and for them the banner is 19KB easier. We did not use a single image in the widget implementation to emphasize its functional mission as opposed to the presentational purpose of conventional banners.

Ideas for development

We have a few thoughts about the possibilities of implementing and developing our solution:

1. Creating an absolutely independent banner shop, with its own basket of goods, a personal account and an order page. The limited space available could be overcome due to pop-up windows controlled by the banner and shown on the advertising platform.
2. If a store has a small amount of goods (T-shirts, souvenirs), a banner shop can become the only platform for the sale of goods. The store may not have its own website at all and sell products exclusively through banners placed on advertising sites. Get some "cloud" online store.
   
   
3. If the system has several online stores, it will be possible to make a contextual display of a store depending on the search history of the user viewing the page or the contextual load of the page on which the banner is placed.
4. Such a banner can be made not only for an online store, but also for a dating service, a job search service, a torrent tracker and much more.

Conclusion

We sincerely believe that our development will help to make the Internet advertising market more civilized, that users will find and buy exactly the products they need, and not those that they impose with colorful advertising and cheap tricks, the Internet shopping will become more efficient and profitable.

Thanks to the bosso.ru store and Vitaly Podkatilov personally for permission to use their YML distribution.