フロントエンド中心に担当している津田(id:YTsuda)です。夏季休暇が終わってしまい、来年の夏休みを待ちわびている29歳です。

弊社では先日 GoogleTagManager (以下GTM) を導入しました。これがエンジニアの負担を軽減してくれるすばらしいプロダクトだったので、皆様にもご紹介します。

連載第一回はGTMの概要と導入メリットについてです。

f:id:YTsuda:20140822104825p:plain

問題 - エンジニアが Analytics のタグを管理したくない

GoogleAnalyticsのタグ管理、面倒ですよね。マーケティング担当者からは日々多様な要望が飛んできます。

「購入する」ボタンにクリックイベントを設置してほしい
Ajaxで送信している問い合わせフォームの送信数を取得したい
ユーザーID（サーバー側で管理している情報）をAnalyticsでも参照したい
ユニバーサルアナリティクスにアップグレードしたい

Analyticsでこれらの要望を実現するには、Javascriptのコードを追加/変更する必要があり、エンジニアの手が必要になります。

エンジニア「バグでもないのに優先順位の中に割り込ませたくない」
マーケター「重要なデータなのにエンジニアが全然実装してくれない」

これではいけません。

そこで、GTMです。 GTMを使うとそんなカスタマイズをWeb上の管理画面（GUI）からできるようになるのです。

GoogleTagManager (GTM) とは何か

簡単に言えば、「GoogleAnalyticsのタグを生成するタグを作るサービス」です。 (Analytics以外のサービスのタグも生成できますが、ここではあえてAnalyticsに限定して紹介します。)

GoogleTagManager にアカウントを作成すると以下のようなコードスニペットが生成されます。

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-******"
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'?'&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-******');</script>
<!-- End Google Tag Manager -->

これをタグの直後に配置します。

さて、このあたりはAnalyticsと同じですが、例えば以下のような要望が出た場合、対応方法が大きく異なります。

「購入する」ボタンにクリックイベントを設置してほしい

これまでのAnalytics

一般にAnalyticsでイベントトラッキングを行う場合、エンジニアが以下のようなスクリプトを追加することで実現していました。

$('#button').on('click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
});

イベントトラッキング - ウェブトラッキング（analytics.js） - Google アナリティクス — Google Developers

GTMを使った場合

しかしGTMを使えばコードを書かずにイベントを設置できます。具体的にはGTMの管理画面で以下のページで紹介されている手順を踏むことになります。

基本的なページトラッキングタグ（タグの種類は [Google アナリティクス] または [Universal Analytics]、トラッキングの種類は [ページビュー]）をまだ追加していない場合は追加します。このタグはすべてのページで配信する必要があります。

種類が [イベントリスナー] > [リンククリックリスナー] のタグを追加します。タグ名は「リンククリックリスナー」にし、配信ルールとしては [すべてのページ] のみ追加します。

トラッキングするリンクごとにルールを 1 つ追加します…… (後略)

Google アナリティクスイベント - Tag Manager ヘルプ

やや手順は複雑ですが、このように設定すれば最初に設置したコードスニペットがイベントトラッキングのコードも含めて生成してくれます。重要なのはGUIで完結するということ。サイトに設置したコードスニペットには変更なし、デプロイ不要です。