Google Tag ManagerからAnalyticsを設定する

# 概要
Google Tag Manager経由でAnalyticsを設定する方法についてまとめました。
ターゲットとしては、Google Analyticsは使ったことがあるけれど、
GTMはまだ使ったことがないと言う人向けです。

## Google Analyticsに登録する
以下から登録が可能です。

https://analytics.google.com/analytics/web

登録が完了したら**トラッキング ID**   を取得しておいてください。

**管理 -> プロパティ設定** と遷移するとトラッキングIDを表示することができます。


## Google Tag Managerに登録する
続いてGTMを登録します。
https://tagmanager.google.com/

アカウントを持っていない方はまずは登録します。

![スクリーンショット_2023-07-19_14_19_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/514744b4-824d-f79f-5dae-9e904b4af2a4.png)

アカウント名はどんな名前でも大丈夫です。
どのサイトに設置するタグマネージャーなのか分かるような名前に設定します。
次に国を日本に変更します。
次にコンテナの設定に移ります。
まずはコンテナ名を設定しますので、タグマネージャーを設置するドメイン名を入力してください。
ドメインは下記の例のように、TOPページから「https://」を抜いたURLとなります。

例）　
https://test.com/　
の場合
test.com
がドメインとなります。

ターゲットプラットフォームは該当するものを選んでください。
本記事では「ウェブ」を選びます。

選択が完了すれば「作成」をクリックします。

![スクリーンショット 2019-11-13 17.04.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/53d05028-f9cf-d220-eac5-da3f80746c33.png)

## ユーザーの追加

アカウント一覧から先ほど登録したアカウントの右上の3連点をクリックして、ユーザー管理を押すと、ユーザー管理画面が表示されます。

![イメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/b6d622e0-94a5-5056-fa45-af18273647bb.jpeg)

ユーザー管理画面右上の「＋」から追加したいユーザーの招待がおこなえます。

![スクリーンショット_2023-07-19_14_29_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/c7c199e2-72c8-44fd-bdfe-333a4034f7bb.png)


# 変数の設定

作成が完了したら、変数の設定にいきます。

<img width="1150" alt="スクリーンショット 2019-11-15 17.28.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/c9d3e637-87e6-1aeb-8136-75a6edf16e46.png">

まず、 **ユーザー定義変数**　に新規変数を追加します。
右上の新規ボタンをクリックします。
すると以下のような画面が開きます。

<img width="1048" alt="スクリーンショット 2019-11-15 17.29.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/56a2dd75-455d-42da-660d-d31be71ee3ff.png">

続いて変数のタイプを選択します。
今回はGoogleAnalyticsを繋げるので、 **Googleアナリティクス設定** を選択します。

<img width="1149" alt="スクリーンショット 2019-11-15 17.29.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/9a9f4d48-83d3-1049-c5d8-a2460c7365c6.png">

選択すると以下のような画面になります。

<img width="1047" alt="スクリーンショット 2019-11-15 17.33.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/b0e545da-b92c-5f50-40aa-6669157cbc27.png">

Analyticsで指定されたトラッキングIDを入力します。
変数名もトラッキングIDにしておくと、設定時に分かりやすいです。
CookieドメインはautoのままでOKです。

<img width="1001" alt="スクリーンショット_2019-11-15_17_47_34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/59d37697-33d0-06f3-1265-be34c756b8df.png">

# タグの設定

次にタグの設定をおこないます。

<img width="1162" alt="スクリーンショット 2019-11-15 17.48.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/90567b9e-583f-d34c-4280-26ec9a92a1e9.png">

新規ボタンを押して、設定画面を開きます。

<img width="961" alt="スクリーンショット 2019-11-15 17.48.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/f39bdae1-4d85-7054-6eb8-aa9b525c4f68.png">

次にタグタイプを選択します。
Analyticsと書いているのが複数ありますが、
今回は、 **Google アナリティクス：ユニバーサル アナリティクス** を選択します。

<img width="1005" alt="スクリーンショット 2019-11-15 17.49.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/5bc03958-2cc0-fb9f-7451-f78dc63c8f82.png">

トラッキングタイプはページビューのままでOK。
Googleアナリティクス設定は、先ほど設定した変数をプルダウンから選択します。

<img width="960" alt="スクリーンショット_2019-11-15_19_05_28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/ba5cd2ca-0cf1-0c64-fc95-4811f1a63e9e.png">

次はトリガーの設定です。
**All Pages** を選択します。
以下のような設定になっていれば、完了です。
タグの名前はお任せです。
<img width="765" alt="スクリーンショット_2019-11-15_19_11_57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/482f9908-399a-b42a-65f3-56f5f62d00a1.png">

## Google タグ マネージャー スニペットをサイト内に入れる
以下のコードを指示通りの箇所に入れます。
<img width="737" alt="スクリーンショット_2019-11-18_11_04_53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/ac5c6f3d-5d90-89f4-a46c-98b58bfa5743.png">

### コードを埋め込んだら、プレビュー
タグマネージャのコンソールにある右上の「プレビュー」ボタンを押します。

プレビューが起動したら、該当のサイトにアクセスします。

アクセス後、Googleアナリティクスにログインし、リアルタイムデータにアクセスデータ表示されていたら成功です！！

プレビューで問題無いことが確認できたら、「公開」をクリックしましょう！

Githubのように更新時に、コミットメッセージみたいなのを入れることになるので、
今回の更新内容を書いておきましょう。
<img width="1091" alt="スクリーンショット 2019-11-18 11.36.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/0747900f-a367-9841-6b4a-fb82d1ef49f2.png">

これで完了です！
お疲れ様でした！