LoginSignup
1
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-12-15

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

基本環境

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

LPページ構成:

LPページ 3枚
CTAボタン 各ページに3個(上部a、中部b、下部c

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

google analyticsバージョンの確認

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

初代:Urchin.js
第2世代:ga.js
第3世代:ga.js(非同期)
第4世代:analytics.js
第5世代: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 -->

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

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

基本形

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

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

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

イベントハンドラ:クリックを計測する場合はonClick
アクション名:任意(今回はLpClickとした)
カテゴリー名:任意(今回はLP01lp01、LP02lp02、LP03lp03とした)
ラベル名:任意(今回は上部ボタン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

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

スクリーンショット 2021-12-16 0.40.42.png

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

スクリーンショット 2021-12-16 0.42.36.png

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

スクリーンショット 2021-12-16 0.46.35.png

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

スクリーンショット 2021-12-16 0.46.35.png

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

スクリーンショット 2021-12-16 0.50.49.png

「作成」をクリック

スクリーンショット 2021-12-16 0.52.48.png

analyticsでコンバージョン作成

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

スクリーンショット 2021-12-16 0.54.36.png

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

スクリーンショット 2021-12-16 0.56.24.png

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

スクリーンショット 2021-12-16 0.58.23.png

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

スクリーンショット 2021-12-16 1.00.31.png

計測結果のレポート確認

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

スクリーンショット 2021-12-16 1.01.42.png

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

スクリーンショット 2021-12-16 1.01.57.png

参考記事

https://www.irep.co.jp/knowledge/blog/detail/id=45604/
https://plusoneweb.net/210403/#index_id2

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0