Googleタグマネージャを使ってみたいので、ポイントを教えてください

2人とも、タグのマネージメントに困っているから「Googleタグマネージャ」が気になるみたいだね。では今日は、「Googleタグマネージャ」について説明しよう。

ところで、「Googleタグマネージャ」とは何だろうか？

それは当たっているね。ではもう少し突っ込んで聞くけど、“どんなタグでも入れていい”んだろうか？　たとえばHTMLタグ。あるいは自作のJavaScriptとかも大丈夫かな？

それは、半分だけ正解だ。まず誤解を恐れずに言い切ってしまえば、Googleタグマネージャは、基本的に解析関連のタグを管理するためにある。特に、初心者の場合、それ以外は管理しないほうがいい。

基本的に、画面デザインに関わるようなjQueryなどは入れちゃダメだ。

キーワードは「非同期」だ。順番に説明していくけど、「非同期」でピンとこなかった人は、「タグマネージャでは解析関連タグだけまとめる！」というスタンスが安全だろう。

次に、なぜGoogleタグマネージャは導入が難しく感じるんだと思う？

初めて聞く用語も多いから、Googleタグマネージャを利用するには、まず概念をちゃんと理解する必要がある。以下の図を見てほしい

基本的な動きとしては、図の一番左側の見出しを、順に覚えておくと良いよ。

1. アカウントを作る
   ↓
2. コンテナを作る
   ↓
3. タグを作る
   ↓
4. そのタグと配信ルールを作って結び付ける
   ↓
5. Webサイトにタグを貼り付ける

そのとおり。Googleタグマネージャは、コンテナの各バージョンを作って保存できる。なぜかというと、もし万が一トラブルが発生したら、すぐに前のバージョンに戻したいだろう？　だから、最初からそういった履歴（バージョン）管理の考え方が採用されているんだ。

ところで、Googleタグマネージャには大きな注意点がある。それは各タグが「非同期」で動くということだ。

そのとおり。普通、JavaScriptやタグというのは、貼り付けたらページ上部から実行されるだろう？　1つのタグがJavaScriptが動作している間、ほかのことはできないんだ。

だけど、Googleタグマネージャを使うと、バラバラに実行されるから、順番が関係なくなっちゃうんだ。

お察しのとおり、いつ実行されるかわからないから、jQueryでスライダー表示するはずが、全然表示されないなんてことが起こる。

だから、詳しくわからないうちは「Googleタグマネージャは解析タグを入れるだけ」と割り切ったほうがいいんだ。

あと、もう1つ注意点がある。それは、それぞれのタグが独立しているから、各タグ間の関連性はまったくないということだ。

今までのコードをそのまま貼り付けてもうまくいかないことが多いんだ。

たとえば、今まで使っていたコードは、上から順番に動いていたから、うまくいっていたかもしれない。それをGoogleタグマネージャで複数に分割してしまうと、各タグがバラバラに動くし、そのなかで使っていた値（変数）も引き継がれないので、そのままで動かなくなることがあるんだ。

Googleタグマネージャをある程度使いこなそうと思うと、どうしてもJavaScriptなどの知識が必要になる。なので、ここからの作業はプログラマに任せたほうが良いかもしれない。

でも概念は知っていたほうが良いから、説明しておこう。

キーになるのは「マクロ」機能だ。

マクロは、必ずしもGoogleタグマネージャに必須ではない。しかし、あるとすごく便利だ。マクロを一言でいえば何か処理をして、結果を返してくれる機能だ。Googleが用意しているマクロもあるし、自分で作ることもできる。

たとえば、「{UserID}」という名前の自作マクロを作るとする。このマクロは、実行すると「ユーザーのログインIDを返してくれるというものだ。中身はJavaScriptで自分で作る。

そういうことだ。一番オーソドックスなマクロは「PDFがどれだけダウンロードされたか計測する」マクロだろう。これは「PDFがクリックされた」というイベントが発生したときに、Googleタグマネージャが最初から用意している「自動イベント変数マクロ」でうまく実装できる。

それでもJavaScriptの知識がないとわかりづらいけどね。