LPページにボタンごとのトラッキングコードつけてGA4で計測

[基本環境](#基本環境)
[analyticsバージョンの確認](#analyticsバージョンの確認)
[htmlにイベントトラッキング用タグを配置](#htmlにイベントトラッキング用タグを配置)
[analyticsでイベント作成](#analyticsでイベント作成)
[analyticsでコンバージョン作成](#analyticsでコンバージョン作成)
[計測結果のレポート確認](#計測結果のレポート確認)
[参考記事](#参考記事)

#基本環境

ウェブサイトのGoogle Analytics への設定済み

LPページ構成：

LPページ　３枚
CTAボタン　各ページに３個（上部`a`、中部`b`、下部`c`）

LP01　赤いCTAボタン３個（上部`a`、中部`b`、下部`c`）
LP02　緑色CTAボタン３個（上部`a_gr`、中部`b_gr`、下部`c_gr`）
LP03　青いCTAボタン３個（上部`a_bl`、中部`b_bl`、下部`c_bl`）

#google analyticsバージョンの確認

設定ページの`<head>`部スクリプトにあるGoogle AnalyticsのタグでどのAnalyticsバージョンを使っているかがわかる

初代：`Urchin.js`
第２世代：`ga.js`
第３世代：`ga.js（非同期）`
第４世代：`analytics.js`
第５世代：`gtag.js`

```
<!-- ▼Google　Analytics -->
            <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxx"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-xxxxxxxxx');
</script>
        <!-- ▲Google　Analytics -->
```

第５世代を使用していることが確認された

#htmlにイベントトラッキング用タグを配置

基本形

イベントハンドラ="gtag('event', 'アクション名', {'event_category':'カテゴリ名','event_label': 'ラベル名','value': '値'});"

これを、計測したいボタンのaタグ内に設置

```
<a href="" target="_blank" title=""イベントハンドラ="gtag('event', 'アクション名', {'event_category':'カテゴリ名','event_label': 'ラベル名','value': '値'});"></a>
```

イベントハンドラ：クリックを計測する場合は`onClick`
アクション名：`任意`（今回は`LpClick`とした）
カテゴリー名：`任意`（今回はLP01`lp01`、LP02`lp02`、LP03`lp03`とした）
ラベル名：`任意`（今回は上部ボタン`PagrTop`、中部ボタン`PageMiddle`、下部ボタン`PageBottom`とした）
値：`任意`（今回は`100`とした）

LP01ページの上部ボタンには、
onClick="gtag('event', 'LpClick', {'event_category':'lp01','event_label': 'PagrTop','value': '100'});"
が設置されることになる。

#analyticsでイベント作成

Google Analytics　＞　設定　＞　イベント

![スクリーンショット 2021-12-16 0.38.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/8b820582-5f04-7fac-dfae-249ab2c9b7f8.png)

「イベントを作成」をクリック

![スクリーンショット 2021-12-16 0.40.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/8221eed1-5d1c-47c4-a207-1c9ebcf578df.png)

カスタムイベントの「作成」をクリック

![スクリーンショット 2021-12-16 0.42.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/31fa28ef-81fa-199c-fa36-d548bdfc08f0.png)

CTAボタンごとに区別できるカスタムイベント名を入力

![スクリーンショット 2021-12-16 0.46.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/37d538a6-cd48-9cce-a52c-52084ca6df7d.png)

「条件を追加」から項目を３つ増やす

![スクリーンショット 2021-12-16 0.46.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/0c6d2f37-6d6c-746a-ce1b-37de9222923a.png)

イベントトラッキング用タグのパラメータと値を入力

![スクリーンショット 2021-12-16 0.50.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/b973aa6a-2ec8-1147-cdbe-4974a59df30f.png)

「作成」をクリック

![スクリーンショット 2021-12-16 0.52.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/ff344d1d-8bde-1723-5917-79d5ccd7e050.png)

#analyticsでコンバージョン作成

Google Analytics　＞　設定　＞　コンバージョン

![スクリーンショット 2021-12-16 0.54.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/8b90aa83-23b1-d66d-68e4-f4177ba869ec.png)

「新しいコンバージョンイベント」をクリック

![スクリーンショット 2021-12-16 0.56.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/31800eb2-5322-e195-72d5-9a0cebf8e598.png)

「新しいイベント名」にカスタムイベント名を入力し、「保存」をクリック

![スクリーンショット 2021-12-16 0.58.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/1ecb6a6f-6033-35ad-a000-9f2438c91fdc.png)

コンバージョンイベントとして保存

![スクリーンショット 2021-12-16 1.00.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/d9c0207b-9daa-5ce0-61a7-4a98301b3786.png)

#計測結果のレポート確認

Google Analytics　＞　レポート　＞　イベント

![スクリーンショット 2021-12-16 1.01.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/05ba348e-0093-acc8-be34-d0b29eb813f5.png)

Google Analytics　＞　レポート　＞　コンバージョン

![スクリーンショット 2021-12-16 1.01.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/2325196d-6fff-436d-0448-d165e583bfef.png)



#参考記事
`https://www.irep.co.jp/knowledge/blog/detail/id=45604/`
`https://plusoneweb.net/210403/#index_id2`