Googleアナリティクスでは通常「出来ない」や「管理やカスタムがややこしい」とされている設定もたった一つのタグを全てのページに入れるだけで解決する手段があったとしたら?
今回は意外と知られていないGoogleタグマネージャを活用したGoogleアナリティクスの裏ワザを5つ厳選して紹介してみます。
Googleアナリティクス×Googleタグマネージャでできる裏ワザ5選
- 1.アナリティクスやアドワーズのタグを一元管理して、サイト運用効率UP
- 2.自由自在にページ毎のタグの出し分けで埋め込み忘れリスク低減!
- 3.面倒なクリック計測(イベントトラッキング)管理も完全自動化
- 4.FacebookもTwitterも!SNS関連の計測だってカスタムいらず
- 5.スクロールを自動取得して、ユーザーがどこまで読んだか完全把握!
- ウェブサイト毎に作成する「コンテナ」を作成
- 規約に同意してコードを取得。
このコンテナコードを全ページに入れて、その中に複数のタグを設定。条件に合わせて使ったり使わなかったりする感じです。
まずは基本のアナリティクスタグから。「ドラフトコンテナ>サマリー」画面右上のをクリックして設定スタート
- タグ名を「Google アナリティクスタグ」と設定
- タグの種類をそのままズバリ「Google アナリティクス」で選択
- ウェブ プロパティIDを「UA-XXXXXXXX-Y」の形で挿入
- ディスプレイ広告主向けのサポートを追加はチェック
- トラッキングタイプは「ページビュー」をとりあえず設定
まずはこれでOK。
直接HTMLを入力できる「カスタムHTML」などを使ってコンテナの中に複数のタグを格納していけば、様々なタグを完全なワンタグで管理でき、タグの削除や変更にも即時対応可能にできます。
「ドラフトコンテナ>サマリー」画面右上のをクリックして設定スタート
- ルール名を「segment_lp」など分かりやすいもので設定
- 条件を「{{url}}」「正規表現に一致」「^/lp/(.*)」に設定
- 保存して対象のタグ表示ルールに適用すればOK
ドリームウィーバーで特殊なテンプレート設計をしたり、PHPなどで条件分岐を設計するよりもはるかに早いですし、何より後からタグの編集・追加や削除がしやすいのでオススメです。
※もちろんページを指定することも可能ですし、正規表現ではなく「含む」として「/lp/」と表記にしても大丈夫です(被るディレクトリ名が存在しない場合)
「ドラフトコンテナ>サマリー」画面右上のをクリックしてタグ追加画面へ移動
- タグ名=クリック計測などと名づけ、タグの種類を「イベントリスナー>クリックリスナー」で設定
- 「タグ配信ルール」で条件を「すべてのページ({{url}}:正規表現に一致:[.*])」で設定
- そのまま一旦保存
画面右上のをクリックして新しいマクロ作成画面へ
- マクロ名を「自動クリック計測マクロ」などと名づけ、マクロタイプを「自動イベント変数」に
- 変数タイプを「要素」としておく
一旦サマリー画面に戻って、画面右上のをクリックし、新しいルールを作成
- ルール名を「クリックイベント自動計測」などに設定
- 条件1を「{{event}}:等しい:gtm.click」と記入
- 条件2を「自動クリック計測マクロ:正規表現に一致:[.*]で設定
ちょっとややこしいですが、再度サマリー画面に戻って、画面右上のをクリックし、新しい計測タグを作成。先ほどのルールを設定しておきます。
- タグの種類:Google アナリティクス
- ウェブ プロパティID:(お使いのUAID=[UA=XXXXXXX-Y])
- トラッキング タイプ:イベント
- 配信ルール:「クリックイベント自動計測(03で作成したルール)」
これで設定は完了。
複数のイベントを併用して活用したり、ページによって適用の幅を変えたり、フォームや画像のクリックだけを取ったりなど応用の幅は広いので、また別途特集的に書きたいですね。
■備考:自動クリック計測マクロの要素設定について
クリックリスナー | リンククリックリスナー | フォーム送信リスナー | |
---|---|---|---|
要素 | クリックされた要素のDOM (リンクの場合はリンクURL(※)) |
クリックされたリンクのリンクURL | 送信されたformのDOM |
要素クラス | クリックされた要素のclass | クリックされたリンクのclass | 送信されたformのclass |
要素ID | クリックされた要素のid | クリックされたリンクのid | 送信されたformのid |
要素ターゲット | – | クリックされたリンクのtarget (_blankなど) |
送信されたformのtarget (_blankなど) |
要素URL | 画像の場合:画像のURL(※) リンクの場合:リンクURL(※) |
クリックされたリンクURL | 送信されたformのaction |
「ドラフトコンテナ>サマリー」画面右上のをクリックしてタグ追加画面へ移動
- タグ名=ソーシャル計測などと名づけ、タグの種類を「Google アナリティクス」で設定
- ウェブ プロパティIDに、アナリティクスの通常タグに含まれているID(「UA-XXXXXXXX-Y」の形)をそのまま記載
- 「データレイヤーを使用」にチェック
- 配信ルールを「すべてのページ({{url}}:正規表現に一致:[.*])」で設定して保存
上記手順を踏むことで、既に発行済のワンタグにソーシャルトラッキング機能が追加された。ということになります。
いやー、便利なツールですねぇ。
「ドラフトコンテナ>サマリー」画面右上のをクリックしてタグ追加画面へ移動
- タグ名=ページスクロール計測リスナーなどと名づけ、タグの種類を「イベントリスナー>タイマーリスナー」で設定
- 「タグ配信ルール」で条件を「すべてのページ({{url}}:正規表現に一致:[.*])」で設定
- イベント名を「gtm.timer」に設定
- 間隔を「1000」(=1秒)で設定 ※ここは任意です
- 制限は特に設定なしにしてそのまま一旦保存します
画面右上のをクリックして新しいマクロ作成画面へ
- マクロ名を「スクロール計測マクロ」などと名づけ、マクロタイプを「カスタムjavascript」に
- 以下のjavascriptコードを記入して保存
■スクロール計測マクロ用javascript
function(){ var d = document; var b = d.body; var nowScrollTop = 0; var scrollHeight = d.documentElement.scrollTop || b.scrollTop; var pageHeight = Math.max.apply( null, [b.clientHeight , b.scrollHeight, d.documentElement.scrollHeight, d.documentElement.clientHeight] ); var viewHeight = d.documentElement.clientHeight || b.clientHeight; if(pageHeight <= viewHeight){ nowScrollTop = 100; }else{ nowScrollTop = Math.round(((scrollHeight + viewHeight) / pageHeight) *10) * 10; switch(nowScrollTop){ case 10: nowScrollTop = 0; break; case 30: nowScrollTop = 20; break; case 50: nowScrollTop = 40; break; case 70: nowScrollTop = 60; break; case 90: nowScrollTop = 80; break; } } return nowScrollTop; }
一旦サマリー画面に戻って、画面右上のをクリックし、新しいルールを作成
- ルール名を「スクロール自動計測」などに設定
- 条件1を「{{event}}:等しい:gtm.timer」と記入
- 条件2を「自動スクロール計測マクロ:正規表現に一致:[.*]で設定
再度サマリー画面に戻って、画面右上のをクリックし、新しい計測タグを作成。以下の通りルールを設定して完成です。
- タグの種類:Google アナリティクス
- ウェブ プロパティID:(お使いのUAID=[UA=XXXXXXX-Y])
- トラッキング タイプ:イベント
- カテゴリ:scroll、操作:downで設定 ※ここは任意の文字列でOK
- 配信ルール:「スクロール自動計測(03で作成したルール)」
かなりややこしいですが、一回設定してしまえばこのルールを適用してあげるだけで全てのプロパティに応用が可能。
ブログメディアなどの読み物系コンテンツには必須の項目となりますので、ぜひお試しください。
参考サイト:Googleタグマネージャに新しく追加されたマクロ「カスタムJavaScript」|コラム アユダンテ株式会社
(執筆/編集 中村健太)