Home
アナリティクス アカデミー
Google アナリティクス
パートナー
Help
レスポンシブ・ウェブデザインと 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 アナリティクスヘルプセンター 「
イベントトラッキング
」
以上
ラベル
A/Bテスト
5
AdSense
5
AdWords
19
AdWords 連携
21
AMP
4
Analytics 基本
5
API
2
BigQuery
11
Cookie
1
CPA
1
DCM
1
DFP
3
DoubleClick
11
DoubleClick Campaign Manager
1
DoubleClick for Publishers
3
e コマース
2
Firebase
8
Firebase Analytics
4
Firebase 向け Google アナリティクス
2
ga.js
2
GACP
18
Google Consumer Surveys
2
Google Insights for Search
1
Google アド マネージャー
1
Google アトリビューション
3
Google アナリティクス
28
Google アナリティクス 360
33
Google アナリティクス 360 スイート
30
Google サービスの統合
10
Google サーベイ
6
Google サーベイ 360
5
Google タグマネージャ
16
Google タグマネージャー
1
Google タグマネージャー360
8
Google デベロッパー
1
Google マーケティング プラットフォーム
5
Google 広告
3
lpo
1
Measurement Protocol
1
Movable Type
1
Optimize 360
1
overture
2
PR
1
RLSA
1
RSS
2
Salesforce
1
Search Console
1
Urchin
1
urchin.js
2
URL生成ツール
3
YouTube
1
アカウント
4
アトリビューション
7
アトリビューション360
4
アドワーズ
1
アナリティクス 360
9
ウェブサイトオプティマイザー
4
オーガニック検索
3
オプティマイズ
10
オプティマイズ 360
12
オプティマイズ360
2
オプティマイゼーション
2
お知らせ
133
カスタムフィルタ
2
キーワードレポート
2
キーワード最適化ツール
1
キャンペーン
1
コンバージョン
9
サイト内検索
2
サブディレクトリ
1
セミナー
21
ソーシャル
2
タイトル別コンテンツ
1
タイムゾーン
1
データ サイエンス
1
データスタジオ
29
データスタジオ 360
19
データドリブン アトリビューション
1
データの見方
21
データ統合
1
デベロッパー
3
テレビ広告
1
トラッキング
5
トラッキングコード
7
トレーニング
1
ビジネス インサイト
6
ヒント
18
フィード
3
フィルタ
4
プロファイル
3
プロモーション改善
4
マーケティング、
2
マーケティング分析
4
モバイル
18
モバイルアプリ
3
ユーザーID
1
ユニークユーザー
3
ユニバーサル アナリティクス
3
よくあるお問合わせ
18
リダイレクト
1
リピーター
2
リマーケティング
1
リンク
2
レポートの操作
11
レポート機能
40
ログイン
3
ログインメールアドレス
2
開発者向け
3
活用事例
40
管理者
4
機械学習
2
検索エンジン
1
広告運用
6
広報
1
最適化
5
上位のコンテンツ
1
新機能
77
新規ユーザー
4
人気記事
1
直帰率
3
年末年始
1
文字化け
1
目標設定
6
目標到達プロセス
5
離脱率
1
連携
3
アーカイブ
2020
12
10
9
8
7
6
2019
8
4
3
2
2018
12
11
10
7
6
5
3
2
1
2017
12
11
10
7
6
5
4
3
2
1
2016
12
11
10
9
8
6
5
4
3
2
1
2015
6
2014
12
11
6
5
4
2
2013
12
11
10
9
8
7
6
4
3
1
2012
12
11
10
9
8
7
6
5
4
3
2
1
2011
12
11
10
9
8
6
5
4
3
2
1
2010
12
11
10
8
7
6
5
4
3
2
1
2009
12
11
10
9
8
7
6
5
4
3
2
1
2008
12
11
10
9
8
7
6
5
4
3
2
1
2007
12
11
10
9
8
7
フィード
関連リンク
アナリティクス アカデミー
YouTube チャンネル
GA IQ テスト
公式コミュニティ