WordPressに設置したフローティングバーのコンバージョンをアップさせる6つの戦略

こんにちは、根本耕輔です。

この記事では、フローティングバーを設置するときの6つの戦略をご紹介していきます。

フローティングバーとは

フローティングバーは、サイトのトップに表示させるバーのことです。他にも、ハローバーとか通知バーとかって言われたりします。あなたの読者にとって非常に迷惑になることなくあなたのマーケティングキャンペーンのための最大の可視性をあなたに与えます。ダブルウィン！このガイドでは、これらの素晴らしい、勤勉なキャンペーンでコンバージョン率を高めるための効果的なフローティングバーハックをいくつか紹介します。

WordPress（ワードプレス）にフローティングバーを設置できるツール

WordPressにフローティングバーを設置できるツールやプラグインはいくつかありますが、僕がおすすめするのは、OptinMonsterさんです。フローティングバーの他にもポップアップ形式やスライドイン形式のオプトインフォームを表示できたり、記事中に埋め込むタイプのものも作成できます。このようなサービスでは、機能がトップクラスです。

1. カウントダウンタイマーを追加する

まず1つ目の戦略は、カウントダウンタイマーを設置するというものです。フローティングバーをサイトのトップに設置するのは、何かしらの商品やサービスをオファーするためです。でも、単に「商品を販売開始しました。」みたいなCTAだと、「購入するのは後でも良いか。」とか「今度給料が入ったら購入しよう。」と思われてしまうので、どんどん先延ばしされます。そうなると、結局購入されないことがほとんどです。だから、今買う必要があるということを伝えます。もしくは、今すぐ登録する必要があるということを伝えます。つまり、デッドライン（締め切り）を設けるわけです。

OptinMonsterでは、1月1日みたいに、サイトに訪問してくれた人全員に同じ締め切りを設けるタイプもありますが、訪問者毎に異なる締め切りを設けることができます。例えば、訪問してから15分間限定で表示するみたいな感じですね。そうすれば、10時にサイトを訪問した方には、10時15分まで限定のオファーに設定できますし、11時30分に訪問した方には11時45分までオファーを受けられるようになります。何れにしても、オファーに締め切りを設けることで、よりコンバージョンを高めることができるので、追加することをおすすめします。

OptinMonsterでカウントダウンタイマーを設置する方法

まずは、キャンペーンを作成したら、「Blocks」から「Element Blocks」にある「Countdown」をドラッグ&ドロップで、フローティングバーに追加します。

そしたら、次に、カウントダウンタイマーの文言を日本語に変更していきます。「Days」とか「Hours」、「Minutes」、「Seconds」の文言は、変更することができないので、CSSコードを追加する必要があります。上記のコードを、以下の手順で追加して行ってください。

「Display Settings」に「Custom CSS can target any element on the campaign.」という項目があるので、ここにコピペしてください。そうすると、カウントダウンタイマーの文言が変更されます。また、「color: #ffffff;」という箇所がありますが、これは文字の色になります。変更したい場合は、16進数のカラーコードを入力してください。そうすれば、その色が反映されます。

次に、カウントダウンタイマーのタイプを選択します。「Countdown」の「Settings」に「Type」という項目があるので、ここで訪問者に関わらず、特定の日にちを締め切りにする「Static」か訪問者毎に締め切りが異なる「Dynamic」を、ドロップダウンから選択します。

そして、何を選択しても、「Action」でカウントダウンが終わった後のアクションを設定します。

No action：アクションなし
Restart countdown：カウントダウンを再開する ※Dynamicのみ
Go to a view：他タイプのバーを表示する
Close the campaign：バーを閉じる

上記の4タイプあります。「Go to a view」はちょっと難しいかもしれませんが、OptinMonsterでは、Yes/NoタイプとOptinタイプ、Successタイプのフローティングバーを作成できます。例えば、Yes/Noタイプのバーでカウントダウンタイマーを表示する場合は、カウントダウンが終了したら、OptinタイプかSuccessタイプのバーを表示することができ、OptinタイプならYes/NoタイプかSuccessタイプ、SuccessタイプならYes/NoタイプかOptinタイプを表示できます。

それから、カウントダウンブロックの背景色も変更するかもしれませんが、それは「Block」という項目の「Background Color」で変更します。その他の大きさなどの細かい設定に関しては省略しますが、「Static」と「Dynamic」で設定が異なる部分があるので、以下で分けてお伝えしていきます。

「Static」を選択した場合の設定

まずは、具体的な締め切りを設ける「Static」の方です。

End Date：締め切る日にちを指定する
End Time：締め切る時間を指定する
Timezone：Tokyoを選択する（日本の場合）

これらの項目を設定します。

「Dynamic」を選択した場合の設定

次は、訪問者毎に締め切りが異なる「Dynamic」です。「End Date/Time」で、期限を設定します。「DAYS」の欄に日、「HOURS」には時間、「MINUTES」には分、「SECONDS」には秒数を記入します。

2. 期間限定オファーをする

2つ目は、期間限定のオファーをするということです。訪問者毎にダイナミックに変化するタイマーを設置しても良いですが、より効果的なのは期間限定のオファーです。この場合、何かしらの理由や季節感を出しましょう。例えば、「新コース公開記念」とか「夏休み限定」、「サイバーマンデーキャンペーン」みたいな感じですね。このようにして、オファーする理由づけをして、期間を限定することによって、よりオファーを強めることができます。

3. フローティングバーでコンテンツアップグレードをオファーする

コンテンツアップグレードは、特定のブログ記事に関連するリードマグネット（無料プレゼント）のことです。例えば、この記事の場合は、「WordPressに設置したフローティングバーのコンバージョンをアップさせる7つの戦略」ということで、内容がコンバージョンになっているので、「コンバージョンアップのチェックリスト」みたいなものをPDFとか動画コンテンツとして配布します。そうすると、記事を読んでくれる読者に「この情報も欲しい！」と思ってくれるので、リスト獲得率が上がります。実際に、Backlinkoさんによると、コンテンツアップグレードを実装して、コンバージョンを845％増加させることができたそうです。そのくらい強力な戦略です。

一般的には、記事中にイエローボックスを設置したり、ポップアップを表示してコンテンツアップグレードをオファーします。でも、どちらを実装しても、読者がイエローボックスを見逃してしまったら、もしくは、ポップアップを閉じてしまったら、リストを獲得するチャンスがなくなってしまいます。なので、フローティングバーを設置して、スクロールしてもずっと読者の目に入るようにしておきます。

4. スクロールをトリガーにしてフローティングバーを表示する

これは、セールスページで有効になります。特に、結構長いセールスページを書いている場合とかオプトインページ（スクイーズページ）を作成している場合、CTAは数カ所にしか用意していませんよね。大抵、最初の方に1つCTAがあって、しばらくはCTAがなくて、料金の説明があった段階でCTAを表示するみたいな感じだと思います。これだと、購入やオプトインしてもらうチャンスを逃すことになってしまいます。だからと言って、CTAをたくさん用意しておくのも変なランディングページになってしまいますよね。

そんな時は、スクロールをトリガーにして、フローティングバーを表示させると良いです。例えば、ファーストビューが全体の10%ほどで、その後、70%ほどスクロールしないと次のCTAが表示されないのであれば、読者が20%スクロールした時点で、フローティングバーを表示させます。

OptinMonsterでスクロールをトリガーにしてフローティングバーを表示する方法

では、実際にOptinMonsterで、スクロールをトリガーにする設定を確認していきましょう。まずは、タブを「Display Rules」に切り替えます。そして、トリガーを設定していきますが、一番左の項目では「distance scrolled」を選択します。そして、真ん中では「is at least」を選び、パーセンテージを入力する欄にはフローティングバーを表示したいタイミングを入力します。

5. パーソナライズする

ステップメールでも、お客さんの名前を表示したり、お客さんがメールを受け取る日にちを表示するために、マージタグというのを使ったりしますよね。マージタグを使うことによって、1通1通のメールをパーソナライズすることができ、「あっ、これは自分のために書いてくれているんだ。」、「ちゃんとライブでメールを送信しているんだ。」と思ってもらいやすくなります。まあ、名前に関しては、自動で変換されているのをわかっている人は多いかもしれませんが。何れにせよ、パーソナライズすることで、コンバージョン率を上げることができます。

それと同じことをフローティングバーでも行なっていきましょう。OptinMonsterの場合は、スマートタグと言われています。スマートタグを使うとお客さんの名前や住んでいる市や県、Eメールアドレスなどを表示することができます。住所に関する情報は、おそらくIPアドレスで判断されますが、その他の名前や電話番号などはオプトインフォームで記入があったら、表示してくれます。

OptinMonsterでフローティングバーをパーソナライズする方法

今回は、スマートタグを使って、名前を表示する方法を確認していきたいと思います。

Optinのフローティングバーを作成する

まずは、Optinのフローティングバーを作成していきます。ここで、「Optin Fields」をドラッグ&ドロップで追加します。そして、名前とEメールアドレスを取得する設定をします。そして、「Placeholder」で「お名前」とか「Eメールアドレス」のように記入します。「Error Message」では「お名前を記入してください。」、「Eメールアドレスを記入してください。」みたいに記入しましょう。あと、フィールドとボタンを一列に並べたい場合は、「Width」を下げて調節します。

そして、「Button」のタブに切り替えて、「Action」の「Form Success Action」で「Go to a view」を選択します。そして、「Go to:」で「The Success view」を選びます。これで、オプトイン直後に、「Success」のフローティングバーが表示されます。

Successのフローティングバーを作成する

次に、「Success」のフローティングバーを作成していきます。これは、オプトインしてもらった後に表示するものです。まずは、オファーの文章にスマートタグを入力していきます。「{ }」というアイコンがあるので、これをクリックして、「{{form_name}}」を選択し、「さん」を付け足しておきましょう。

最後に「Display Rules」に行き、「Action」の「show the campaign view:」で、ドロップダウンから「Optin」を選択します。

そうすると、オプトインしてくれた後に、上記のようにオプトインしてくれた人の名前が表示されます。

6. A/Bテストをする

あとは、必ずA/Bテストをするようにしましょう。OptinMonsterを初め、フローティングバーを設置できる有料ツールでは、ほとんどの場合、A/Bテスト機能があります。A/Bテストをすることによって、常にコンバージョン率を最適化することができるようになりますので、ぜひ、利用してみてください。

OptinMonsterでA/Bテストを実施する方法

OptinMonsterのダッシュボードから、A/Bテストを作成したいフローティングバーの「Actions」にある「More Options」をクリックして、「A/B Split Test」を選択します。そして、名前を入力して「Create Split Test」ボタンをクリックします。

あとは、通常のフローティングバーのように外観を設定していきます。ただ、A/Bテストの場合は、あまり大きく変更しないようにしましょう。変更するのは、CTAボタンの文言だけとか、CTAのボタンの色だけみたいな感じで、細かい変更だけにしましょう。そうすれば、どれを変更して、コンバージョンが上がったのかわかるようになりますので。