【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

Profile


Yoshihiko Yoshida
ブロガー兼ユーチューバー兼Googleマップトラベラー。個人事業主でネット業界のお仕事24年目です。40代で2児の父。「マツコの知らない世界」「王様のブランチ」などGoogleマップ案内人としてテレビ出演多数。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

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

PAGE TOP ↑