ウィジェットの利用

VWOのウィジェットを使うと、バナーやポップアップを画像やフォームを使ってコードなしでサイトに追加することができます。ウィジェットのを利用し、ビジュアルエディタから直接ページのバリエーションを作成することができます。この機能はVWO Enterpriseプランでのみ利用可能です。

ウェブサイトで展開中のセールを宣伝したい場合は、ユーザーがスクロールしてもページに貼り付くプロモーションバーを利用できます。これはビジターの注意をひく確度の高い手法です。

また、ウィジェットと様々なターゲティングのオプションを組み合わせて、よりコンテクストに近づけることもできます。例えば、ビジターが記事の最後に到達した時にニュースレターの購読をポップアップで表示させたい場合、ビジターの行動をもとに訪問者を特定し、ウィジェットを使ってエクスペリエンスを作成することができ、コードを一行も書く必要がありません。

ウィジェットは、新しくて興味深いコンテンツの広報、今後のイベントの宣伝、アプリケーションの主要機能を見つけやすくしたり、次回イベントやニュースレターへの登録者を増やすことでビジターとのエンゲージを増やせる便利な仕組みです。Web サイトに表示する各情報の関連性が高まり、コンバージョンが増加します。

VWOで利用できるウィジェットの種類

VWOで利用可能なウィジェットは大きく2つに分けられます：

バナー (Banners)

バナーはサイト上で何かをハイライトしたいときに最適な方法です。新製品の告知や宣伝、ブランド認知度の向上に役立ち、他の様々なシナリオに利用可能です。ブランド認知度を高めたり、さまざまなシナリオで使用できます。VWO のバナーウィジェットを使用すると、Web サイトの上部または下部にカスタマイズ可能なリボンのようなコンポーネントを追加できます。

表示されるメッセージやCTAボタンも用途に合わせて変更可能です。バナーでは、メールサインアップのための入力フィールドなど他の部品も追加可能です。この画像は、画面トップに表示されるバナーの例です。

モーダル (Modals)

モーダルは、Web ページのコンテンツ上に表示されるポップアップウィンドウであり、さまざまなシナリオで使用できます。訪問者が Web サイトから離れようとしている場合、モーダルを使用して訪問者の注意を引くことができます。ボタンやフォームなどに便利です。

VWOでは4つの種類のモーダルをご提供しています。

Image pop-up：画像ポップアップ
Form pop-up:：フォームポップアップ
Subscription pop-up (Vertical)：サブスクリプションポップアップ(縦)
Subscription pop-up (Horizontal)：サブスクリプションポップアップ(横)

ウィジェットの配置方法も、次の3つのレイアウトが利用可能です。

No Overlay：オーバーレイなし
Overlay：オーバーレイ（デフォルト）
Fullscreeen：フルスクリーン

モーダルの利用例としては、次のようなものが挙げられます。

画像ポップアップを追加し、Web ページ上の訪問者の行動に基づいてトリガーします。
フォームポップアップを使用して、今後のイベントへの参加を促進し、登録を集めます
ユーザーがニュースレターに登録しようとしたときにフォームをトリガーする

サイドチクレット

Web サイト訪問者の通常の Web エクスペリエンスを妨げることなく、Web サイト訪問者と関わりたいと考えていますか? サイドチクレットが答えです。

サイドチクレットは、訪問者の興味をすぐに引くために Web ページの左側または右側に追加できる小さな長方形の要素です。たとえば、電子商取引 Web サイトが、ポリシー関連の変更について Web サイト訪問者に通知したいと考えているとします。ここで、「返品ポリシーが変更されました」という鮮明なメッセージを含むサイドチクレットウィジェットを追加できます。訪問者がこのチクレットをクリックするとすぐに、ポリシーページにリダイレクトされます。こうすることで、Web ページの大部分をカバーせずにアナウンスできます。

ATTENTION：チクレットコンテンツの複数のバリエーションを作成するか、アナウンスバナーを試してどれが最適かを確認することをお勧めします。

ビデオの埋め込み

Web サイトにビデオを追加すると、クリックスルー率、平均注文額、コンバージョン、収益が向上します。ビデオを使用すると、メッセージをすばやく配信し、Web サイトの訪問者をより長く惹きつけることができます。それだけでなく、動画は検索エンジン最適化 (SEO) にとっても重要です。

視聴者は読書よりも動画のほうが長く関わり続け、動画の視聴後に見込み客に転換する可能性が高いことは実証済みの事実です。ビデオを使用すると、あらゆるものと最も効果的な方法でコミュニケーションできるためです。

VWO は、 YoutubeとVimeo という2 つのビデオタイプをサポートします。Youtube ビデオウィジェットを使用すると、Youtube でホストされているビデオを追加できます。一方、Vimeo ウィジェットを使用すると、Vimeo でホストされているビデオを追加できます。

VWO Editor のビデオウィジェットを使用すると、コードを 1 行も記述することなく、Web ページのどこにでも簡単にビデオを埋め込むことができます。必要なのは、ビデオが Youtube/Vimeo にある URL だけです。

VWO エディターを使用して Web ページにビデオウィジェットを追加すると、次のことができます。

- - - ビデオの配置を構成する
    - ページ読み込み時にビデオを自動再生する
    - ビデオコントロールを削除する
    - ビデオをループで継続的に実行する
    - 音声をミュートする
    - ビデオを非インタラクティブにする
    - ページにウィジェットをいつ表示するかを選択します。

ツールチップ

UI 上の任意のフィールドについて、煩雑に見えることなく追加情報を提供したいと考えていますか? 訪問者が要素を操作したときに表示されるツールチップを追加します。ツールチップは、ページ自体に情報を表示するのではなく、訪問者に情報を伝える優れた方法です。

ツールチップは、ユーザーが要素の上にマウスを移動したり、要素にフォーカスしたり、タッチしたりしたときに表示されるコンテキストラベルです。通常、その機能に関するヘルプテキストが含まれています。たとえば、パスワードフィールドのツールチップには、パスワードを形成するための必須文字に関する情報が含まれている可能性があります。

ウィジェットの追加方法

ビジュアルエディタの画面下部の追加から、新しいウィジェットを作成できます。

手順

VWOにログイン
左メニューのテスト > A/B を開きます
右上の作成ボタンから新しいキャンペーンを作成します
Select from existing hypotheses ドロップダウンから、仮説 (hypotheses) を選択します
テストしたいページのURLを入力してくださいから、ウィジェットを表示するURLを入力します。
セグメントを設定することで、誰に対してウィジェットを表示するか設定できます。
画面右下の次へをクリックするとビジュアルエディタが開きます。
ウィジェットをサイトに追加するには、画面下部の追加ボタンをクリックします。

Add Elements ダイアログの WIDGETS タブからウィジェットを選択すると、ページにそのウィジェットが追加されます。

Tips：デフォルトで、追加されたウィジェットは、デフォルトでサンプルの内容が表示されます。要素をクリックして、要素変更から編集が可能です。

ウィジェットを作成した後からでも Widget Settings から表示方法の変更が可能です。ウィジェット上でどこかコンポーネントをクリックすれば、メニューに表示されます。

ウィジェットの他の属性をを編集するには、要素変更をクリックし、表示されるダイアログから変更します。

フォームのデータ送信先を設定するには、フォームウィジェットの利用＜編集中＞を参照してください。
要素の変更後は、緑の完了ボタンをクリックして保存します。

ウィジェット利用のFAQ

1. VWOウィジェットはレスポンシブですか？

はい、デフォルトで全てレスポンシブです。しかし、ウィジェットをカスタマイズする内容によっては影響があるかもしれません。エディタの設定でモバイルデバイス画面でページをロードできます。また本番リリース前に、モバイル、デスクトップの両方でプレビューを確認することを強くお勧めしています。

2. ユーザーが × ボタンを押したときの挙動

ウィジェットは消えます。ビジターが他の対象ページを訪問した場合や、ページを再読み込みした場合は、再び表示されます。この設定を変更するオプションは、ウィジェットのオプションメニューに近々追加される予定です。

3. ユーザーがフォーム送信したときの挙動

ウィジェットに定義されたフォームアクションが行われ、次のステップに進みます。ビジターが他の対象ページを訪問した場合や、ページを再読み込みした場合は、再び表示されます。この設定を変更するオプションは、ウィジェットのオプションメニューに近々追加される予定です。

4. ウィジェットの表示されるタイミングは？

キャンペーンのセグメント/ターゲット設定の条件に合致した時点で、ユーザーに表示されます。

5. ウィジェットを非表示にしたい

画面右下の VARIATIONS から該当するテストパターンの Modifications をクリック、変更履歴の中から非表示にしたいウィジェットを探し、目のアイコンを選択します。

6. ウィジェットを削除したい

画面右下の VARIATIONS から該当するテストパターンの Modifications をクリック、変更履歴の中から削除ウィジェットを探し、削除の赤いアイコンを選択します。もしくは、画面左下の取り消すボタンから操作を取り消すこともできます。