この記事はウェブクルー Advent Calendar 2019の11日目の記事です。
昨日は@kalzitさんの「fp-tsでTypeScriptでも関数型プログラミング」でした。

はじめに

この記事ではGTMでGoogleアナリティクス（以下「GA」）を設定する方法と小ネタをご紹介したいと思います。

GTMとは

GTMはGoogleタグマネージャーの略称で、Googleが提供している無料のタグ管理システムです。管理したいページにGTMのタグを設置し、管理画面でGAなどのタグを登録することで、HTMLを修正することなく計測などの設定ができます。

GTMの導入方法

1.GTMのタグを発行

GTM（https://tagmanager.google.com/）にGoogleアカウントでログインします。
「アカウント作成」をクリックし、アカウント設定の「アカウント名（例：サイト名）」と「国（例：日本など）」、コンテナの設定から「コンテナ名（例：www.test.com）」と「ターゲットプラットフォーム（例：ウェブなど）」を設定し、「作成」をクリックすると管理画面に遷移します。
管理画面に遷移したときにGTMのタグも表示されます。もう一度確認したい場合、管理画面上部の「GTM-XXXXXXX」をクリックすると表示されます。

2.GTMのタグ設置

発行されたGTMのタグを指示通り設置します。

・このコードは、次のようにページの <head>内のなるべく上のほうに貼り付けてください。
・また、開始タグ <body>の直後にこのコードを次のように貼り付けてください。

設置例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<meta name="Description" content="">
<meta name="Keywords" content="">

<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

</body>

GTMでGoogleアナリティクスを登録

GTMでGoogleアナリティクスを登録するにはGAのトラッキングID（例：UA-XXXXXX-X）が必要になります。事前に準備をお願いします。（参考URL：https://support.google.com/analytics/answer/1008080?hl=ja）
ここでは基本となるページビューの設定を行います。

1.変数の設定

メニューから「変数」をクリックします。
ユーザー定義変数から「新規」をクリックします。
任意の変数名（例：GA設定）をつけてもらい変数の設定をします。
ユーティリティから「Google アナリティクス設定」を選択します。
トラッキング IDにGAのトラッキングID（例：UA-XXXXXX-X）を設定して保存します。

2.タグとトリガーの設定

メニューから「タグ」をクリックします。
タグから「新規」をクリックします。
任意のタグ名（例：GAページビュー）をつけてもらいタグの設定をします。
おすすめから「Google アナリティクス: ユニバーサルアナリティクス」を選択します。
トラッキングタイプを「ページビュー」にし、Google アナリティクス設定を上記で作成した「任意の変数（例：Google アナリティクス設定）」を設定します。

続いてトリガーの設定をします。トリガーの選択から「All Pages」を選択します。
タグの設定とトリガーが設定できたら保存します。

3.確認

プレビューモードで確認を行います。
管理画面右上の「プレビュー」ボタンをクリックします。
自身のサイトを開くとGTMのツールが表示されます。
Summaryからページビューが表示されているか確認します。

4.公開

プレビューモードで問題なければ管理画面右上の「公開」をクリックします。
ここでバージョン管理を行えます。
バージョン名、バージョンの説明を記述して「公開」をクリックして完了です。
念のため、GAでページビューが計測できているか確認します。
※管理画面の「プレビューモードを終了」をクリックしないかぎり、自信のサイトにGTMのツールが表示され続けてしまうので完了したら「プレビューモードを終了」をクリックしましょう。

クリックイベントの設定

上記ではページビューまでの設定をしました。次はクリックイベントの設定をします。

1.トリガーの設定

メニューから「トリガー」をクリックします。
トリガーから「新規」をクリックします。
任意のタグ名（例：リンククリック）をつけてもらいトリガーの設定をします。
クリックから「すべての要素」を選択します。
このトリガーの発生場所ですが。「すべてのクリック」を選択するとクリックするたびにイベントが発火します。今回は「一部のクリック」を選択します。
次にどのボタンやリンクをクリックしたかを細かく指定できます。
今回はクラス名「link」という要素をトリガーにしたいと思います。
左から「Click Element」「CSSセレクタに一致する」「.link」と設定し保存します。
他にもいろいろな設定方法があります。

2.タグの設定

メニューから「タグ」をクリックします。
タグから「新規」をクリックします。
任意のタグ名（例：リンククリック）をつけてもらいタグの設定をします。
おすすめから「Google アナリティクス: ユニバーサルアナリティクス」を選択します。
トラッキングタイプをイベントにし、GAのイベント名を設定していきます。
「カテゴリ（例：クリック）」「アクション（例：{{Page URL}}）」「ラベル（例：リンク）」
Google アナリティクス設定は「任意の変数（例：Google アナリティクス設定）」を設定します。
トリガーは上記で作成した「任意のタグ名（例：リンククリック）」を選択します。
タグの設定とトリガーが設定できたら保存します。

参考URL：https://support.google.com/tagmanager/answer/6107124?hl=ja

3.確認と公開

プレビューモードで確認を行います。
クリックしたときにSummaryからクリックイベントが表示されているか確認します。ここでカテゴリ名など入力したものが表示されているか確認ができます。問題なければ公開をし、GAで計測できているか確認します。

GTMの小ネタ

■テスト環境と本番環境とでGAトラッキングIDを出しわける

テスト環境と本番環境とで別のGAトラッキングIDを使用している場合、それぞれ設定していくのは大変です。ここではルックアップテーブル（○○のときは××）を使用してIDを出しわける方法をご紹介します。
※この方法はURLもテスト環境と本番環境とで違うことが条件になります。

ルックアップテーブル参考URL：https://support.google.com/tagmanager/answer/7683362#lookup_table

1.出し分け用のGAトラッキングコードの変数を作成する

メニューから「変数」をクリックします。
ユーザー定義変数から「新規」をクリックします。
任意の変数名（例：GAトラッキングID）をつけてもらい変数の設定をします。
ユーティリティから「ルックアップテーブル」を選択します。
変数を入力に{{Page Hostname}}を設定して「+行を追加」をクリックして2行準備します。
1行目の入力部分に「テスト環境のURL（例：www.test.blog.com）」、出力部分に「テスト環境のGAトラッキングコード（例：UA-0000000-0）」。
2行目の入力部分に「本番環境のURL（例：www.blog.com）」、出力部分に「本番環境のGAトラッキングコード（例：UA-1111111-1）」を設定して保存します。

2.GAの変数を作成する

メニューから「変数」をクリックします。
ユーザー定義変数から「新規」をクリックします。
任意の変数名（例：GA設定）をつけてもらい変数の設定をします。
ユーティリティから「Google アナリティクス設定」を選択します。
トラッキング IDに上記で作成した「任意の変数名（例：GAトラッキングID）」を設定して保存します。

あとは今まで通りタグを設定するだけで、環境別に計測ができます。

■aタグ内の要素が反応しない問題

クリックイベントを使用していると気づくかと思いますが、下記のようにaタグ内にimgやspanがあった場合、aタグにクリックイベントを設定して、imgやspanをクリックしても発火してくれません。トリガーとタグを別々に設定する必要があります。

例

<a href="hoge"><img src="hoge.png" alt="hoge"><span>ほげ</span></a>

これを別々ではなくトリガーとタグを1つずつで設定する方法をご紹介します。
※この方法はHTMLの調整が必要になります。

1.HTMLの調整

各要素に先頭を同じにしたユニークなclass名を付けます。

記述例

<a href="hoge" class="hogeLink"><img src="hoge.png" alt="hoge" class="hogeLink-img"><span class="hogeLink-text">ほげ</span></a>

2.トリガーの設定

メニューから「トリガー」をクリックします。
トリガーから「新規」をクリックします。
任意のタグ名（例：リンククリック）をつけてもらいトリガーの設定をします。
クリックから「すべての要素」を選択します。
このトリガーの発生場所は「一部のクリック」を選択します。
次にどのボタンやリンクをクリックしたかを細かく指定できます。
今回はクラス名「hogeLink」という要素をトリガーにしたいと思います。
左から「Click Classes」「先頭が一致」「hogeLink」と設定し保存します。

あとは今まで通りタグを設定するだけで、aタグ内の要素もイベント発火できます。

さいごに

GTMは担当している業務によってさまざまな使い方ができます。上記のほかにも設定方法はたくさんあると思います。
皆さんもいろいろ試してみてください。

明日の記事は@wc-keisuke_tokunagaさんです。
よろしくお願いします。

GTMの設定と小ネタ