# Google タグマネージャー（GTM）の設定をして、コードを触らなくても確認用スクリプトの設定ができるようにする

URL: https://webrandum.net/google-tag-manager/
公開日: 2020-10-07
更新日: 2020-10-10
カテゴリー: アクセス解析・サイト運用
タグ: Google タグマネージャー
出典: Webrandum（著者: サイトウ マサカズ）

サイト運営をしていると、アクセス解析などのなにかサービスを使おうとしたときに「`<head>`タグ内にこれを埋め込んでください」と指示される機会がよくあります。

そのたびに毎回ファイルを開いて、headタグ内にタグを入れて → FTPアップは面倒です。

また、タグが増えてくると「もうこのサービスは使わないからタグを削除したいんだけど、目的のサービスのタグがどれか分からない」なんてことにもなります。

そんなことにならないために、管理画面からタグをまとめて管理するのがGoogle タグマネージャー（GTMと略されることがあります）です。

ファイルを触らなくても管理画面から簡単に変更できるので、開発担当に依頼しなくても変更ができるのもメリットの1つです。

## Google タグマネージャーの設置方法

Google タグマネージャーを使うためには、まずはアカウント作成が必要なのと、Google タグマネージャー用のタグを追加する必要があります。

Google タグマネージャー用のタグはファイル内に設置する必要がありますが、1回行えばそれ以降の他のタグは`head`内に追加せずに、管理画面から追加できるようになります。

### Google タグマネージャーのアカウント作成

![Google タグマネージャー公式サイト](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_1-3-1024x551.jpg)

[Website Tag Management Tools & Solutions - Google Tag Manager](https://marketingplatform.google.com/about/tag-manager/)

まずはGoogle タグマネージャーの公式サイトへアクセスして、右上の「無料で利用する」ボタンからGoogleアカウントを選択します。

下の画像のようなページに移動するので、「アカウントを作成」ボタンをクリックして、アカウントの作成をします。

![Google タグマネージャーアカウントの追加](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_2-1-1024x285.png)

必要な情報はほとんどGoogleアナリティクスと同じで、アカウント名や設定するサイトのURLです。

![Google タグマネージャーアカウントの作成ページ](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_3-2-1024x565.png)

必要な情報を入力したらアカウント作成完了です。

### コードの設定

アカウントの作成が完了すると、下記のモーダルが表示されるので、<head>内と<body>開始タグ直後に表示されたコードを貼り付けてアップします。

![Google タグマネージャーのタグ](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_4-1-1024x581.png)

もしモーダルを閉じてしまった場合は、画面右上の「ワークスペースでの変更数」と表示されたテキストの左隣にある青いIDのようなものをクリックすると、再度このモーダルが開きます。

これで、Google タグマネージャーの設定は完了です。

## Google タグマネージャーの基本的な使い方

基本的な使い方の流れは下記の通りです。

1. サイドバーの「タグ」で、追加したいタグを設定する
2. 画面右上の「公開」ボタンをクリックして、バージョン名を入力して公開すると、サイトに反映される

とにかく、追加したいときは「タグ」から追加すると覚えておけばOKです。

### Googleアナリティクスの設定をする

今回は試しに、Googleアナリティクスのタグを追加してみます。

すでに`<head>`タグ内にGoogleアナリティクスのコードが入っている場合は、外しておかないと二重で設定されてしまうので注意が必要です。

Google タグマネージャーの［タグ］→「新規」→「タグの設定」でタグタイプを選択する画面が表示されます。

この中から、今回は「Googleアナリティクス: ユニバーサルアナリティクス」を選択します。

（この中にないタグを設定したい場合は「カスタムHTML」を選択すれば`<head>`タグに入れるのと同じように設定できます）

![Google タグマネージャーのタグ選択](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_5-1024x582.png)

「Googleアナリティクス: ユニバーサル アナリティクス」の設定が表示されるので、「トラッキングタイプ」は「ページビュー」、「Google アナリティクス設定」はクリックして「新しい変数」から、トラッキングコードを変数に設定します。

![Googleアナリティクス ユニバーサルアナリティクスの設定](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_6-1024x577.jpg)

設定ができたら、左上の「名前のないタグ」となっているのを、「Googleアナリティクス: ユニバーサルアナリティクス｜ページビュー」などの名前にしておけば、あとから見るときに何が設定されてあるタグなのか分かりやすくなります。

名前の設定もできたら、下の「トリガー」をクリックして、「All Pages」を選択します。

この「トリガー」で、タグが発火する条件を指定できるのですが、Googleアナリティクスは全ページに対して発火させる必要があるので、「All Pages」を選択します。

すべての設定ができたら、右上の「保存」ボタンでタグを保存します。

### タグの公開

タグを保存しても、まだ公開はされていません。

公開するためには、画面右上の「公開」ボタンをクリックします。

変更の送信画面が表示されるので「バージョン名」と「バージョンの説明（省略可能）」を入力して、右上の「公開」ボタンを押せばサイトに反映されます。

![Google タグマネージャー バージョンの公開](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_7-1024x582.png)

バージョン名はなんでもいいですが、「Googleアナリティクスの追加」のような何を行ったか分かりやすい名前の方があとあと便利そうです（バージョン名っぽくありませんが…）

というのも、バージョン名は一覧になって表示されるので、「バージョン1.0.0」のような数字よりも具体的に何を行ったか書いて置いた方が、どんな変更をいつ行ったのかの履歴がすぐ分かります。