Online store inside 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, while others obsessively offer to click on them, suddenly appearing in the center of the screen and annoying (yes, it is annoying) animation. A time has passed when beautiful effects could put the user into a stupor and force them to click on an advertisement, the effectiveness of boobs and other dubious marketing moves also sharply decreased, because users have evolved. Now they click on the banner only if they are really interested in what it sells.

At the disposal of web developers there are a lot of technologies with which gmail, facebook and many other great services were made, but why are banners still just an electronic sign-attraction, and nothing more? We decided to make a banner that not only attracts to the site, but sells it ourselves.

Store banner

View the banner in the original article

Especially to demonstrate our idea, we have developed a banner that you can see by clicking on the link above. It uses real YML distribution of one online store of household appliances , so the catalog is not “fishy”, and you can even purchase the product you like. By clicking on the “buy” link, you will be taken to the product profile on the online store website.
Technically, it’s more likely a widget, but we focus on each of our development primarily for the user, and from the point of view of user experience, this is definitely a banner, since it has a rectangular shape, will be located in those areas of the site where banners are usually located, and serves in advertising purposes. So in this article (except for the implementation section) the word “banner” will appear.

With our banner, the user has a choice. He doesn’t go to another site right away, nothing prevents him from using the banner search, looking at product information, and if he doesn’t find anything interesting, just continue browsing the site. But if a user found a product that interests him and clicked on the “buy” link, an online store that owns such a banner gets the user several times more motivated to buy than if he switched from a regular banner, even from the most animated one 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 - sells.
The banner has a size of 240x400px (a vertical rectangle, there is one, for example, on Habrahabr, on the right, above "Live") and consists of the following pages:

Home page Here you can set the search parameters, and if you select a category, the list of available subcategories is automatically adjusted.	Downloading search results. A request for goods according to the selected criteria is sent to our server. You need to wait a bit.
Searching results. Goods are displayed in 10 pieces. You can look through the results pages, see the product description by hovering over the picture with the mouse or go to the detailed product information.	Product information. A larger photo, a detailed description of the product, and of course a great buy link. There is not much detailed information, but the banner is also a demo.
About the banner. The most boring page of our application. Added to ensure that the banner does not forget its owner, even if someone wants to post it on 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 of the form!

Implementation

Our server receives the catalog of products for the widget from the online store in YML ( Yandex Market Language ) format . This standard supports most major online stores and in their YML-output there is all the information necessary for the widget. The data extracted from the YML document is placed in the database on our server, all product images are reduced to a single size and type. The client part of the widget is also located on our server and is loaded into the iframe on the advertising site (in this case, our blog is used instead of the advertising site), interaction with the banner server is done through AJAX. Technically, the entire widget consists of a single HTML page controlled 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 picture in the implementation of the widget to emphasize its functional mission as opposed to the presentation purpose of ordinary banners.

Ideas for development

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

1. Creation of a completely independent banner store, with its own basket of goods, personal account and checkout page. The limited available space could be overcome by pop-ups controlled by the banner and displayed on the advertising platform.
2. If the store has a small amount of goods (T-shirts, souvenirs), the banner store may become the only platform for the sale of goods. A store may not have its own website at all and sell products exclusively through banners placed on advertising platforms. It will turn out a kind of "cloud" online store.
   
   
3. If there are several online stores in the system, it will be possible to make a contextual display of a particular store depending on the search history of the user viewing the page or the contextual load of the page itself on which the banner is placed.
4. A similar banner can be made not only for the online store, but also for the dating service, job search service, torrent tracker and much more.

Conclusion

We sincerely believe that our development will help make the online advertising market more civilized, that users will find and buy exactly the goods that they need, and not those that they impose on them with colorful advertising and cheap tricks, that the Internet -Stores will become more efficient and profitable. Our

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