専門知識は不要!サイトにCTAを設置できるHelloBarの解説

ブログを利用したWebマーケティングではCTA(Call To Action)設置は欠かせないです。せっかくのアクセスも有効活用できないですからね。

このCTAとは行動喚起とよばれ、サイトのアクセス者に対して資料請求を促したり、業種によっては無料相談を促したりします。

メルマガの登録をCTAにしている方も多いですが、最近は純粋なメルマガへの誘導では難しいです。

無料オファーへの登録ページであるオプトインページへの誘導がセオリーですね。

みなさんはWebサイトに訪れた際に追尾してくるCTAを見たことはありませんか?

形は様々ですが、画面上部や下部にツールバーで追尾型CTAや数秒経過したらポップアップで表示させているケースが多いです。

通常、この仕組みを設置するのは難しく、

・HTML
・CSS
・JavaScript

というプログラミング言語の知識が必要になってくるんです。全く知らない人からしたら、よくわからないですよね。

JavaScriptに至っては、本格的なプログラミング知識が必要になります。

こういった専門的なプログラミング言語を一切使わずに、ツールバーなどの形式で作成できる「Hello Bar」というWebサービスがあるのでご紹介します。

Hello Barとは?

「Hello Bar」というツールバーでCTAを簡単に設置できるWebサービスについてご紹介いたします。

ツールバーとは、画面上部や下部に固定してサイト訪問者に追尾してくるバーです。

このツールバーに、

・メルマガ登録、ニュースレター登録などでメールアドレスを取得する
・特定のWebサイトへ誘導する
・ソーシャルアカウントのフォロー

などを簡単に設置することが可能なんです。

専門的な知識は必要ありません。画面の操作にそってクリックしていくのみですのでWeb初心者でも簡易的に設置できます。

しかも、無料でも十分すぎるくらい高機能です。

有料のPro版もありますが、それでも月に12ドル(約1200円)とそこまでのコストはかかりませんね。

設定画面は英語ですが、Googleの日本語翻訳を活用しましょう。

ちぐはぐな日本語ですが、ニュアンスはわかるかと思います。

では、早速使い方について解説します。

Hello Barの使い方

公式サイトへログイン

01

公式サイト: https://www.hellobar.com/

まずは、公式サイトにアクセスしましょう。

Hello Barにユーザー登録しよう

Hello Barにユーザー登録をします。
その際に、Googleアカウントが必要になります。

お持ちでない方はまずはGoogleアカウントを作成しましょう。数分で作成できます。

Googleアカウントでログインした状態を確認して「Your website URL」の箇所に、今回HelloBarを設置したいサイトやブログのURLを入力しましょう。

02

入力後は、「log in with Google」をクリック。

次の画面で、「Create a new account」をクリックし、HelloBarに登録したい任意のアカウントを選択します。最後にリクエストを許可しましょう!

03

04

以上で完了です。たったこれだけです。
すでにアカウントをお持ちでしたら、ほんと数分で完了してしまいますね。

SELECT YOUR GOAL(ゴールの設定)

こちらで、これから設置するツールバーのゴールを設定します。

05

・Promote a Sale/Discount → 商品の販売を促進

・Talk to Your Visitors → サイト訪問者からのお問い合わせ

・Grow Your Mailing List → メルマガ、ニュースレター登録

・Get Facebook Likes → ソーシャルアカウントのフォロー

・Other → その他、

の5種類があることを確認できると思います。

今回は、このは屋のサイトのように、無料オファーからのメールアドレス取得のCTAを設置しようと思うので、「Grow Your Mailing List」を選択したいと思います。

次の画面に進むと、「What should your Hello Bar say?」「What should the button say?」を入力する画面にきますね。

06

 

・What should your Hello Bar say? → CTAに関するタイトルを入力 例:メルマガに登録する、〜〜を受け取る

・What should the button say? → ボタンテキストを入力 例:今すぐ申し込む、今すぐ受け取る

バーの作成

What do you want to collect from visitors?

15

Just email addresses → メールアドレスを入力

Names and email addresses → 名前・メールアドレスを入力

Which contact list would you like your emails stored in?

07

リストの保存先を選択してください。

After visitor submits their email …

08

こちらでは情報を入力し、送信ボタンをクリックした後に表示されるメッセージの設定ができます。

ですが、デフォルト以外のメッセージを設定するには、有料のPro版に申し込む必要があります。ちなみに、Pro版は月に12ドル(約1200円)です。

設定が済んだら、次へボタンをクリックしてください。

表示させるバーの形式を選択

09

・Bar → 画面上部式

・Modal → ポップアップで表示されるウィンドウ式

・Slider → 画面右下にウィンドウで表示

・Page Takeover → 画面全体で表示

今回は、このは屋のサイトでも設定している、Sliderに設定します。

次に詳細設定になります。

18

 

Hello Bar branding → Hello Barのロゴを表示・非表示にするかの設定。非表示にするには有料会員にする必要があります。

Animations → バーにアニメーションをいれるか・いれないかの設定です。アニメーションがあると訪問者の目を引きますが、こちらはお好みで!

Placement → バーを表示する位置を設定できます。右下・右上・左上・左下で設定可能。

When does it display? → バーを表示させるタイミングを設定できます。

・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 to middle』『After scrolling to bottom』あたりがオススメです!

How often should the Hello Bar be displayed? → どのくらいの頻度でバーを表示させるかを設定できます。訪問者がなんらかのアクションをした後でも表示させるのか、非表示にするのか設定できます。

デザイン・色・テキストの設定

17

Theme → Hello Barに用意されているテーマ(デザイン)を選択できます。プレビュー画面を参考にお好みのテーマを設定してください。

COLORS → 背景色・テキスト・ボタン・ボタンテキストの色を任意で設定できます。

IMAGE → ご自身のパソコンからアップロードして、お好きな画像を設定できます。

TEXT → テキストの設定ができます。見出し・キャプション・フォームのプレースホルダ・ボタンテキスト・フォントの設定が可能です。

最後に誰に見せるかの設定

ここはデフォルトの『Everyone』のままで大丈夫です。

最後に「保存ボタン」を押してください。

実際にWordPressに設置

ここからは作成したHello Barを、利用している人も多いWordPressに設置してみたいと思います。

Step1.プラグインをダウンロードする。

Hello Barからプラグインをダウンロードしましょう。解凍はせずに、zip形式のままで結構です!!
10

Step2.WordPressにプラグインをインストールする。

手順は、WordPress管理画面 → 新規追加 → プラグインのアップロードになります。

11

必ず、zip形式のままアップロードしてくださいね!
12

インストール後は有効化を忘れずにしてください。

以上でWordPressへの設置は完了となります!

19

編集後記

今回は、専門知識は不要!サイトにCTAを設置できるウェブサービスHelloBarについて解説しました。

こんな機能ほしいけど簡単に実装できるWebサービスないかなーと探してみると、実力のあるプログラマーさんたちがすでに作ってくれているケースは、昨今のWebサービスでは多いですね。

最新のWebサービスに焦点をあてた情報収集が、自身のWebマーケティングの実践に役立ちます。

記事が気に入ったら
いいね!しよう

このは屋の最新情報をツイッターで