ビューポートを調べて書き換えてみました。
アユダンテさんのエントリーに影響されて、レスポンシブに対応してトラッキングコードを書き換える方法を考えてみました。
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]); }
if(gamen.width<520){ _gaq.push(['_trackPageview']); }else{ _gaq.push(['_trackPageview', ' /smph' + location.pathname]); }
なお、以前の私の記事では、画面サイズでレスポンシブを認識させた所、今はタブレットでも高解像度のものがある、とご指摘を受けました。ですので、今回はメディアクエリーでも採用されています、ビューポートから値を取得し、Googleアナリティクスで切替させる処理にしました。
まあ、これですとページ表示のたびに条件分岐するので、ちょっとスマートじゃないなあ、とは思いますが、ビューポートの改修もしたかったので。
・ ・ ・ ・ ・
＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です
レスポンシブなトラッキング。