ボタンのデザインはどちらが良いだろうか？文言の位置はどこが良いのだろうか？…　これはこれで効果が出る場合も多くあります。でも、これだけでテストをしていると言ってしまうと半分以上損をしているかもしれません。

仮説からきちんと組み立てながらテストをきちんと設計することで、より戦略的にその次のアプローチをテストを利用しながら組み立てていくことが出来るようになります。今回はそんなテストの奥行きについて少し触れてみたいと思います。

次のアクションのために

全てにおいてテストは連続的に出来るわけではありませんが、多くの場合、きちんと設定することでテストの次のアクションまで想定することが出来るようになります。とあるページの改善についてどう考えていくかという事を具体的に触れていきたいと思います。

Web解析ツールを利用した分析を行った結果、「Aというページにはコンバージョンへの貢献率が高いがトラフィックが少ない。もしかしたら、ページAのトラフィックを増やすことでさらにコンバージョンを増やすことが出来るかもしれない」という仮説がたったとします。

しかし、これと同時に「ページAは単に特定のニーズが発生したセグメントだけが利用しているだけで、必ずしもトラフィックを増やしたところでコンバージョンは増えないかもしれない。場合によっては全体として減ってしまうかもしれない」という疑問も沸き上がります。

こういう時にはテストの出番なわけです。まさにこういった疑問を解消するために利用するわけですよ。そして、より戦略的に実施するためにはまず、ちょっと強引なテストをしてツールA自体の効果を測れるようにします。

テストの戦略

このような場合、テストを行うことで、その後の方針を決めることが可能です。最初にページAの全セグメントへの効果テストを行います。このテストによりページAは特定のセグメントのみに効果があるものなのか、そうではないかが判断出来るようになります。

もしページAのトラフィック自体を増やすことで、ページAのポテンシャル を効果的に発揮できる（ページAを使ったセグメントとそうではないセグメントでテスト結果を比較した時にページAを参照しているセグメントの方が効果が高かった場合）、その後はページAの誘導に力を入れる判断が出来ます。

逆にページAの利用がやはり特定のセグメントのみに効果がある（ページAの利用とそうではないセグメントとで利用者の方に効果が出なかった）場合、そのページの利用率しだいですが、ここには手を付けずに他の箇所を行うか、ページ自体の改修などを検討することになります。

1. 全訪問者へのページ参照の可能性をテスト
2. 結果に合わせて誘導、もしくは別の検討を開始

まとめ

解析ツールで得られた数字をベースに改善策を検討する場合、そこには何かしらの仮説、戦略が必要になってきます。テスト設計をうまく行うことで、テストには奥行きを設定することが可能性になります。

上記のご紹介した例を最も効率的に利用した例として、ランディングページを利用してコンテンツのニーズを探る検証・テストを数回繰り返し、ある程度効果的な要素が決まったところで、TOPページのリニューアルにも反映させ見事全体のコンバージョンのリフトにつながった例もあります。

TOPページのリニューアルなどでは、担当者の方にとってはリニューアルをすることでコンバージョンが下がるかもしれないというリスクがあり、それは同時に怖さでもあります。テストをうまく利用してリスクを取り除くことで、このリスクを最小限に抑えていくことが出来るようにもなります。

改善策を検討する際は、テストの奥行きについても意識 をしておくことで、より効率的なリソース投下も出来るようになると思いますので、意識をしていただけると良いのではないかなぁと思います。

なぜ「いいね！」ボタンなのか？

企業がFacebookと関わるにあたってという部分をまず考えてみます。アプローチは大きくは２つぐらいあります。

• Facebook上にファンページ、アプリを提供すること
• Facebookの一部の機能をサイトに取り込むこと

１つめは今非常に盛り上がっているところですね。ファンページやアプリをFacebook上で提供することでファンを増やしていこうという試みだったりするわけです。

後者は「いいね！（Like）」ボタンに代表されるようなFacebookが提供している機能を自分のサイト側に取り込む感じです。

全社についてはFacebook内で完結してしまうことが非常に多くあり、イメージ的には別サイトを運営管理している感じに少し近くなります。

これに対して後者はFacebookと自社のサイトの距離を縮める働きをしてくれる感じかなぁと感じています。そしてこの距離を縮めてくれる最も簡単かつ重要なアプローチが「いいね！」ボタンなんですっ！

「いいね！」ボタンのしてくれること

Facebookの中にも至る所に「いいね！」は存在しているのですが、ここではサイト上に統合できる「いいね！」にフォーカスします。

サイト内に表示出来るようにした「いいね！」ボタンはログインをしているFacebookユーザーが押すと、Facebook側にデータが送信されその人のウォール上に表示されます。

これによってその人と友達になっている人にもこの内容が見えるようになるわけですね。これが基本的な動きです。

サイト上には「いいね！」ボタンを押した人が何人であるか、ログインしているユーザーの友達になっている人の誰が押したかなどが見えるようになっています。

まぁ「いいね！」ボタンを追加すれば、そのページを「いい」と思った人がFacebook上の友達にリンクをどんどん見せていってくれるという素晴らしい仕組みなわけです。

実は深いい仕組み

大まかな機能はこれだけなのですが、そうです。このブログは解析ブログであり、最適化ブログです。計測や最適化の部分について少し触れていきましょう。（ここは少し技術的セクション）

まず最も重要なのが「いいね！」ボタンで生成されたリンクから来訪した人をどのくらいなのか知れるようにする方法です。

Facebookから来訪した人というだけであれば、リファラがfacebook.comである人でほとんど捕捉できるわけですが、それだと少しFacebook戦略を行っていく上ではデータの粒度が大きすぎてしまします。

実は「いいね！」ボタンによってFacebook上に表示されたリンクから来訪した場合は、それを特定することが出来るような仕組みが用意されています。 （上の図の４の部分）

「いいね！」を設置する際にパラメータによって見た目などを操作することが出来るようになっています。この中に「ref」というパラメータがあるのですが、これが非常に重要なものとなっています。

これをパラメータとして指定すると「いいね！」ボタンの押したユーザー上に表示されたリンクに２つのパラメータが付与されます。（仕様の詳細：Like Button – Facebook開発者）

実際には例えば「http://an-k.jp/blog/archives/2289」が「いいね！」が押されたリンクだとすると「http://an-k.jp/blog/archives/2289?fb_ref=fblike&fb_source=profile_oneline」といった感じのURLが設定されることになります。

１つめの「fb_ref」というパラメータでは、「いいね！」ボタンで指定した「rel=”XXXX”」という部分のXXXXが＝の後ろに設定されます。上の例では「fblike」というのを設定しています。ここの使い方次第で様々な効果測定が出来ます。

そしてもう１つが「fb_source」というパラメータです。アンダーススコア（_）でつながれた２つの情報が含まれたものになるのですが、こちらはFacebook上のどこで表示されたのかという情報が入ってきます。

前に入っている部分が「home」「profile」「search」「other」とFacebook上の大きなカテゴリが入ってきます。後ろに入る部分は「oneline」「multiline」という単一内容のウォールか複数内容のウォールかのいずれかがわかるようになっています。

はい。ということでこれら２つのパラメータを解析ツールで集計できるようにしておきます。そうすることで、Facebookから来た訪問者というだけではなく、パラメータの指定方法によっては「どこの製品のプロダクトで押された「いいね！」ボタンから、どのくらい流入があって、どのくらいコンバージョンに貢献しているのか」という部分がわかるようになるわけです。

つまりですね「いいね！」を利用するのに「ref」指定をしないはありえないのですっ！

表示される画像だって変えられる

先ほどのサンプルのように「いいね！」を押されてユーザーのウォールに表示された場合、コメントが入っていたりするとそこに画像も表示されます。（上の図の２の部分）

何も指定していないとそのページにある適当な画像が表示されてしまうようです。それでは勿体ないですよね。製品詳細ページに置いてあるのであればその商品の画像を表示したいもの。

これはOpen Graph protocolというものを利用したものを設定することで可能だったります。といってもそんなに難しいものではなくページのソースのヘッダ部分に「これ使ってね」と指定する感じです。（仕様の詳細：Open Graph protocol – Facebook開発者）

このOpen Graph protocolもいくつか利用できる属性があるのですが、この画像については「og:image」というものを利用します。これをMETAタグというものを利用して設定する感じです。このブログであれば下記のような感じ。簡単です。

<meta property="og:image" content="http://an-k.jp/blog/wp-content/themes/arthemia/images/digit.png"/>

これで画像も任意のものが設定できるわけです。ありがたやありがたや。

「いいね！」が押された回数を知りたい

ここまでは「いいね！」がクリックされてから、その表示やその後戻ってきた時にきちんと計測できるところを見てみましたが、やっぱり「いいね！」のクリック回数も知りたいわけですよ。

出来ることのほとんどはサイトに設置した「いいね!」の押され具合をデータで解析する方法 | Web担当者Forumにまとまっています。

で、ここであえて触れた理由はやっぱり自分で使っているウェブ解析ツールでも取得したいじゃないですか。これが出来るんですよ。

「いいね！」ボタンの設置方法には大きく２つの方法があります。１つがジェネレータで作って簡単に入れられるiframe方式です。もう１つがFacebookの提供するJaveScript SDKを読み込んで利用するFBML方式です。

設置の簡単さで言えば断然iframe方式なんですが、導入している解析ツールでも取得をしたいのであればFBML方式を選択していただくことになります。

さてFBMLで導入をすると「FB.Event.subscribe」というのを利用して「いいね！」をクリックされた時のイベントをJavaScriptで取得することが出来ます。あとはここで解析ツールでのクリック計測のファンクションを仕込んでおけば良いわけです。簡単ですね。

なぜ取るのか？１つは別のサイトのデータと一覧できるようになること、もう１つは解析ツールによりけりですがアラートなどが使えることだったりします。運用を考えると結構大きいです。

まとめ

ということでFacebookの「いいね！」について少しまとめてみました。結構、デフォルトの何も設定しないまま導入してしまっていることが多いようですが「refの設定」「refの戻りの取得」「画像の設定」「いいね！の回数計測」のような設定を気をつけておくことで、よりフルにその効果を確認出来るようになると思います。

先ほど触れた設置方法ですが、企業は今後のことも考えてFBML方式での導入をおすすめします。これは「いいね！」ボタンだけの話だけではなく、今後、Facebookを自分のサイトに統合していくにあたって格段に拡張性が生まれそこに価値が作れるようになるためです。

この辺りはまたどこかで書きたいと思います。あと記事の下の「いいね！」ボタンも是非っ。