みなさん、楽しいGA4ライフ送ってますか?
え?まだUA使ってますか?
分かります、その気持ち。
でも、2023年6月いっぱいでUAは使えなくなります。
え?知ってるって?
さあ、観念して始めましょう、GA4。
時は容赦なく過ぎます。
この記事は、そういう気持ちでGA4を使い始めている私が、自分を追い込むために書いているものです(笑)
UAを使わないようにしたのはだいぶ前ですが、結局GA4の使い方がよく分からず、たいして使わないまま時が過ぎてしまったので、いいかげん使いこなそうとしています。

え?前置きが長いって?

GA4でクリックを計測するためのGoogleタグマネージャーの設定

前提知識

この記事だけを読んで理解するには、以下の前提知識が必要となります。

  • GA4とGoogleタグマネージャーの初期設定が終わっている
  • GA4の測定IDがわかる(管理>データストリーム>測定ID)
  • HTMLのclass属性とは何かがわかる

Googleタグマネージャーにおけるタグとトリガーの役割について

Googleタグマネージャーで作成した計測用のタグをGA4に設置することで、計測できるようになります。

トリガーにより、いつの時点でタグを設置するかを決めます。タグとトリガーはセットで成立します。

どのトリガーよりも早く配信されるタグとトリガーを設定する

まず、クリックに限らずいかなる計測を行うためにも、前処理としてどのトリガーよりも早く配信されるタグを配置します。Googleが推奨する内容です。

Googleタグマネージャーでトリガーを作成

Googleタグマネージャーで、「トリガー」>「新規」の順にクリックします。

「トリガーの設定」をクリックします。

「初期化」をクリックします。

任意の名前を入力し、「保存」をクリックします。

これで、ページビュー計測のトリガーよりも早いトリガーが設定できました。

GoogleタグマネージャーでGA4の計測タグを設置

「タグ」>「新規」をクリックします。

任意の名前を入力して「タグの設定」のエリアをクリックします。

「GA4設定」を選択します。「GA4イベント」と間違えないように気を付けてください。

GA4の測定IDを入力、「この設定が読み込まれるときにページビューイベントを送信する」のチェックボックスにチェックを入れます。

続いて、「保存」を押す前に下のエリアにある「トリガー」のエリアをクリックします。

「GA4初期化」をクリックします。

右上の「保存」をクリックします。

これでページビューよりも前に計測できるタグが設置できました。

公開する

まず「プレビュー」をクリックして、動作していることを確認のうえ、「公開」をクリックします。
公開しないと、動作しないので忘れないようにしましょう。

クリックを計測するタグとトリガーを設定する

変数の設定

変数の設定をします。
ここで、「組み込み変数」と「ユーザー定義変数」とがあり、「組み込み変数」はあらかじめ用意されている変数です。

class属性の値でクリックを計測するのは、本当は「Click Classes」でクラス名指定や「Click Element」でCSSセレクタ指定によって可能なのでは?というのが私の理解なのですが、なぜかそれだと執筆時点、計測できません。なのでここでは、ユーザー定義変数を設定する方法を案内します。

「変数」をクリックし、ユーザー定義変数の「新規」をクリックします。

適当に名前をつけて(この場合、「class属性」などが良いでしょう)、「変数の設定」のエリアをクリックします。

「自動イベント変数」をクリックします。

変数タイプを「要素の属性」に、属性名を「class(任意)」として「保存」をクリックします。

トリガーの設定

次に、「クリックされたら」という条件のトリガーを設定します。

「トリガー」>「新規」をクリックします。

任意の名前をつけて(この場合、クリック対象が分かるように例えば「〇〇広告クリック」などが良いでしょう)、「トリガーの設定」エリアをクリックします。

「すべての要素」をクリックします。

「一部のクリック」を選択し、計測したい対象のclass名(class属性の値)を入力します。class名が何かが分からない方は、Chromeの開発ツールを使って調べるやり方がありますので、調べてみてください。

タグの設定

「タグ」>「新規」をクリックします。

任意の名前をつけて、「タグの設定」エリアをクリックします。

「GA4イベント」をクリックします。間違えて「GA4設定」をクリックしないように気を付けてください。

設定タグを「なし – 手動設定したID」にし、GA4の測定IDを入力、イベント名は「+」アイコンをクリックします。

先ほど作成した変数が表示されているはずなので、それをクリックします。

タグの設定ができたので、次に「トリガー」のエリアをクリックします。

先ほど作成した変数が表示されているはずなので、それをクリックします。

「保存」をクリックします。

「公開」をクリックして完了です。

計測できているかの確認

すぐに反映されないことがあるので、しばらく経ってから確認ください。

Googleアナリティクス4(GA4)の計測除外をしてないブラウザから計測することにした対象をクリックし、GA4の「リアルタイム」を確認します。

「イベント数」の欄に、設定したイベント名がクリックした回数分だけ表示されていれば計測できているということになります。

まとめ

Goolgeアナリティクス4(GA4)でクリックされた数をGoogleタグマネージャーを使って計測する方法をご紹介しました。いやー、このページ長いですね。これでも端折ってますし、そして、なぜか組み込み変数だと計測できないという、まだ解明されてない疑問点もあります。この部分もし分かる方いれば問い合わせフォーム使って教えていただけると私が喜びます。

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。