Web開発者は、Gmail、Facebook、その他の多くの優れたサービスを作成するための多くのテクノロジーを自由に使用できますが、なぜバナーはまだ電子サインアップであり、それ以上のことはないのでしょうか？ 私たちは、サイトを引き付けるだけでなく、自分で販売するバナーを作成することにしました。
店舗バナー
元の記事のバナーを表示する
特に私たちのアイデアを実証するために、上記のリンクをクリックして表示できるバナーを開発しました。 家電製品の 1つのオンラインストアの実際のYMLディストリビューションを使用しているため、カタログは「怪しげ」ではなく、好きな製品を購入することもできます。 「購入」リンクをクリックすると、オンラインストアWebサイトの製品プロファイルに移動します。
技術的にはウィジェットである可能性が高いですが、主にユーザー向けの各開発に焦点を当てています。ユーザーエクスペリエンスの観点からは、これは間違いなくバナーです。目的。 そのため、この記事では（実装セクションを除く）「バナー」という単語が表示されます。
私たちのバナーでは、ユーザーが選択できます。 彼はすぐに別のサイトにアクセスせず、バナー検索を使用して製品情報を確認することを妨げるものは何もありません。興味深いものが見つからない場合は、サイトの閲覧を続けます。 しかし、ユーザーが興味のある製品を見つけて「購入」リンクをクリックすると、そのようなバナーを所有するオンラインストアは、世界で最もアニメーション化されたバナーからでも、通常のバナーから切り替えた場合よりもユーザーの購入意欲を数倍高めます。 さらに、私たちのバナーはユーザーを刺激しません（私は考えたいです）、自分を押し付けず、ただ仕事をします-売ります。
バナーのサイズは240x400px（たとえば、ライブブロードキャストの上にあるHabrahabrのような垂直の長方形）で、次のページで構成されています。
ホームページ ここで検索パラメータを設定できます。カテゴリを選択すると、使用可能なサブカテゴリのリストが自動的に調整されます。 | 
検索結果のダウンロード。 選択した基準に応じた商品のリクエストがサーバーに送信されます。 少し待つ必要があります。 |
検索結果。 商品は10個で表示されます。 結果ページを確認したり、マウスで写真の上にマウスを移動して製品の説明を表示したり、製品の詳細情報に移動したりできます。 | 
製品情報。 より大きな写真、製品の詳細な説明、そしてもちろん素晴らしい購入リンク。 詳細な情報はあまりありませんが、バナーもデモです。 |
バナーについて。 アプリケーションの最も退屈なページ。 たとえ誰かが自分のブログなどにバナーを投稿したい場合でも、バナーが所有者を忘れないようにするために追加されました。 | 
フィードバック。 バナーに関する要望や提案をお送りください。 フォームのすべてのフィールドに入力することを忘れないでください！ |
実装
私たちのサーバーは、YML（ Yandex Market Language ）形式でオンラインストアからウィジェットの製品のカタログを受け取ります。 この標準はほとんどの主要なオンラインストアをサポートしており、YML出力にはウィジェットに必要なすべての情報が含まれています。 YMLドキュメントから抽出されたデータはサーバー上のデータベースに配置され、すべての製品画像は単一のサイズとタイプに縮小されます。 ウィジェットのクライアント部分もサーバーに配置され、広告サイトのiframeに読み込まれます（この場合、広告サイトの代わりにブログが使用されます）。バナーサーバーとのやり取りはAJAXを介して行われます。 技術的には、ウィジェット全体はJavaScriptによって制御される単一のHTMLページで構成されます。
ウィジェットのクライアント部分はjQueryを使用して記述されており、サイズは38 KBです。 jQueryライブラリはcode.google.comからロードされるため、一部のユーザーはキャッシュされ、バナーは19Kb簡単になります。 通常のバナーのプレゼンテーション目的とは対照的に、ウィジェットの機能的な使命を強調するために、ウィジェットの実装に単一の画像を使用しませんでした。
開発のアイデア
ソリューションの実装と開発の可能性について、いくつかの考えがあります。
- 独自の商品バスケット、個人アカウント、チェックアウトページを備えた、完全に独立したバナーストアの作成。 限られた利用可能なスペースは、バナーによって制御され、広告プラットフォームに表示されるポップアップによって克服できます。
- ストアに少量の商品（Tシャツ、お土産）がある場合、バナーストアが商品販売の唯一のプラットフォームになる可能性があります。 店舗は独自のWebサイトをまったく持たず、広告プラットフォームに配置されたバナーを通じてのみ製品を販売する場合があります。 それは一種の「クラウド」オンラインストアになります。
- システム内に複数のオンラインストアがある場合、ページを表示しているユーザーの検索履歴またはバナーが配置されているページ自体のコンテキストロードに応じて、特定のストアのコンテキスト表示を行うことができます。
- 同様のバナーは、オンラインストアだけでなく、デートサービス、求人検索サービス、トレントトラッカーなどにも作成できます。
おわりに
私たちの開発は、オンライン広告市場をより文明化するのに役立ち、ユーザーはインターネットにカラフルな広告や安価なトリックで課せられているものではなく、必要な商品を正確に見つけて購入すると信じています-店舗はより効率的で収益性が高くなります。
bosso.ruストア、および個人的にVitaly Podkatilovに、YMLディストリビューションの使用許可について感謝します。