ネットショップなどで、こんなポップアップが出てきたことはありませんか?

ポップアップの例

商品をお得に購入できるように、メールアドレスを登録してもらうオプトインの一種ですね。

サイト管理者はお客さんのメールアドレスを取得できますし、ユーザーはお得に購入できるクーポンをメールでゲットできるわけです。

これWordPressサイトでも簡単に実装可能なんです。というわけで今回は、ポップアップ式のオプトインを設置できる「HUSTLE」というプラグインをご紹介いたします。

>> ポップアップが使えるEC用WordPressテーマ

HUSTLEの機能概要

WordPressサイト上にポップアップ式のオプトインを表示できるプラグインです。メールアドレス(見込み客)の取得やキャンペーンの告知に活用できます。主な機能は下記の通りです。

  • テンプレートが複数用意されている
  • ポップアップの表示トリガーや表示条件を詳細に指定可
  • 登録されたメールアドレスに自動返信可
  • 運用データの解析
  • メールアドレスのリストをエクスポート可

各所をかなり細かく設定できるので、さまざまな運用方法に用いれます。非常に高機能なプラグインですが、無料で使えます。

プラグインのインストール

管理画面から「HUSTLE」と検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

HUSTLE プラグイン

HUSTLE

プラグインのインストールにつきましてはこちらで詳しく解説しています。

使い方:オプトインを表示する方法

まずは「メールアドレスを取得するオプトインをサイト上に表示する」までを解説いたします。非常に詳細にカスタマイズ可能です。

プラグインを有効化すると「Hustle」という項目が追加表示されるので、「Pop-ups」から「CREATE」を押して設定を進めていきます。

CREATE

続いて表示されるウィンドウにはオプトインの名称を入れておきます。管理者がわかるものが望ましいです。

オプトインの名称を入力

「期間限定クーポン」などでもいいでしょう。今回はメールアドレスを取得するオプトインなので、Typeは「Email Opt-in」のまま、次に進みます。

テンプレート選択画面

上の画面でオプトインのテンプレートを選択可能です。今回は試しに「Summer Holiday 1」を選んでみますが、ゼロから独自に作成することも可能です(Start from scratch)。

ゼロから作る場合の設定箇所

次の画面で表示されるポップアップ内の詳細を設定してきます。

ポップの設定画面

このプラグインは日本語に翻訳されていませんが、Chromeなら、画面上で右クリックして「日本語に翻訳」から翻訳可能です。

Chromeで日本語に翻訳

これだけで、かなりわかりやすくなると思います。

日本語に翻訳された操作画面

ここからは赤枠の項目ごとにポップアップに表示される内容を設定していきます(以下の見出しはデフォルトの英文を基準にしています)。万が一設定内容がわからなくても、右上の「PREVIEW(プレビュー)」ボタンから変更箇所を確認可能です。

Contents(コンテンツ)

表示するポップアップの内容を設定します。

contentの設定

これは選んだテンプレートによって変わりますが、今回は「Summer Holiday 1」というテンプレートを選択しているので、上記のように表示されています。

  1. タイトルやサブタイトルを入力します。
  2. お好きな画像をアップしてもいいですし、テンプレートを選択時はデモ画像がセットされています。
  3. メインコンテンツです。WordPressのクラシックエディタで作成可能です。ここもテンプレートによって箇所は変わりますが、プレビューして簡単に確認できます。
  4. Call to Action(行動喚起)は通称CTAと呼ばれるもので、ポップアップ内にボタンを最大2つまで表示可能です。クーポンやキャンペーン情報の詳細などを記載したページへリンクささせるといいでしょう。
  5. 「このポップアップを二度と表示させない」というリンクの表示設定です。不要なユーザーにとっては大変煩わしいので、文言を登録しておくのがオススメです。

Email(メール)

ポップアップ内に表示するメールアドレスの入力フォーム、登録後に表示するメッセージ、自動送信するメールの設定です。

メールの設定
  1. デフォルトではメールアドレスを入力するフィールドのみですが、紫色のボタン(INSERT FIELD)から名前、電話番号、住所などのフォームも追加可能です。もちろん「GET SUMMER DEALS」部分は任意に変更可能です(「お得なクーポンをメールで受け取る」等)。
  2. メールアドレス入力後に表示するメッセージです。WordPressのクラシックエディタで入力可能です。下部の項目は、メッセージを自動で閉じるかどうかと、登録後にダウンロードできるようになるファイルを設定する箇所です。
  3. 自動返信メールの設定です。デフォルトではOFFになっているので、ONにしておくのがオススメです。

自動返信メールの設定

上記のように送信元のメールアドレスや、件名、内容を作成しておけます。ECサイトならここにクーポンコードなどを記載しておくといいですね。

Integration(統合)

この設定では、登録されたメールアドレスを保存するか否かを設定します。

統合

  1. デフォルトのままで大丈夫です。登録されたメールアドレスが後ほどご紹介するメールリストに保存されます。
  2. すでに登録済みのメールアドレスの登録を許可するかどうかの設定です。「Disallow Submission」を選択するとエラーメッセージも設定できます。
    (例:このメールアドレスはすでに登録されています。)

Appearance(外観)

外観
  1. レイアウトを選びます。
  2. 各要素の配置や間隔などを設定します。
  3. フォントタイプなどを設定します。
  4. カラー設定です。カラーパレット(配色の組み合わせ)で一括設定できるほか、個別変更も可能です。
  5. 各要素のスペースやボーダー、ドロップシャドウなどを設定します。
  6. カスタムCSSを有効化します。オリジナルでスタイル調整したい際に便利です。

ちなみに上部にある「MOBILE」タブからモバイル用に別の設定を行うことも可能です。

モバイル用の外観設定

きめ細やかな仕様ですね。

Visibility(表示条件)

ポップアップが表示される条件を細かく指定できます。

表示条件

条件が豊富に用意されており、複数組み合わせることも可能です。未設定だと全ページで毎回表示されるでの、ユーザーに不快な印象を与えてしまいます。必ず設定しておきましょう。

用意されている条件

翻訳すればわかりやすいです。上記のように様々な条件がありますので、任意のものを選択します。特定のページだけ表示するのはもちろん、ユーザーのデバイス(PCかモバイル)のほか、特定のURL、訪問者が見た回数等まで指定可能です。かなり高機能ですね。

親切にWooCommerce用のオプションも用意してくれています。

WooCommerce用のオプション

「商品ページでのみポップアップを表示する」ということも可能なわけです。

さらに以下のように条件を組み合わせると。。

条件を組み合わせた例

商品ページのみかつ、
ログアウトしているユーザーかつ、
1日で1回もポップアップを見ていない。

という条件で「表示する」という指定も可能です。

上部のShowとallの箇所は、Hideとanyにも切り替えられますので、表示しない条件や、いずれか一つの条件を満たした際の挙動も指定もできます。

Behavior(挙動)

ポップアップの挙動(表示/非表示のトリガー等)を設定できます。先ほどの表示条件とは少し毛色が異なります。

挙動
  1. スケジュールを設定します(日時や範囲、タイムゾーンまで指定可)。
  2. ポップアップの表示タイミングを設定します(秒数指定・◯%スクロールで・クリックで表示など)
  3. アニメーションの有無を設定します。
  4. ポップアップを閉じるタイミングを設定します(秒数指定、ポップアップ以外の箇所をクリックしたらなど)。
  5. ポップアップを閉じた後の挙動を設定します(一度閉じた後は24時間表示しないなど)。
  6. ポップアップが表示されている間、バックグラウンドでのページスクロールを有効にするか否かを設定します。

設定によって、サイト全体(もしくはページ単位)で◯日間表示しないなどの詳細な設定項目も展開されますが、翻訳すれば問題なく設定できるはずです。

最後にいずれかの箇所から「PUBLISH」を押せば、ポップアップが公開されます。

publish(公開)箇所

フロントから動作を確認してみましょう。

使い方:運用データを解析する方法

ポップアップを表示できたら、実際に運用していきます。ダッシュボードの「Pop-ups」内に先ほど公開したポップアップが追加されています。

ポップアップの運用データ確認箇所

ここでの直近のコンバージョンや、閲覧数、コンバージョン率も確認可能です。グラフも表示されるようです。

上部の「Create」から別のポップアップを作成することもできますし、複数のポップアップでABテストを行うこともできますね。

取得されたメールアドレスは、ダッシュボードのメニュのー「Email Lists」に一覧表示される仕様です。

取得されたメールアドレスを確認する箇所

上部で運用中のポップアップを選択できるので、ポップアップの種類別に確認できます。右上の「EXPORT CSV」からリストを出力するのもワンタッチです。

まとめ

Webサイトやネットショップでオプトインを表示し、効率的にメールアドレス(見込み客リスト)を集められるWordPressプラグイン「HUSTLE」をご紹介いたしました。

ポップアップの表示条件やレイアウトを詳細に設定できる上に、運用データの解析までできてしまいます。集まった顧客リストにさらなるマーケティング施策を打てるので、オンラインビジネスで非常に活躍するプラグインなのではないでしょうか。ぜひチェックしてみてください。

メルマガマーケティングに関する記事