Webサイトの運営していると、「アクセス解析・リスティング・DSP・DMP・CRM等などさまざまなタグをどのようにして管理するのか？」という問題に頭を悩まされます。
タグをExcelで管理して実際にページに埋める作業をWeb運用会社にまかせていると、「このタグいれてくださーい」「◯◯円でーす」「え、高！！」というやりとりが発生してしまって、スピードが落ちてしまったり、そもそもがタグを入れるのが億劫になってしまったりします。
このようなタグマネジメントの問題を解決して、タグマネジメントをカジュアルにしてくるのがGoogleタグマネージャです。そもそもGoogleタグマネージャをどうやって設定するのか？みたいな記事はググれば良記事が沢山でてきますので、ここでは取り上げません。
ここでは、Googleタグマネージャでのデバッグで気をつけたい事に絞ってまとめたいと思います。カジュアルにタグ管理できるからといって、適当にタグを埋めていくとエラーが発生して、痛い目を見るのは火を見るより明らかです。
「あー、やっぱGoogleタグマネージャ便利だわ―。タグマネージャ使わなくていいのは小学生までだわー」って言いながら、裏でエラーを垂れ流しているという悲しい出来ことが起きないように気をつけたい5つの事をまとめてみます。
1. デバッグ機能をキチンと使う
Googleタグマネージャにはデバッグ機能がキチンとついています。これは、設定したタグを本番公開する前に動作を確認できる機能です。
タグマネージャでタグを設定したら、必ずデバッグモードで問題が無いことを確認してから、本番公開する必要があります。
デバッグモードの利用方法は簡単。ページ右上のプレビューボタンを押して、
デバッグボタンを押すだけ。
「デバッグ」と「プレビュー」の違いは「デバッグ用オーバーレイ」が表示されるか、されないか、という違いです。デバッグモード用オーバーレイは、今どのタグが読み込まれているのか？どのタグは読み込まれていないのか？が分かる優れものです。
デバッグモード用オーバーレイがない状態での確認はシンドいので、「デバッグ」で確認したいです。後述するIE8以下を除いて……
2. イベントをキチンと設定して確認
「デバッグ用オーバーレイ」には、Pageview、DOM Ready、Page Loadが表示されています。
ここで、適切なテイミングにタグが発行されているか確認する必要があります。
ちなみに、DOM Ready、Page Loadのタイミングでタグを発行する場合は、ルールで
- DOM Ready => {{event}} 等しい gtm.dom
- Page Load => {{event}} 等しい gtm.load
のように設定します。何もしないとPage Load(GTMタグが読み込まれたタイミング)になります。
3. JavaScriptエラーを確認
モダンブラウザでは、ブラウザに開発者ツールがついておりJavaScriptのエラーを確認できます。設定したタグが読み込まれたことにより、JavaScriptのエラーが出ないか確認する必要があります。
Chromeの場合
4. IE8以前のユーザーは事前準備を
一つ残念なお知らせがあります。IE8以前では、基本的にデバッグモードでが動きません……動くページがあるかも知れませんが、私が確認した限りのページは動きませんでした :(
企業によっては、集中コントロールが実施されていて、ブラウザやバージョンを選べないところもあると思います。
現在利用できるブラウザがIE8以下に限定される場合は、Googleタグマネージャを開始する前に、IEのバージョンを上げれるようにするか、別のブラウザを使えるようする等の事前準備が必要ですね。直前になってバタバタするのは嫌なものですから。
5. デバッグは押し直そう
一番ハマるのがコレです。
- デバッグモードで動作の確認
- 『あれ、なんか違うな』
- タグの修正を実施
- 確認ページのリロード
- 『あれ？なおってない！？』
というのを何度か繰り返しました。デバッグモードになっている時に、元のタグを修正しても、確認しているページに反映されません。
タグを修正したら、必ず「デバッグ」ボタンを再度クリックします。
デバッグモードを終了させる必要はなく、再度「デバッグ」ボタンを押すだけで大丈夫です。「修正」「デバッグ」「押し忘れない」「これ忘れない」です。
タグマネージャは、注意する点も多々ありますが、キチンとデバッグモードがあったり、バージョン管理を自動でやってくれたりと、かけるコストを補って余りあるものを得られます。
積極的にGoogleタグマネージャを活用して、効率的なタグマネジメントを実施して、積極的にチャンレンジを実施できる土壌を整えたいものです。 :)