システム改修をせずにGoogleアナリティクスのeコマーストラッキングを実装する

eコマースのシステム(ショッピングカート)においてGoogleアナリティクスの Eコマーストラッキングを実装する場合、通常はトラッキングする要素に動的な要素を含む、 システムが絡むため、システム改修が必要ということになる。 しかしシステム改修となると開発費もかかるため、なかなか踏み出せない。 またeコマースのシステムによっては商品名や価格を動的に出すなどプログラムのかかわる部分には 一切手を加えられない場合もある。 そこでJavascriptだけで注文番号、商品名、金額などを取得する方法をここでは紹介する。 つまりタグマネージャー一つ設置されていれば、そのカスタムタグ機能で eコマーストラッキングに必要な情報をすべて取得してGoogleに送信するのである。 仮にタグマネージャーが設置されていない場合でも、 システムの動的な部分に手を加えないため最小コストで実装することができる。 またこの方法はGoogleアナリティクスに限らず、他のシステムでのEコマース用の コンバージョントラッキング(どの商品を注文した、購入金額はいくらか)でも応用できる。 なおここで紹介するのは拡張eコマースではなく従来のeコマーストラッキングの実装方法である。 eコマーストラッキングの実装方法のおさらい プラグインの読み込み トラッカーを生成した後(ga(‘create’)した後)で ga(‘require’…

Continue reading →

Googleアナリティクスで一定以上スクロールしたらイベントトラッキング(PC/スマホ別)

条件は下記。 PC、スマホで特定ピクセルを超えてスクロールしたらイベント検出 PCは800ピクセル(> 800) スマホは600ピクセル(> 600) 一度イベント検出したらそのPV中は再検出しない(その後のスクロールは無視) 対象URLは /aaa/ /aaa/sp/ /aaa/index.html /aaa/sp/index.html PCもスマホも対応、index.htmlの有無に両対応 既存のトラッキングコードとセットで設置(HTML内の別箇所ではない) 実装のポイントは、一度scrolledがtrueになったらイベント通知したうえでイベント検出関数を削除すること。 コード いずれのコードもGoogleアナリティクスのトラッキングタグとの前後関係は問わない(どこに設置してもいい)。 IE9以降のみ対応でいいなら // 処理で使った変数や関数がグローバルを汚染しないようにクロージャで (function(){ // ここから本実装 // 特定の階層のみ指定 if(/^\/aaa\/(sp\/)?(index\.html)?/.test(window.location.pathname)){ // このタイミングで実行することで、Googleアナリティクスのトラッキングタグとの前後関係は問わなくなる document.addEventListener(‘DOMCon…

Continue reading →

Googleアナリティクスで特定のドメインに対するリンクのクリックをイベントとして計測

アクセス解析で特定のリンク先ドメインに対するリンクのクリック(誘導)のみコンバージョンとして計測するため、イベントとしてカウントするケースがある。 コード いずれのコードもGoogleアナリティクスのトラッキングタグとの前後関係は問わない(どこに設置してもいい)。 IE9以降のみ対応でいいなら 以前はonclickイベントハンドラで実装していたが、イベントリスナを使ったほうが実装しやすい。 イベントハンドラと違って、もともと設定されているリンククリックアクションに対して純粋に処理を付加するだけだからである。 // 処理で使った変数や関数がグローバルを汚染しないようにクロージャで (function(){ // このタイミングで実行することで、Googleアナリティクスのトラッキングタグとの前後関係は問わなくなる window.addEventListener(‘load’, function(){ // すべての外部リンクを抽出 var a = document.getElementsByTagName(‘a’); for (var i = 0; i < a.length; i++) { // 特定のリンク先ドメインに対するリンクのみ絞り込む if(/^(www\.aaa\.com|www\.bbb\.net|www\.ccc\.jp)/.test(a[i].hostname…

Continue reading →

GoogleアナリティクスでcanonicalをページのURLとして自動で採用する

アクセス解析における計測URLの分散の問題 Webサイトのページビュー計測では、同一ページのPV計測は1つのURLのPVとして集約されることが望ましい。 ところがパラメータ付きURLや「index.html」の有無によって本来同一ページのはずなのにURLが異なり、PV数の評価が分かれてしまうことがある。 あらかじめサイト構成が「1ページ=1URL」を厳格に守ってくれていればいいのだが、必ずしもそういうわけにはいかない。1ページに複数のURLが発生してしまうのである。 SEOでは行われているURL正規化 SEOではその問題を解決するためにlinkタグのrel=”cannonical”属性を使うことでURLの正規化をすることができる。 ところがアクセス計測では「除外パラメータ」や「デフォルトページ」の設定として解析ツールの管理画面などから設定する必要がある。それでもページの表示に影響するパラメータの並び順が入れ替わる場合など対応できない。 実装方法 SEOでは簡単に出来る計測ページURLの正規化を、そのままGoogleアナリティクスの計測ページ(URL)として使う方法をここで紹介する。 canonicalのURLをGoogleアナリティクスのPVとして記録するのである。 ga(‘send’, ‘pageview’)のページとして、正規化URLがあればそれを、なければページのURLを採用…

Continue reading →

Googleアナリティクスで一括イベントトラッキングする便利な実装

特定の要素ID群のエレメントに対して一括でクリックなどのイベントトラッキングを設定する便利な実装。 Googleアナリティクスのイベントの要素にはカテゴリ、アクション、ラベル(オプション)、値(オプション)があるが、 それらを指定するための文字列をアンダースコア区切りの「アクション_ラベル」という形式でHTMLのエレメントIDにしておいて、 配列であらかじめ指定しておいたエレメントIDにのみ ただし配列で指定しておくのは、そのページに含まれないIDであってもよい 一括でイベントトラッキング設定する。 たとえば要素IDが「inquiry_1」の場合、アクション=’inquiry’、ラベル=1として計測される。 コード いずれのコードもGoogleアナリティクスのトラッキングタグとの前後関係は問わない(どこに設置してもいい)。 IE9以降のみ対応でいいなら // 処理で使った変数や関数がグローバルを汚染しないようにクロージャで (function(){ // これらの要素IDに対してのみイベントトラッキングを設定する // ページ内に含まれないIDを含めてもいい var ids = [ ‘inquiry_1’, ‘inquiry_2’, ‘inquiry_3’, ‘reqBrochure_1’, ‘reqBrochure_2’, ‘call_1’, ‘call_…

Continue reading →

JavaScriptでフラグをビットで管理する~複数の状態フラグを少ない容量で管理

状態を管理する、その状態に応じて条件分岐するやり方。 フラグをビットで管理するメリットとケース 特定の条件でのみリマーケティングタグを発火する、イベントをカウントするなど、何らかの処理をすることがある。 「3回目の訪問で、詳細ページを閲覧済みで、未購入のユーザに対して広告配信をしたい」 というケースなど、条件が複雑になると広告配信プラットフォームのタグと管理画面だけでは実現不可能で、JavaScriptとcookieを使う必要がある。 個別の条件を満たしたときにJavaScriptで条件判定をし、フラグを立てる。 その結果をcookieに保存する。 cookieに保存されたフラグの組み合わせを参照して、すべての条件を満たしていたら特定のタグを発火する。 ということで、状態のフラグ(3回目の訪問かどうか、詳細ページを見たことがあるかどうか、未購入かどうか)を管理することになる。 単純に1フラグを1cookie変数とするとcookieで管理する変数の数が多くなってしまう。 そこで1個の変数でこれらの状態をまとめて管理する方法がビットによる管理である。 なおこの考え方はJavaScriptに限らずあらゆるプログラム言語で実装が可能。 管理するフラグが多く、メモリ消費や発生するパケットを小さくする必要があるときに重要となる。 ビット ビットは0または1の2値を表す情報の単位 それを8個つな…

Continue reading →

たまにJavaScriptでタグ実装する人のためのJavaScriptメモ

Javascript固有の技術的事情。 Javascriptからちょっと離れていたり他の言語使っていたりすると忘れてしまうポイントをまとめておく。 まあ自分のための備忘録でもある。 変数の型 プリミティブ型 数値型 文字列型 論理型 null型 undefined型 オブジェクト型 配列 連想配列 日付 : 値渡しと参照渡し プリミティブ型は値渡し、オブジェクト型は参照渡し 配列 var arrX = [‘test1’, ‘test2’, ‘hoge’]; // こういう使い方も便利 var arrX = arrX || []; arrX.push(‘test1’); arrX.push(‘test2’); 走査 配列の走査はArray.prototype.lengthで。 長さをその都度参照するのではなく、一旦変数に値として渡してから var arrX = [‘test1’, ‘test2’, ‘hoge’]; for (var i = 0, imax = arrX.length; i < imax; i=(i+1)|0) { alert(arrX[i]); } 連想配列(オブジェクトのプロパティ) var objX = { ‘key1’: ‘value1’, ‘key2’: ‘value2’, }; // こういう記法もあり var objX = objX || {}; …

Continue reading →

アクセス解析タグ、広告のコンバージョン/リマーケティングタグの設置検証方法

webページにアクセス解析ツール(Googleアナリティクスなど)のタグや広告のタグ(コンバージョンタグ、リマーケティングタグ)など、さまざまなタグを設置することがある。この記事ではそれらにタグが正しく設置されたかどうか、正しく呼び出されているかどうかを確認する手順を紹介する。 見るべきポイント どのページに どんな条件で 発火するのか? 確認すべきこと その条件で発火すること それ以外の条件で発火しないこと すべてのシナリオを網羅する必要がある PC/モバイル 会員登録済み/非登録 遷移元によってコンテンツ出し分けしている場合は遷移元別 特定の条件で発火しないことがあるのか? どうやって確認するか ツールの画面上で確認 パケットの確認 ツールの画面上で確認 GAのタグ→リアルタイム(簡単) 広告のコンバージョンタグ 広告に接触(ビュー/クリック)したうえで、コンバージョンする必要がある カウントが管理画面に反映されるまでのタイムラグ ツールの画面上で確認するのが理想だが、結構面倒で時間がかかる 実際には発火する条件を実行し、パケット確認するのが現実的。 最低限考えられるシナリオに限定して パケットの確認 計測サーバにビーコンのパケットが送信されているかどうかを確認 パケットが送信されているからといって即管理画面の数字に結び付くわけではないが、これを満たせばほとんどOK (タグ設置…

Continue reading →