【最初が肝心】Google Tag Managerでタグ管理すべき5つの理由

本記事の対象者

マーケター、ブログ運営者、ライターetc
※特に事業会社のマーケターの方！最初にGTM入れておくことはエンジニア工数を必要とせず、マーケ主体で素早くPDCAを回すために本当に大事です！

本記事の目的

GTMでタグ管理することの重要性を事前に理解することで、今後の効率的な分析体制を整えれることを目指します。
個人的に効率良くPDCA回すならGTMは必須も必須で、GTM入れてない環境なんて信じられないのですが、なんと上場企業のコーポレートサイトの30%しか入っていないと・・・
※2018年11月現在
この事実に驚愕したので、このような記事を書いているということもあります。
https://sem-technology.info/ja/tagmanager-usages/2018-11

そしてGTMを仕組みから理解することで、エンジニアにタグ設置を依頼する際のコミュニケーションがスムーズにできるようになることを目的としています。
※あくまでも私の経験上ですが、GAのタグを直説ページに置いている時など、なぜGTMに変更する必要があるのかマーケターとして説明責任がある場合が多々あります！

そもそも「タグ」って何？

Webマーケターの方なら「タグ」という言葉は既にお馴染みだと思います。
アクセス解析や広告効果を測定するために用いられる技術ですが、なぜ「タグ」が必要で、「タグ」がどのような役割を担っているのか理解されている方は多くはないと思います。
そこでまずアクセス解析を例に挙げて「タグ」とはどのようなものか説明します。

あなたがあるWebサイトにアクセスしたとします。
そうするとWebブラウザからWebサーバーにコンテンツが要求され、WebサーバーはWebブラウザにHTMLを送信した履歴をログファイルに出力します。このログファイルを「アクセスログ」と呼び、これを集計すれば「アクセス解析」ができます。
以下がその図になります。

しかし上記のアクセス解析方法だと２点問題が生じます。

①完全なローデータを扱うので、データクレンジングや集計に時間がかかる。
②基本的にエンジニアの助けが必要不可欠になり、コミュニケーションコストがかかる。

上記のような理由から、HTMLの特性を利用して、Webブラウザがアクセス解析を行うシステムに情報を送信する方法が生まれたのです。
以下がその図になります。

このようにHTMLタグを利用して、Webサーバーとは別のログ集計サーバーに履歴を送信してアクセス解析を行う方法を「タグ方式」と呼びます。

つまり「タグ」とは「外部のサービスを呼び出すためのコード」のことを指します。

GTMの仕組み（タグマネージャツールとは？）

※GTMのアカウント開設方法や基本的な使用方法は以下のリンクで確認ください。
https://ferret-plus.com/1745

ここからはGoogle Tag Managerを例にタグマネージャーの仕組みを解説していきます。
上記で説明したように「タグ」はアクセス解析や広告効果測定に必須の技術となりました。
しかしその便利さ故にHTML上にタグが増え続け、管理が煩雑になってしまうという問題がありました。
それを解決したのが、GTMを含むタグマネージャーツールになります。

【タグマネージャーツールの概要】
一言でまとめると、外部Javascriptを用意して、複数タグを管理するツールになります。
今まではタグはすべて直接ページに記述する必要がありましたが、この方法だと直接ページにタグを記述する必要がないので、タグに変更があった場合でもHTMLファイルを修正する必要がなく、マーケターがGTM上からタグの削除をすることができます。
もちろんタグを追加する必要が出た際も、マーケターがGTM上で簡単にタグを追加することができます。
なので都度エンジニアとコミュニケーションをする必要がなく、実際にタグを運用するマーケターが主体となってタグを管理することができ、PDCAを素早く回すことができるなどのメリットがあります。
以下に処理の流れをまとめているので、どのような順番で処理が走るのかイメージ頂ければと思います。

【処理の流れ】
①Webブラウザがサーバーにコンテンツを要求する
②Webサーバーが、Googleタグマネージャーのタグの挿入されたWebページを返す
③Webブラウザが、Googleタグマネージャー本体（gtm.js）を要求する
④Googleタグマネージャーが、gtm.jsをWebブラウザに返す
⑤Webブラウザがgtm.jsを実行し、各サービスに対してデータ送信を行う

GTMでタグ管理すべき5つの理由

ここまでは「タグ」がそもそもどんなもので、タグマネージャーツールがどのように作動しているのか確認してきましたが、以下本題のタグマネージャーツールを導入するメリットについて言及していきますー！（これを言えば上司やエンジニアへの説明責任は果たせるかと！笑）

①Google Analyticsとの相性が良い

事実上アクセス解析ツールの標準であるGAとの親和性が非常に高いです。
GAで実装できる、クリック計測やイベント計測をGTM上で簡単に実装することができます。
特にクリック計測やイベント計測はそのWebサイトの目標（CVポイント）になっていることが多く、最も柔軟にPDCAを回すべき部分になるので超重要です！
しかしGA上だけで行うにはGAのイベントトラッキングコードをHTML上に記述する必要があり、都度エンジニアの手を借りることになります。
（例）クリックイベントのトラッキングコードの設置方法
https://qiita.com/miupink/items/6e7ed490b2fb93effb0c
実装自体は難しいものではありません。
しかし計測したいクリック箇所が10箇所あるとどうでしょう？笑
10箇所で本当に足りていますかー？後々、あと3箇所計測したかったー！ってなりませんか？
追加の度にエンジニアの工数を確保し、ロードマップを引き、といったコミュニケーションが発生します。それだけで1週間以上は必要です。
（開発を外注してたらもっと時間かかります・・・）
GAのイベントを柔軟に設定し、マーケターだけで効率よくPDCAを回すためにGTMは必須のツールとも言えます！

②ABテストツール（Google Optimize等）やヒートマップツール（User Heat）をすぐ実装できる！

タイトルのまんまなのですが、LPやサイト解析をがっつりやっていこうとすると、
上記のようなツールを使う機会も非常に多くなります！
上記のようなツールってどうやって実装するかと言いますと、
ぜーんぶタグをソースにぶちこむ必要があります！
毎回エンジニアや外部ベンダーに頼めないですよね・・・

③マーケターだけで環境のテストができる&前環境に簡単に戻れる

これ本当に重要です！
実際の現場でGAの直タグを入れる場合で考えてみてください。
「タグ入れといてー！」とエンジニアや外部ベンダーさんに渡せばいいというわけでなく、
どうやって誰がテストするかを決めなければなりません・・・
非エンジニアにとってテストという概念はあまりないのですが、絶対突っ込まれます！
「管理画面の権限渡すからテストしててくれー！」とも言えないので、
少なからずテストをするためだけに結構なコミュニケーションを必要とします。
しかしGTMだとプレビューモードという自分のローカルブラウザだけでタグを発火できるモードがあり、本番環境に反映させる前に複雑な設定なしにブラウザのみでタグのテストができます！！！！！！！
マーケターだけでさくっと「タグ設置→テスト→本番環境反映」までできるのは超便利。
またバージョン管理機能もあるので、新しいタグを入れた際、他のタグに不具合が起きたとしても以前うまく作動していたバージョンに簡単に戻すことができます！
webマーケターの方だったらお分かりだと思うのですが、タグってどんどん増えるんです・・・
管理が煩雑になり、どのタグが正常に動いているのかわからなくなるので、
このバージョン管理機能も本当に神機能です！
プレビューモードとバージョン管理機能の使い方は下記を参考にどうぞ！
https://ferret-plus.com/10466

④タグの実装と管理が簡単

またまた、もしGAの直タグを入れた場合ですが、計測したい全ページに設定する必要があります！
最悪一回限りエンジニアに依頼して、一気に設置してもらう分には仕方ないと考えても、
その全タグを誰が管理するのでしょうー？
タグが埋め込まれているページのソースコードが変更されることがあったとして、
エンジニアは都度マーケターに声をかけてくれるでしょうか・・・
そしてまた1個1個タグをテストするのでしょうか・・・
不可能です・・・笑
またイベント計測タグは条件などを細かくエンジニアに依頼する必要があり、
都度コミュニケーションが発生します。
しかしGTMならgtm.jsコードを入れるだけで上記のことはすべて解決されます！
ドメイン下であれば、GTMで自由に発火の条件を指定できますし、先ほどあげたように勝手にバージョン管理をしてくれますし、テストもローカル環境で可能です！

⑤サイトが重くならない！

これはGTMでタグを実装すると、タグを強制的に非同期にするためです！
すごくわかりやすいので、下記のページの言葉を引用させていただくと、
https://webtan.impress.co.jp/e/2015/01/05/18965

同期タグではJavaScriptが読み込まれたら処理が開始され、その処理が完了するまでページの読み込みは止まります。そのため、同期タグでは「JavaScriptが読み込まれたタイミングで確実に処理を開始」することができますが、その半面、ページの表示が遅くなってしまうなどの影響が出ます。

逆に、非同期タグの場合はJavaScriptが読み込まれてもそのタイミングでは必ずしも処理を開始しない代わりに、同期タグのようにページの読み込みを止めてしまうことがありません。

つまりJSが読み込まれたタイミングでは処理をせず、後ほど処理を行うためページ表示速度に寄与するということです。
以下の実例では、ブラウザによりますが1.5秒以上は表示速度が早くなったそうです。
https://ja.advertisercommunity.com/t5/広告の効果計測/タグマネージャーはページ表示の高速化に-どれぐらい役に立ちますか/td-p/9187