2022.04.01 2023.11.26

GA4でボタンクリックを計測する方法【gtag編】

ヨロコビーム

GA4でボタンクリックを計測するにはgtag（ジータグ：グローバルサイトタグ）を使う方法と、Googleタグマネージャー（GTM）を使う方法の２つがあります。

今回は、そのうちgtagを使う方法を紹介します。

Googleアナリティクスをタグマネージャーを使わずに設置している人は、こちらの記事を参考にしてください。

タグマネージャーを使った方法は、以下の記事を参考にしてください。

gtagでボタンクリックを計測するための流れ
１．gtagを作成する
- コードの意味
- 記述上の注意点
２．gtagを計測したいボタンに設置する
３．gtag作成時に作ったパラメータをカスタムディメンションとしてGA4に設置
- カスタムディメンションを設定する
  - 入力上の注意【重要】
４．正しく計測しているか確認
- 表示されない場合は
gtag編まとめ

gtagでボタンクリックを計測するための流れ

大まかな流れとしては

gtagを作成する
gtagを計測したいボタンに設置する
gtag作成時に作ったパラメータをカスタムディメンションとしてGA4に設置
正しく計測しているか確認

となります。

所要時間としては、恐らく15分ぐらいで終わるんじゃないかと思います。

ヨロコビームのサイドにYouTubeチャンネルへのボタンがありますが、ここがクリックされるとGoogleアナリティクスで計測するよう設定してあります。

今回は、その時に設定した方法を例に説明します。

１．gtagを作成する

メモ帳などのテキストエディタを開きましょう。
そこに、下のようにgtagを打ち込みます。

onclick="gtag('event','ボタンクリック',{'click_category':'Youtube','btn_position':'サイド'});"

コードの意味

今回は、gtagを使ってボタンをクリックするイベントを定義するわけです。
そのため、最初に

onclick=”gtag(‘event’,’ボタンクリック’

と記述します。

「ボタンクリック」の部分は自由に変えられます。

その後で｛｝でパラメーターを二つ設定し、それぞれ値を入れています。

パラメータ	値
click_category	Youtube
btn_position	サイド

なぜ、こんなものを入れているのか。

それは、単にボタンをクリックしたことを計測するだけでなく、ボタンの種類（click_category）とボタンの設置場所（btn_position）のデータも取りたいためです。

このパラメーター名と値も自由に変えることができます。

例えば記事下にあるバナー広告のクリックを計測したい場合は

パラメータ	値
click_category	バナー
btn_position	記事下

にすればいいわけです。

もちろんパラメーターも変えられます。

パラメータ	値
click_media	メルマガ
btn_size	ボタン大

といった具合です。

また、パラメータの数自体をもっと増やすことも可能です。

記述上の注意点

基本的にスペースは空けず、詰めて記述してください。
日本語部分以外はすべて半角英数字です。

ただ、フォント（文字の種類）によっては、半角英数字で入力してもスペースが空いているように見える部分があります（下図の赤い部分のように、ダブルクォーテーションやシングルクォーテーションの横など）。

これは気にする必要はありません。

２．gtagを計測したいボタンに設置する

記述したgtagを以下のように、アンカータグの開始タグ<a>の末尾に入れます。

<a href="https://www.youtube.com/channel/UCEGSDDC3g8rmFFwEZQ" onclick="gtag('event','ボタンクリック',{'click_category':'Youtube','btn_position':'サイド'});"><img src="https://yorokobeam.com/wp-content/uploads/yt_btn.png" alt="YouTube"></a>

全体をアンカータグ<a>で囲み、そこにリンク先を指定します。そのすぐ後に、先ほど記述したgtagを入れて、アンカータグを閉じます。
続けてイメージタグ<img>を入れて、画像のパスを指定します。
最後にアンカータグの終了タグ</a>で閉じて完了です。

ヨロコビームのサイトはWordPressで構築しているため、実際のコードはもう少し複雑なのですが、そこはややこしいので、割愛します。

下はWordPressのウイジェットを使って、gtagを設定した画面です。

WordPressのサイドバーなどに表示したボタンを計測したい場合は、ウイジェットを使って設置するといいです。

これでサイト側の設定は完了しました。

３．gtag作成時に作ったパラメータをカスタムディメンションとしてGA4に設置

gtagコードの中にパラメータを設定しましたが、この名前は自由に決めることができました。

ただ、こちらが決めただけだとGoogleアナリティクスは認識できないので、「こういうパラメータを設置したので計測してね」と教えてあげる必要があります。

そこで、パラメータを「カスタムディメンション」として設置するわけです。
ディメンションとは、簡単に言えば「項目名」のことです。

Googleアナリティクスの場合だと「参照元」「市区町村」「性別」などがそうです。これらの項目は最初から設定されていますが、自分で考えた項目は登録しないといけません。

それがカスタムディメンションです。

カスタムディメンションを設定する

GA4に行き、左メニューの「設定」→「カスタム定義」を選択します。
右上の「カスタムディメンションを作成」をクリックします。

画面右から「新しいカスタムディメンション」という項目が出てくるので、そこに入力しましょう。
今回は下のように入力しました。

ディメンション名	click_category	パラメータ名と同じにした方が分かりやすいかもしれません
範囲	イベント	変更しません
説明	サイト内ボタンの種類	省略できますが、入れておくと後で分かりやすいです
イベント　パラメータ	click_category	コード作成で設定したパラメータ名を入れます

click_categoryが入力できたら、右上の「保存」をクリックしましょう。
次に同じようにしてbtn_positionを入力します。