2012年8月11日土曜日

Googleアナリティクスでスマホユーザーが表示したWebデザインを計測する方法｜コラム アユダンテ株式会社

Googleアナリティクスでスマホユーザーが表示したWebデザインを計測する方法｜コラム アユダンテ株式会社

ayudante.jp | Nov 30th -0001

レスポンシブWebデザインは、URLとしては一つですので、CSSを出し分けた違いが、解析データには現れません。この課題を解決した興味深い事例が、NRIネットコムのサイトの事例紹介のページで公開されています。

レスポンシブWebデザイン x Googleアナリティクスカスタマイズ
http://nri-net.com/cases/details/googleanalytics_custom1.html

Googleアナリティクスのカスタム変数の機能を使い、スマートフォン、タブレット、PC画面の、それぞれのセグメントごとのパフォーマンスの違いをレポート上で確認できるように設定しています。CSSを出し分けると同時に、カスタム変数も切り替えるように設定されています。

今週、アクセス解析イニシアチブのメルマガコラムで紹介された"レスポンシブWebデザインをGoogleアナリティクスで計測する方法"は社内でも反響がありました。
今回はそれに関連したトピックとして、同じURLアドレスでスマートフォン用にコンテンツの出し分けをしているサイトをGoogleアナリティクスで計測する方法をご紹介します。

URLアドレスが同じスマートフォン専用サイトのWebデザイン情報をGoogleアナリティクスで計測する場合、最も理想的な実装方法はページレベルのカスタム変数です。
しかし、無料版ではカスタム変数は5種類しか使えないことから、カスタム変数の空き枠がないサイトもあると思います。そんな時に代替案として検討したいのが、今回ご紹介する_trackPageview()のカスタマイズによる計測方法です。

同じURLアドレスのスマートフォン専用サイトとは？

まずは基礎知識として、Googleがサポートするスマートフォンに最適な3つのサイトの構成を整理しておきましょう。

  1. 【Google推奨】レスポンシブウェブデザイン。
    これは、すべてのデバイスに同じURLを用いて、各URLにアクセスするとすべてのデバイスに同じHTMLが送信され、CSSのみを用いて各デバイスでページをどのように表示するか決める方法です。
  2. ユーザーエージェントによるデバイスごとの出し分け。
    これは、すべてのデバイスに同じURLを用いますが、各URLにアクセスすると各デバイスごとに異なるHTMLとCSSが送信される方法です。この出し分けは、ユーザーエージェントでPCかモバイルかを見て判定します。
  3. 独立したURL。
    これは、モバイルとデスクトップで異なるURLを使用します。

同じURLアドレスのスマートフォン専用サイトは、上記の2.にあたります。
尚、1.のサイト構成をしている場合は、アクセス解析イニシアチブのメルマガコラムで紹介された事例が参考になります。
3.の場合は、今回触れるトピックとしては特別な設定は不要ですので参考程度にお読みただければと思います。

利用端末とWebデザイン情報の2軸で利用状況を把握

ユーザーエージェントによるデバイスごとの出し分けを行なっている場合、スマートフォン専用サイトは、人気のコンテンツをのみを提供し、そのほかのコンテンツはデスクトップ版サイトへアクセスするように設計されています。

そのため、アクセス解析ツールを使って"ユーザーの利用端末"と表示した"Webデザイン情報"の2軸で場合分けをし、提供するコンテンツがユーザーのニーズに沿っているか確認することが改善のポイントとなります。

さて、Googleアナリティクスでは、ユーザーの利用端末は標準的な実装方法で計測可能ですが、表示したWebデザイン情報については、PCサイトとスマートフォンサイトのどちらを表示しているかを識別できないため、カスタマイズが必要です。

Webデザイン情報をGoogleアナリティクスに記録する方法

Googleアナリティクスに、ユーザーが表示したWebデザイン情報を記録する方法は3つ考えられます。

  1. カスタム変数の利用
    ページレベルのカスタム変数を使って、表示したWebデザインの情報を記録する方法です。アクセス解析イニシアチブのメルマガコラムでも紹介されている最も効率的な実装方法です。
    例：スマートフォンデザインを表示した場合のカスタム変数
    _gaq.push(['_setCustomVar',1,'Web Design','SmartPhone',3]);
  2. _trackPageview()のカスタマイズ
    _trackPageview()で出力するURLに、表示したWebデザインの情報を記録する方法で、今回ご紹介するカスタム変数に空き枠がないときに検討したい実装方法です。
    アクセスデータを表示したWebデザイン毎に振り分けます。
  3. パラメータの設定
    URLアドレスの末尾にWebデザインを識別するためのパラメータを表示して記録する方法です。比較的実装しやすいのですが、URLアドレスが分散するため検索エンジンからの評価やソーシャルブックマークなどが分散するためおすすめできません。
    導入をする場合はrel="canonical"属性の使用を検討するとよいでしょう。
    例：スマートフォンデザインを表示した場合のパラメータ
    http://www.ayudante.jp/?smartphone

Webデザイン情報を_trackPageview()で記録する

Webデザイン情報を_trackPageview()でGAに記録するには、CSSを切り替えるタイミングで_trackPageview()のカッコ内に、
"/Webデザイン情報/元のURLアドレス/"
となるようにカスタマイズします。

_gaq.push(['_setAccount', 'UA-XXXXX-X']);  _gaq.push(['_trackPageview', ' /smph' + location.pathname]);

このように、CSSを切り替える際に_trackPageview()の値を書き換えることで、利用端末の場合分けが可能となります。
実装後は、Googleアナリティクスの「コンテンツ>>ディレクトリ」を参照すればWebデザイン毎にアクセスデータまとめられていることを確認できます。

まとめ

今回ご紹介した計測方法は、
"カスタム変数は別の用途で使いたいけど、スマートフォンサイトの利用状況も知りたい"
というクライアント様の要件から生まれた実装方法をご紹介しました。

クライアント様は、このカスタマイズを導入したことで、主要ページのみで提供していたスマートフォン専用サイトが有効に機能していることを確認し、提供範囲を徐々に広めることを決定した、とのことです。
Googleアナリティクスのカスタマイズ方法は、サイトの目的や施策の内容により大きく変化します。

これからも、クライアント様の要望に高いレベルで応じられるコンサルタントでありたいと思います。

Original Page: http://www.ayudante.jp/column/2012-08-08/21-31/

Shared from Pocket



Sent from my iPad
投稿者 時刻: