アナリティクス日本版公式ブログ: レスポンシブ・ウェブデザインと Google アナリティクス NRI ネットコムの取り組み

レスポンシブ・ウェブデザインと Google アナリティクス NRI ネットコムの取り組み

2012年8月23日木曜日

Posted by 大内範行 Google アナリティクス　ソリューション・コンサルタント
Google は、スマートフォンやタブレットへの最適化手法として、レスポンシブ・ウェブデザインを推奨しています。レスポンシブ・ウェブデザインは、どのデバイスでも共通の 1 つの HTML を用意し、画面サイズからデバイスを判断し、CSS でデザインを変更して表示する手法です。ウェブマスター向け公式ブログでも紹介していますので詳しくはそちらをご覧ください。
今回ご紹介するのは、Google アナリティクスを駆使して、このレスポンシブ・ウェブデザインに対応したサイトの解析事例です。Google アナリティクス認定パートナーの NRI ネットコム株式会社が、お客様の株式会社セブン銀行の海外送金サービスのサイトで取り組んだ事例をご紹介していきます。セブン銀行を、ウェブ制作とマーケティングで支援する NRI ネットコムは、最適化後のデータ解析まで考慮して Google アナリティクスを実装しました。ひとつの共通の URL から、フルサイズの PC、スマートフォン、そしてタブレットとレスポンシブ・ウェブデザインの手法で、画面を出し分ける実装を実現しています。

NRI ネットコムは、Google アナリティクスのページレベルのカスタム変数を使用し、出し分けたページの種類ごとに、レポートが確認できるようにしました。例えば、PC，スマートフォン、タブレット用のそれぞれの CSS を表示したら、そのことがわかるよう、ページレベルのカスタム変数を、以下の様に設定しました。
PC= 960px 以上　　　　 _gaq.push(['_setCustomVar', 1, 'PageVariation', 'fullsize', 3]);スマートフォン= 520px 以下　　　　_gaq.push(['_setCustomVar', 1, 'PageVariation', 'mobile', 3]);タブレット= 520px から 960px 　　_gaq.push(['_setCustomVar', 1, 'PageVariation', 'tablet', 3]);
これで Google アナリティクスのレポート上で、以下のように、一目で画面タイプ別の指標が比較できるようになります。（レポート上の値は、実際とは異なります）

実際の設定はもう少し複雑です。スマートフォン、タブレット、パソコン用の 3 つの画面タイプに加え、縦横どちらの画面表示をユーザーが選んだかまでトラッキングしています。さらに、セブン銀行は、海外送金サービスに取り組み、ウェブサイト上で、10 種類の言語に出し分けています。3 種類のデバイスの違い、画面の縦横での違い、言語ごとの違い、さらにこれらの掛け合わせを、 Google アナリティクスのレポート画面ですぐに確認できるように設定しました。
Google アナリティクスのデータからは、いくつか有意義なデータが取れ始めています。まず、スマートフォンに最適化した結果として、モバイルユーザーのエンゲージメントやコンバージョンは明らかに改善されました。タブレットとスマートフォンの違いも見えてきました。平均滞在時間や平均ページビューなど、エンゲージメントの値が大きく違っています。さらに、同じスマートフォンでも、画面を縦にした場合と、横にした場合とで、指標の値が明確に違うことも発見でした。
特にコンバージョン関連ではいくつか効果が見えてきています。モバイルの流入経路やコンバージョンへの影響も明確になり、トラフィックの効果がわかってきました。単純な流入数としては、オーガニック検索の方が多いものの、スマートフォンサイト上に記載されたセブン銀行のお問い合わせ窓口の電話番号をクリックして電話をかけたコンバージョン数 ( イベント・トラッキングで計測 ) は、明らかに AdWords 経由での流入からの方が多い、という結果が出ています。言語による違いも興味深い結果です。ある特定の言語で、モバイルでのコンバージョンが高いことも明らかになってきています。
こういったデータは、アクショナブルなデータとして、セブン銀行の今後のマーケティング施策や、モバイルサイトのさらなる最適化に活かされていくことでしょう。
[ 関連リンク ] NRIネットコム事例紹介「レスポンシブ Web デザイン x Google アナリティクスカスタマイズ」Google ウェブマスター公式ブログ　「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」Google アナリティクス公式ブログ　「カスタム変数の概要」Google アナリティクスヘルプセンター　「イベントトラッキング」
以上