読者です 読者をやめる 読者になる 読者になる

kkana's blog

新米コーダーの忘れそうなことメモ

google tag managerをすこしだけ触ったときのメモ

無料で簡単に使用できるタグ管理システム
https://www.google.com/intl/ja/tagmanager/

googleanalyticsのアカウントIDとセットでページ内のイベントを計測したときのメモです。
少しだけ使ってみてこんな感じかな、、という程度のメモ。

ヘルプ https://support.google.com/analytics/answer/6166898

サイドナビに出ているもの

  • タグ(いつ、どのサービスで、何を計測し、どう表示させるかをまとめた情報)
  • トリガー(自分で定義できる 計測したいタイミング)
  • 変数(自分で定義できる 計測したいいろいろなこと)
  • フォルダ(定義したラベルや変数、トリガーが一覧で見れる)

変数

よく使えそうなものは組み込み変数として最初からあるのでそれにチェックをいれて使う。
今回はページ内にjsで別窓が開く要素が複数ある場合に、どのボタンを押して開いたか知りたかったので

  • Click ID(クリックした要素のID)
  • Click URL(クリックした要素のhref属性)
  • Click Classes(クリックした要素のclass)

などにチェックを入れました。

ユーザー定義変数もあるのでそこで定義しても。

トリガー

基本的には設定のウィンドウの手順にそえばなんの問題もない・・・(すごい)
ので書くことなし
一応わからなくなってしまった時のため
https://support.google.com/tagmanager/answer/6106961

タグをつくる

変数とトリガーで 計測したいタイミングと計測したいものを定義できたので タグに登録していく。 https://support.google.com/analytics/answer/6164470 ヘルプが分かりやすい。

連携したいgoogleanalyticsのアカウントIDを登録。 f:id:kkana:20151221104139j:plain

ページ内の特定のclassのついた要素をクリックしたときどのボタンを押したかの計測用用のタグを登録。 f:id:kkana:20151221104404j:plain

という感じで登録。これも特に説明なしでも大丈夫そう。

プレビューで確認

メニューの管理からGoogle タグマネージャをインストールというところに書いてあるコードを
ラッキングしたいページに貼り付ける。
コンテナ画面に戻って、右上のアイコンからプレビューモードを選択でプレビューモードで確認できるようになる。

f:id:kkana:20151221211152j:plain 計測を仕込んだ箇所が押されてちゃんと動く場合は Tags Fired On This Page:というところにどのタグが計測されているか表示されるのでそれで確認。 f:id:kkana:20151221211242j:plain

googleanalyticsのリアルタイムイベントで見るとこんな感じで表示される。 f:id:kkana:20151221110419j:plain

OKだったら公開する。

使ってみて思ったこと

  • 楽に登録できて便利。バージョン情報や履歴もあるので使いやすい。
  • 変数の定義をいろいろいじったら、もっと分かりやすいラベルの表示ができそう。
  • イベントを仕込む際はclass名などが起点にしやすいのでcssの設計段階でトラッキングしたい要素の名前も併せて設計する必要がありそう。
  • (教えてもらった)プレビューモードはたまにタグが最新状態でないまま行われてしまうことがあるので、 公開前のサイトやテスト環境であれば公開状態にしてからプレビューしたほうがいいそう。