More than 3 years have passed since last update.

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

Last updated at 2021-12-15Posted at 2021-12-15

基本環境
 analyticsバージョンの確認
 htmlにイベントトラッキング用タグを配置
 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とした）
カテゴリー名：任意（今回はLP01lp01、LP02lp02、LP03lp03とした）
ラベル名：任意（今回は上部ボタンPagrTop、中部ボタンPageMiddle、下部ボタンPageBottomとした）
値：任意（今回は100とした）