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


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


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

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

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
PAGE TOP ↑