*

【Googleアナリティクス】レスポンシブに_trackPageviewを切り替える


LINE facebook twitter URLコピー
B! pocket Evernote 楽天



ビューポートを調べて書き換えてみました。


アユダンテさんのエントリーに影響されて、レスポンシブに対応してトラッキングコードを書き換える方法を考えてみました。


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


レスポンシブWebデザインでは、CSSの機能であるメディアクエリーという機能を使い、サイズによってレスポンシブに読み込むCSSを変え、デザインを可変させています。


以下では、最大ウインドウサイズが1024px以下の場合に tablet.css を読み込む、となります。

@import url(“tablet.css”) screen and (max-width: 1024px)


さて、Googleアナリティクスのトラッキングコード内で、_trackPageviewを切り替えるには、Javascriptを使うと良いでしょう。トラッキングコードの _gaq.push(['_trackPageview']); 部分を以下に置き換えると分岐するはずです。

var gamen = document.viewport.getDimensions();
if(gamen.width<520){
_gaq.push(['_trackPageview']);
}else{
_gaq.push(['_trackPageview', ' /smph' + location.pathname]);
}


なお、以前の私の記事では、画面サイズでレスポンシブを認識させた所、今はタブレットでも高解像度のものがある、とご指摘を受けました。ですので、今回はメディアクエリーでも採用されています、ビューポートから値を取得し、Googleアナリティクスで切替させる処理にしました。


まあ、これですとページ表示のたびに条件分岐するので、ちょっとスマートじゃないなあ、とは思いますが、ビューポートの改修もしたかったので。
 

「レスポンシブなトラッキング。」

  • このエントリーをはてなブックマークに追加
  • Pocket

Profile



Yoshihiko Yoshida
メディア運営業界23年目。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑