今回はブログ上部や下部にLPやメールアドレス取得への導線をカンタンに設置することが出来るツール「Hello Bar」をご紹介します。コンテンツマーケティングブログで有名なLISKULさんのページ下部にLPのリンクがあるのが前から気になっていて、どのように設置するんだろうと思っていたのですが、見つけましたよ。

LISKUL

ページ下部にLPへの導線が貼られている。

今回はHello Barの設定方法をご説明します。

公式サイトへログイン

https://www.hellobar.com/

公式サイトへアクセス。

Hello Bar設置したいブログ・サイトのURLを記入し「Log in with Google」を押します。

Googleアカウントでログイン

Hello Bar

 

Googleアカウントがない場合は、新規アカウントで作ってからログインして下さい。

 

 

バーの新規作成と設定

hello-bar4

ログインすると上図のような画面になります。今回はotherを選んで下さい。

hello-bar6
  1. バーのタイプを選びます。今回は「Click link」を選択します。これはボタンを押せば指定のリンクへ飛ばすというもの。

 

hello-bar5
  1. リンク先のURLを記入しましょう。
  2. 「Open link in new window」をONにすると新規タブで開きます。僕はONにしています。
  3. 「Next」で次へ。

 

hello-bar7
  • バーのスタイルを選びます。画面上部・下部に出てくる横長のバーの場合は「Bar」を選択。

他の設定はそのままでもいいのですが一応説明します。

  • Hello Bar branding・・・左にあるブランドロゴを消すかという設定。消すには有料アカウントになる必要があります。そのままでもOKです。
  • Animate entry/exit ・・・バーがヒョイッとアニメーションで出てくる設定。僕は目を引くのでONにしてます。
  • Wiggle button ・・・ボタンがブルブル震えます。僕はONにしてます。
  • Allow to hide bar ・・・右側にバーを隠すボタンを設置するかどうか。僕はONにしてます。
  • Pushes page down ・・・バーが出たらその分ページを押し下げるかどうか。ONにしないとグローバルメニューが隠れたりするので僕はONに。
  • Remains in place ・・・下にスクロールしてもバーが残るか（追従）どうか。僕はONにしてます。
  • Placement・・・バーを上部or下部に置く設定。僕は上部に設定してます。LISKULとかは下部ですね。
  • Bar Size・・・バーのサイズ。好みでOK。
  • When does it display? (what’s this?)・・・いつバーを登場させるか？
hello-bar11
  • Immediately・・・すぐ出す。
  • 5 second delay・・・5秒遅れで出す。
  • 10 second delay・・・10秒遅れで出す。
  • 60 second delay・・・60秒遅れで出す。
  • After scrolling a little・・・少しスクロールしたら出す。
  • After scrolling to middle・・・中くらいまでスクロールしたら出す。
  • After scrolling to bottom・・・ページ下部までスクロールしたら出す。
  • User intends to leave・・・ユーザーがページを離れようとした時に出す。

僕は「After scrolling a little」にしています。

 

 

hello-bar8

ボタンやテキストの色を決めます。とりあえずはデフォルトでもいいでしょう。ボタンはオレンジや緑にしてもいいと思います。色々実験してみましょう。

hello-bar9

ボタン横ととボタン内の文字を決めます。

hello-bar10

誰に見せるか？なんですがデフォルトでOKです。終わったら保存して下さい。

バーの導入：専用プラグインのインストール

バーを作ったら、今後はサイトに設置します。いくつか方法あるのですが、今回は専用のプラグインをWordPressにアップロードする方法でいきます。

hello-bar

バーを作ったら上図のような画面になるはず。ならない人は左メニューの「Settings」を押して「Installation instructions」を押して下さい。上図の画面になるはずです。ここでは「I use WordPress」を押して緑ボタンのダウンロードを押しましょう。

hello-bar13

zipファイルをテキトーなフォルダにダウンロードして下さい（※zipファイルはそのままアップロードするので解凍しないで下さいね！）

hello-bar15

WordPressのダッシュボードにアクセスし、新規プラグインを押して「プラグインのアップロード」を押して下さい。

hello-bar16

「ファイルを選択」を押します。

 

hello-bar17

先ほどダウンロードしたzipファイルを選択して「開く」を押します。

hello-bar18

「今すぐインストール」を押して次の画面で「有効化」を押して下さい。

 

これでバーが出るはずです。僕のブログだとこんな感じ。

Hello Bar hello-bar20

 

何個かバーを作ってABテストでコンバージョン率も計測できちゃう！

hello-bar21

これ、やばくないですか？文字を微妙に変えたり色を変えたり、バーからポップアップにしたり・・・

とにかく色んな実験をしてクリック率を上げるバーを作り上げることが出来ます。これはメルマガマーケティングをしている人には必須のプラグインと言えそうです！ぜひぜひこの機会に導入してみてくださいね^^