Google Analytics4とGTMをサイトインストールする

# はじめに
Googleより2020年10月14日、「アプリ + ウェブ プロパティ」はベータ版から新しい名称の正式版「Google アナリティクス 4 プロパティ（GA4）」にアップデートされていたこともしらず、何も考えずGAをセットアップしようとしたらかなり困惑したので、今までとは少し違うセットアップ手順を、自分のメモのために残させていただきます。

# 進化の歴史
|世代|名称|内容|
|:-----------:|:------------|:------------|
| 第1世代|Urchin|2005年～2012年。2005年3月にGoogleが買収。urchin.js（アーチンタグ）【サポート終了】|
| 第2世代|従来のGoogle アナリティクス（ga.js）|2007年～2016年。2007年　ga.js（クラシックタグ）【サポート終了】。2009年　ga.js（dc.js）（非同期タグ）【サポート終了】→eコマース計測など、現在のGAの計測とレポートの基盤を構築。       |
| 第3世代|ユニバーサル アナリティクス|2014年～。2014年　analytics.js（ユニバーサルアナリティクスタグ）→クロスドメイントラッキングやオーディエンス、ユーザーエクスプローラーを実装。2017年　gtag.js（グローバルサイトタグ）→Google広告との連携やイベント計測などが強化。|
| 第4世代|Google アナリティクス 4 プロパティ（旧アプリ + ウェブ プロパティ）| 2020年10月リリース。gtag.js（グローバルサイトタグ）※上記参照→アプリとウェブの横断分析が可能に。複雑化したレポートも整理・刷新。|       

# 作業の流れ
1. Google Analyticsの設定（測定IDの発行）
2. GTM(Google Tag Manager)に、測定IDを埋め込みスクリプトを発行
3. スクリプトをサイトのHTMLにコピペ
4. デバッグ

# 1. Google Analyticsの設定（測定IDの発行）
## 1-1 アカウントの作成
[https://analytics.google.com](https://analytics.google.com)にアクセスして管理をクリックします。

![アナリティクス | ホーム 0002-11-10 16-42-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/ba22cce1-235d-5963-00a1-530c5fe5a390.png)

今回は最初から記録を取りたいので、アカウントの作成から始めます。
![アナリティクス 0002-11-10 16-43-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/b6f77e9d-1224-3087-0f7d-33fc4d7ad04f.png)
`アカウントの作成`をクリックします。

アカウントの設定画面が開きます。

![アナリティクス 0002-11-10 16-45-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/051cb757-f371-40cc-ff6b-6208db5a344f.png)

アカウントネームに適当な名前を入力してください。プロジェクト名が良いと思います。
チェックは全部オンのまま、`次へ`ボタンを押します。

# 1-2 プロパティの作成

プロパティの設定画面が開きます。

![アナリティクス 0002-11-10 16-51-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/8c24ab02-365a-fd7e-7255-c40b824c7065.png)


今回練習なので、とりあえず適当なドメインを入れました。
タイムゾーンや通貨などは環境に合わせて選択します。
`次へ`ボタンを押します。

ビジネスの概要の画面が開きます。

![アナリティクス 0002-11-10 16-52-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/78e58903-8894-4fdd-328c-023120165daf.png)

適当な内容を選択します。
`作成`ボタンを押します。

利用規約が表示されます。

![アナリティクス 0002-11-10 16-53-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/8944c2c3-35d1-8b2d-3292-85b33f390e49.png)

チェックを入れて、`同意する`ボタンを押します。

データストリームの選択画面が表示されます。ここが今までと違い一番ハマりました。今までのビューの概念は、GA4ではデータストリームにアップデートされています。

![アナリティクス 0002-11-10 16-55-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/e3991b0e-b5d6-103b-6d3f-081c192d7af8.png)

`ウェブ`をクリックします。

# 1-3 ストリームの作成

ウェブストリームの設定画面が開きます。

![アナリティクス 0002-11-10 16-57-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/346c3a13-65d2-1beb-890c-406472af4c82.png)

解析したいサイトのドメインと、ストリーム名（なんでもいい）を入力します。
`ストリームを作成`ボタンをクリックします。

ストリーム作成の完了です。

# 1-4 測定IDのゲット

ウェブストリームの詳細画面が表示されます。

![アナリティクス 0002-11-10 16-59-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/a94aae8e-63f5-3809-7fc9-2fb8d7a2fb13.png)

ここまでで、GA側の作業は完了です。
GTM側で、`測定ID`が必要になりますが、ウェブストリームの詳細画面でいつでも確認ができます。

# 2. GTM(Google Tag Manager)に、測定IDを埋め込みスクリプトを発行
[https://tagmanager.google.com/](https://tagmanager.google.com/)にアクセスします。

![Google タグ マネージャー 0002-11-10 17-05-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/207d1c87-9e2f-9b7a-442c-eaba09f03c47.png)

## 2-1. コンテナの作成

`アカウントを作成`をクリックします。

新しいアカウントの追加画面が開きます。

![Google タグ マネージャー 0002-11-10 17-07-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/0727f36b-cbe4-4a8b-8748-d62578982e6c.png)

アカウント名（会社名）をいれ、コンテナ名（適当に）を入力し、`ウェブ`をチェックして、`作成`ボタンをクリックします。

Googleタグマネージャー利用規約が表示されます。

![Google タグ マネージャー 0002-11-10 17-09-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/9bdfb509-97b5-fab7-cd23-b7f9d63aa317.png)

`同意します`にチェックをいれて、`はい`ボタンをクリックします。

貼り付け用のコードが表示されたポップアップが表示されますが、一旦これは閉じてしまって大丈夫です。

![Google タグ マネージャー 0002-11-10 17-10-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/86f6a6cd-0641-d127-8067-398a7be0220b.png)

ポップアップを閉じると以下の様な画面（ワークスペース）になります。
これでコンテナが作成されました。

## 2-2. 測定IDを入れたタグの作成

`タグ`をクリックします。

![Google タグ マネージャー 0002-11-10 17-14-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/b3454c77-b045-0165-15d0-1eba5abde3b3.png)

![Google タグ マネージャー 0002-11-10 17-15-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/62be330d-bcc4-e978-b5fd-85b272e185c9.png)

`新規`ボタンをクリックします。

![Google タグ マネージャー 0002-11-10 17-18-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/58a8b09c-2767-f8ee-e6c8-508389f321b8.png)

`タグ名`を適当に入力します。
`編集マーク`をクリックします。

![Google タグ マネージャー 0002-11-10 17-19-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/e73f288d-2f28-9837-2b94-8a648cceb05f.png)

ここもハマりました。`Google なりティクス:G4設定`をクリックしてください。

タグの設定画面が開きます。

![Google タグ マネージャー 0002-11-10 17-20-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/3b980027-2463-a1af-2d89-42ce4a7a976f.png)

ここで、先程GAで取得した`測定ID`を入力します。
`保存`ボタンを押します。

![Google タグ マネージャー 0002-11-10 17-22-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/673ee699-d7e8-9dbe-6a4c-9c51066e9194.png)

アラートが出ますので、トリガーを設定しましょう。
`トリガーを追加`をクリックします。
`All Pages`をクリックします。

タグの設定画面にもどります。

![Google タグ マネージャー 0002-11-10 17-23-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/678bbd18-bfbb-78e1-9a3e-589d23ef3b90.png)

`保存`ボタンをクリックします。
タグの作成完了です。

# 3. スクリプトをサイトのHTMLにコピペ

![Google タグ マネージャー 0002-11-10 17-24-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/10a8a1f3-3308-68be-d630-309a6ad8822b.png)

上記キャプチャー（タグ一覧画面）の、赤丸の部分をクリックします。

![Google タグ マネージャー 0002-11-10 17-25-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/3498ef5f-9d83-1d9e-dcd4-be945817ae38.png)

このようにコピペ用のスクリプトがポップアップされますので、head内と、bodyタグ直後の2箇所に貼り付けます。

最後にこのタグを公開する必要があります。公開をしないと、スクリプトをコピペしたページにアクセスすると、jsのエラーがでます。

![Google タグ マネージャー 0002-11-10 17-27-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/8d4739eb-f7ef-f322-61e0-e13174111924.png)

`公開`をクリックします。

![Google タグ マネージャー 0002-11-10 17-28-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/ad40ebf0-d583-f6ca-babd-6041a86dc4a0.png)

変更の送信画面が表示されます。
適当な内容をいれて、`公開`をクリックします。

![Google タグ マネージャー 0002-11-10 17-29-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/99ec53ee-527c-f12f-43d2-4a268c043f46.png)

バージョンの画面が開きます。これで一覧の流れは完了です。

# 4. デバッグ

![Google タグ マネージャー 0002-11-10 17-31-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/11728c7d-4a7b-5b16-4838-32d42319503c.png)

GTMの左上の`プレビュー`をクリックすると、Tag Assistant(BETA)が開きます。
先程スクリプトをコピペしたページのURLを入力することにより、設定が成功しているかの疎通テストを行うことができます。

![Google Tag Assistant 0002-11-10 17-33-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9884/b372c7c1-72c0-b55f-52c7-099f27772bb5.png)

こんな画面が開き、URLの欄にテスト対象のURLを入力し、`Start`をクリックします。

# 最後に

以上、GA4の解析ツールセットアップ手順のメモでした。

# 参考
https://webtan.impress.co.jp/u/2020/10/19/37861