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

でぶててのWEB録

PPC広告とか!タグマネジメントとか!WEB解析とか!だいたいそこらへん。

タグマネジメントに必要なChrome拡張機能3選とデベロッパーツール

タグマネジメント

f:id:debutete:20140507011218j:plain
タグマネジメントの際に必要な、「タグが実装されているか?動作(発火)しているか?」を簡易的にチェックするChrome拡張機能(アドオン)とデベロッパーツールの活用法(さわり程度ですケド)について。

動的なページで生成されたり、header/footerが共通で設定できたりする場合でも何が起きるかわからないのが、タグマネージャー。設置するメリットが大きい分、デメリットも享受しつつサイトの表示に細心の注意をする必要がある。


<目次>

  1. Tag Assistant
  2. Adwords Remarketing Tag Validation Tool
  3. Ghostery
  4. デベロッパーツール

Tag Assistant(by Google)

f:id:debutete:20140507010859j:plain
Google社純正のChrome拡張機能。Googleタグマネージャ、Googleアドワーズのサービスタグ(CVタグ、リマーケティングタグ)やGoogleアナリティクスの計測タグ、DoubleClickの各サービスタグなどが対象ページ内で正しく動作しているかどうか確認できる。

Tag Assistant (by Google) - Chrome Web Store


Adwords Remarketing Tag Validation Tool(by Google)

f:id:debutete:20140507010917j:plain
Tag Assistantがリリースされる前までのメインで使っていたGoogle社純正のChrome拡張機能。Adwordsリマーケティング(動的リマーケティングを含む)の動作をチェックできる。Tag Assistantと違い、JavaScriptが動くたびに検知しメニューに表示するためリマーケティングの動作確認を二重に行う場合に重宝する。
※アドインが削除されることが決まっているため、早いうちにインストールを!

https://chrome.google.com/webstore/detail/adwords-remarketing-tag-v/iokkmdmobnhjmhbapieilipodaaeohol


Ghostery

f:id:debutete:20140507010939j:plain
Ghostery社のタグチェック用の拡張機能。Googleサービスタグだけでなく、ソーシャルタグなどほぼすべてのサービスタグの動作を確認することができる。しかも、日本語に完・全・対・応!だけでなく、FireFox・Opera・Safariにも対応しているという優れもの。タグチェックだけでなくブロックもできるため、広告ブロックツールとしても利用されている。

Ghostery - Chrome Web Store


デベロッパーツール/開発タブ(F12)

タグマネジメントではソースを開き、要素をチェックすることが多々。開発タブを使って何ができるか?は下記記事を参照を。2010年の記事なので多少違うものもあるけども、根本的なことは変わらないため参考になる。
Google Chrome版Firebug:デベロッパーツール取扱説明書:特集|gihyo.jp … 技術評論社

タグマネジメントでよく使うのは、element・timeline・console・emulationの4つ。(もちろん、他も使うけども…)

ざっくり言うと、
elementでどういった要素があるかを調べ、timelineでJSが動作しているかを確認し、consoleでどういった要素がタグマネジメントツールで使えるかを調査し、emulationでデバイス擬装してチェックする。


※GTMにおけるconsole/timelineの使い方は、アユダンテ社のコラムを参考に。
Googleタグマネージャでタグの動作結果の確認を行う方法|コラム アユダンテ株式会社
Googleタグマネージャで簡単に追加登録できる、一覧に出ていない要素マクロ|コラム アユダンテ株式会社


※デバイス擬装の方法は下記記事を参照に。
Google Chrome のUser Agent 偽装機能は今どこに?(Google Chrome 32.0.1700.76) | TechRacho


タグの稼働チェックは必要不可欠!

タグマネジメントツールを使う上で、チェックは必ず必要。
貼ってあればそれで良し!と済むわけではないので、細心の注意を払い確認する。ホワイトアウトする、ってこともあるので本当に気を付けたほうがいいですよ。

できれば、対象ページに関わるシステム担当者と制作担当者を口説き落として、一緒に作業してもらえることがベストな方法です。



copy right 2012 でぶてて