え！？まだGoogleタグマネージャーを使ってないの？

Googleタグマネージャーはもう使ってますか！？

超絶に便利なので、使ってないなんてもったいない！

今回の記事ではGoogleタグマネージャーを簡単に説明します。

クリックでジャンプ

1 Googleタグマネージャーとは
- 1.1 タグに関するあるある
2 Googleタグマネージャーでできること
3 使用手順
4 Googleタグマネージャーを使ってみた感想
5 稼働中のサイトにタグマネージャーを導入する場合の問題点
- 5.1 参考記事(SNSへの投稿ボタンやウェブテスト機能は配信できない)

Googleタグマネージャーとは

Googleタグマネージャーとは、タグ運用の負荷を軽減するさまざまな優れたツールを提供するサービスです。

タグというのは、アクセス解析用やアドワーズのJavascriptタグだったり、TwitterやFacebookなどのプラグインを動作させるのに必要なタグだったり、iframeタグだったり、主に外部サービスを利用する際にサイトのHTML内に記述(コピペ)する必要のあるタグを指します。

通常、HTML内のbody開始タグの直下や、body終了タグの直前に記述することが多いと思いますが、アレですよアレ。

例えば、Google Analyticsの解析用タグであれば、全ページに共通でこんな感じのタグを設置しますよね。

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');
</script>

こういったタグは増えれば増えるほど、管理しづらくなります。

タグに関するあるある

設置数が増え、何が何のタグなのか分からなくなる
タグを削除する場合にどこからどこまで消したらいいのか分からない
Webページが正常に動作しなくなり、どのタグの設置や変更が原因で起きているのか調査が難しい
これ貼っておいてねと、ディレクターやプランナーの人からタグの設置・変更を頻繁に依頼されてもううんざりだ
開発環境と本番環境両方で動作するか検証しないといけないし面倒
タグのせいで今日も定時に帰れません

これらのあるあるを解決してくれるのがGoogleタグマネージャーなんです。

管理画面でタグを一元管理できちゃいます！

Googleタグマネージャーでできること

HTMLに設置するタグを書かずにGoogleタグマネージャーの管理画面から追加や変更が可能
アカウント機能で管理者権限を個別にタグを設定できる
アカウント機能で管理者権限、閲覧権限のみなどの設定が可能
コンテナ機能で管理するサイトを複数登録できる
Googleのアクセス解析やアドワーズなどはタグの設定が楽チン
ヒートマップツールの「crazyegg」などGoogle以外のサービスも連携していて、タグの設定が楽チン
別に連携してなくてもタグを管理画面に貼り付けるのはホント楽チンなんだから！
開発環境のURLで配信、本番環境のURLで配信、特定のページのみタグを動作などの条件設定(トリガー)が可能
デバッグモードでタグが動作するかをテストした後で「公開」できる
Gitのようにバージョン管理されていて、過去のバージョンに戻ったりすることが可能
ユーザーごとに作業ログが残り、誰の作業でタグが設置されたかも確認できる
設定した内容を丸ごとエクスポートしたり、インポートできる
非エンジニアでもタグを設定できるので、エンジニアがタグを設置しなくてもいいじゃんか！

家に帰れる系エンジニアになれる予感。

使用手順

詳しい使い方は、当ブログ以外で詳しく丁寧にまとめられているので、そちらを参考にしてください。

流れだけ簡単に説明すると…

1. GoogleアカウントでGoogleタグマネージャーにログイン

2. アカウント及びコンテナを作成

会社名、グループ名などでアカウントを作成します。

続いてはコンテナを作成します。

コンテナとは作動させるタグの一覧を格納する箱のようなものと思ってください。

3. Googleタグマネージャーを動作させるタグをサイトに設置

ここまで進むと、下記のようなタグマネージャ用のタグが発行されます。

タグマネージャ用のタグ例

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5LQH3X" 
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 
j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src= 
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 
})(window,document,'script','dataLayer','GTM-XXXXXX');</script> 
<!-- End Google Tag Manager -->

ちょっと長ったらしいですが、こればっかりはbody開始タグの直下に全ページ貼っておいてください。Googleさん、このタグもっと短く美しくしてください！

うまいこと使えば、あなたのwebサイトに設置する唯一のscriptタグとなります。

4. タグマネージャーでイベントトラッキングも設置可能

Google Analyticsのイベントトラッキングだって、タグマネージャーで制御することが可能です。

イベントトラッキング用のタグなどを仕込まなくていいので、HTMLをパッと見られてもどんな計測をしているかライバルには分かりません。

通常はこんな感じでHTMLタグ内に書きますよね↓

ga('send', 'event', 'Videos', 'play', 'Fall Campaign');

Googleタグマネージャーを使ってみた感想

<scrip>…・</script>のように記述する、Googleや他社のタグがHTMLの中で散らばりがちだったんですけど、タグマネージャーで管理することで、管理画面でタグを容易に確認可能となり、HTMLやプログラムがすっきりします。

管理画面で設定して、コンテナを保存後、「公開」とすればすぐにタグが作動するようになります。

HTMLソースを書き換える場合に必要な以下のような手順が、タグマネージャーを導入することで省略できます。

エンジニアのローカル環境
開発環境
ステージング環境
ようやく本番反映

超絶的に画期的なのです。

ディレクターやプランナーの人にもタグの設定は自身でどんどんやってもらいましょう！

稼働中のサイトにタグマネージャーを導入する場合の問題点

いいことづくめにも思えるタグマネージャーなんですけど、すでに稼動しているwebサイトに導入する場合に問題となる点があります。

既存のイベントトラッキングの移行をどうするか(しかもその数が膨大だったり)
アクセス解析タグをプログラムで分岐させて様々な出力をしている場合その調整が大変そう(仮装URLとかeコマースとか…)
この辺は調整が完了しないと、ユニバーサルアナリティクスをタグマネージャーに一括移行できない。
eコマーストラッキングの設定方法が難しそう(僕は現在勉強中)
Google Adwordsのコンバージョントラッキングタグの動作をどのように設定するか。不可能？
同期処理が必要なタグ(Googleアナリティクスのウェブテスト機能など)はタグマネージャーで使用不可能
導入する上で、多少の学習コストがかかる

移行作業はちょっと骨が折れるかもしれませんが、その後の運用を考えると導入する方がメリットは多いです。