読者です 読者をやめる 読者になる 読者になる

ハウテレビジョン開発者ブログ

『外資就活ドットコム』を日夜開発している技術陣がプログラミングネタ・業務改善ネタ・よしなしごとについて記していきます。

GoogleTagManager で Analytics のタグを管理する (1) - GTMの概要とメリット

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

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

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

Google Tag Manager official website

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の管理画面で以下のページで紹介されている手順を踏むことになります。

  1. 基本的なページ トラッキング タグ(タグの種類は [Google アナリティクス] または [Universal Analytics]、トラッキングの種類は [ページビュー])をまだ追加していない場合は追加します。このタグはすべてのページで配信する必要があります。
  2. 種類が [イベント リスナー] > [リンク クリック リスナー] のタグを追加します。タグ名は「リンク クリック リスナー」にし、配信ルールとしては [すべてのページ] のみ追加します。
  3. トラッキングするリンクごとにルールを 1 つ追加します…… (後略)

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

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

導入コスト

導入コストはサービスの規模によって違うと思いますが、弊社では旧イベントの移行、テスト含めて2日かかりました。

おわりに

エンジニアが楽になるばかりでなく、マーケターにとってもスピーディーに欲しいデータを取得できるようになります。 ぜひとも導入を検討してみてください。

次回はGTMの具体的な導入方法について、手順を追って説明します。