ブログサイトを運用する場合にモチベーションを保ち続けるのは難しい。企業サイトなら商品への興味を深めたり、商品ページに誘導したりといった目的があり、わかりやすいが、このようなブログが、あわよくば見ず知らずの誰かに何らかの形で役に立っていると嬉しい。そこで思いついたのが前回投稿した「いいね機能」であるが、ページ遷移しないためURL指定のコンバージョンは設定できない。そこで、Googleアナリティクス（UA・GA4）でクリックイベントによるコンバージョン計測を行う。
そう思っていたところ、以下のように”ユニバーサルアナリティクスは2023年7月1日から計測ができません”という案内が来た。
■ユニバーサル アナリティクスのサポートは終了します – アナリティクス ヘルプ
https://support.google.com/analytics/answer/11583528
そのためGAとGA4のそれぞれの設定方法を明記する。
目次
GTM：タグの作成
左メニューの「タグ」から「新規」ボタンをクリック。
「タグの設定」エリアをクリック。
「タグタイプ」を選択。
GA（UA）
「タグタイプ」に「Google アナリティクス：ユニバーサルアナリティクス」を選択し、「トラッキングタイプ」で「イベント」を選択。
クリック時にIDを判定したいため、各項目の「＋」をクリック後、「変数を選択」画面で「組み込み変数」ボタンをクリック。
「組み込み変数の選択」画面で「Click ID」を選択すると「{{Click ID}}」が設定される。
このようにして、イベント トラッキング パラメータを設定する。設定値は好みであるので何でもよいが、あとでどのページでクリックされたのかわかるよう「Page Path（”/test1.html” など）」を設定した。
・カテゴリ：（任意の名前）CV
・アクション：（組み込み変数）Click ID
・ラベル：（組み込み変数）Page Path
そして、「Googleアナリティクス設定」は、「変数を選択」画面で組み込み変数右の「＋」をクリックし、新たな変数を作成し、それを選択する。
GA4
タグ名を「（任意）Like」とし、「タグタイプ」に「Google アナリティクス：GA4 イベント」を選択。
以下のイベントパラメータを設定する。
・パラメータ名：（任意の名前）click_id
・値：（組み込み変数）Page Path
GA4：カスタムディメンションの作成
カスタムディメンションの設定を忘れると、GA4の「探索」でディメンションとして使えないばかりか、計測されないようなので、GTMの設定と同時に設定する必要がある。
左メニューの「設定」をクリック。
「カスタム定義」から「カスタムディメンションの作成」ボタンをクリック。
イベントパラメータに先ほど設定した「click_id」を選択。範囲は「イベント」のまま。ディメンション名もイベントパラメータと同じ「click_id」としておく。
これでカスタムディメンションの作成は完了。
以下を見ると、「最初の 48 時間はカスタム ディメンションに対して「（未設定）」という値が表示されます。」とあるため、しばらく待つ。
■[GA4] カスタム ディメンションとカスタム指標 – アナリティクス ヘルプ
https://support.google.com/analytics/answer/10075209?hl=ja&utm_id=ad#zippy=%2C%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E5%86%85%E5%AE%B9
GA4「探索」の設定
（４８時間後・・）左メニューの「探索」から、「自由形式」を選択し、「ディメンション」横の＋をクリックする。
ディメンションの選択画面で「カスタム」タブの「click_id」にチェックをつけ、「インポート」ボタンをクリックする。そうするとディメンションエリアに「click_id」が表示される。
ディメンションに「イベント名」「click_id」を追加し、右の「行」エリアにドラッグ＆ドロップする。指標に「イベント数」「セッション」を追加し、右の「値」エリアにドラッグ＆ドロップする。フィルタに「イベント名」をドラッグ＆ドロップし「次と完全一致」「Like」→「適用」する。以下のようになる。
GTM：トリガーの作成
作成したタグを発火させるトリガーを作成する（UA、GA4共通）。
トリガーのタイプ、「クリック－すべての要素」を選択。
このトリガーの発生場所：一部のクリック
イベント発生時にこれらすべての条件がtrueの場合にこのトリガーを配信します：Click ID－含むーlike
以下のHTMLで、当初は”like1″にしていたが発火しなかったが、クリックに反応するのは”like_image”であることが判明。idがlikeと名のつくエリア全般を対象とした。
GTMのデバッグ方法
画面右上の「プレビュー」ボタンをクリック。
デバッグしたいURLを入力し「Connect」ボタンをクリック。
別タブに画面（A）が表示される。
元の画面（B）に「Connected!」と表示されるので「Continue」をクリック。
画面（A）のコンバージョンエリアをクリックすると・・・
画面（B）の「Summary」では、「Tag Not Fired」となっているように見えるが・・
左メニューの「Click」をクリックすると、「Tag Fired」となっていることがわかる。
「Likeクリックイベント」をクリックすると、発火した中身を見ることができる。例えば、先ほど設定した「Click ID」の値をデバッグすることができる（反応しない時は、デバッグ用にすべてのクリックイベントを設定し、発火した値を確かめてもよい）。
計測結果の確認
GA（UA）
「行動」「イベント」「上位のイベント」をクリックするとイベントカテゴリが表示される。
対象のイベントカテゴリをクリック→「イベントアクション」が表示される。
イベントアクションをクリックすると「イベントラベル」が表示される。
GA4
左メニューの「エンゲージメント」→「イベント」を選択し、「Like」イベントをクリック。
パラメータ click_id のパラメータ値に “/test1.html” （URL Path）が設定されていることがわかる。
コンバージョンイベントの設定もしておく。
左メニューの「コンバージョン」から「新しいコンバージョンイベント」ボタンをクリックし、新しいイベント名にGA4のタグ設定時に設定した「Like」を入力し「保存」ボタンをクリック。
「コンバージョンとしてマークを付ける」をONにする。
おまけ：親要素のクラス名を計測
後日判明したが、「ページの場所」「ページ遷移＋クエリ文字列」ディメンションを使えば、どのページでイベントが発生したのかはわかるため、Page Path の設定は意味がない。
そこでクリックしたimgタグの親である（aタグの）クラス名を取得することにする。
GTM：変数の設定
左メニューの「変数」→「ユーザー定義変数」横の「新規」ボタンをクリック。
名前を「親要素のクラス名取得」とし、変数のタイプは「カスタム JavaScript」とする。カスタム JavaScriptは以下とする。
function () {
return $( {{Click Element}} ).parent().attr('class');
}
組み込み変数に「Click Element」を追加していない場合は追加が必要。
GTM：タグの設定
イベントパラメータを追加する。パラメータ名を「ClickClass」とし、値は先ほど作成した「親要素のクラス名取得」を選択し「保存」する。
GTM：プレビュー確認
Click時、イベントパラメータが発火していることがわかる。
まとめ
様々な機能が搭載されているGTM・GA・GA4。当たり前のように利用しているが、ここまで高機能のツールを無料で提供しているGoogleはすごい、とリスペクトする。何の目的で無料で提供しているのか？と不思議な気持ちになる。Googleが出始めた1998年頃は、広告を掲載することなく、ただただシンプルに高速で検索できるツールであった。当時、「どのページをホームページ（起動したら最初に出るページ）にしてるの？」と聞かれて、「Google」と答えたら、「いきなり検索するの？（変わってるね）」と言われたものだ。そういえば、GoogleMapも無償時代が長く続いた。改めてありがたいと思う。
ところで、切り替えが必須となったGA4だが、GA4はアプリベースの考え方が強く、直帰率が存在しないなど、まだまだその世界観に慣れていないが、例えば、90％のスクロールイベントが自動で取れたり、エンゲージメントのあったセッション（10 秒を超えて継続したセッション、コンバージョン イベントが発生したセッション、または 2 回以上のスクリーン ビューもしくはページビューが発生したセッションの数）による評価ができるようになるなど、興味深い機能も多い。
今回想定の検索ワード
”GA4 クリックイベント”