基本環境
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 > 設定 > イベント
「イベントを作成」をクリック
カスタムイベントの「作成」をクリック
CTAボタンごとに区別できるカスタムイベント名を入力
「条件を追加」から項目を3つ増やす
イベントトラッキング用タグのパラメータと値を入力
「作成」をクリック
analyticsでコンバージョン作成
Google Analytics > 設定 > コンバージョン
「新しいコンバージョンイベント」をクリック
「新しいイベント名」にカスタムイベント名を入力し、「保存」をクリック
コンバージョンイベントとして保存
計測結果のレポート確認
Google Analytics > レポート > イベント
Google Analytics > レポート > コンバージョン
参考記事
https://www.irep.co.jp/knowledge/blog/detail/id=45604/
https://plusoneweb.net/210403/#index_id2