どうもこんにちは。
Web/App/UIデザイナーのサトウです。
今回は、GA4で内部リンクのクリックを計測する方法をお伝えしていきます。
Webサイトの運用業務を請け負っていると、効果測定の一環としてクリック計測を設定する必要が出てくることがあります。
これまではリンク箇所に Googleアナリティクスのスクリプトを仕込むだけで済んでいましたが、GA4ではちょっと面倒な設定が必要になります。
今回、自分自身業務上必要になったので、備忘録も兼ねてご紹介します。
内部リンクのクリック計測はGA4単体で設定する方法とGTM(Googleタグマネージャ)を使って設定する方法があるらしいんですが、GTMを使う方法のほうが僕はわかりやすく感じたので今回はこちらを採用します。
GTM(Googleタグマネージャ)にログインする
![GTMにログイン](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/GTMにログイン.jpg)
アカウントを作成する
アカウントは、GTMを使用する上での最も大きい情報の括りといったところでしょうか。
例えば企業が自社で利用する場合であれば、企業がアカウントになるかもしれませんし、部署がアカウントになるかもしれません。
また、他社に対して使用する場合であれば、各クライアントがアカウントになるかもしれません。
![Google-タグ-マネージャー_アカウント作成1](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_アカウント作成1.png)
アカウント作成時、同時に「コンテナ」というものも作成します。
「コンテナ」は「アカウント」の1階層下に位置する情報の括りといったところです。
企業やクライアントがアカウントだとすると、例えば「コーポレートサイト」「リクルートサイト」「ブランディングサイト」といったWebサイト単位がコンテナになるケースが多いかと思います。
![Google-タグ-マネージャー2](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー2.png)
GTMのタグをWebサイトに設置する
アカウントを作成すると、GTMをWebサイトに設置するためのタグが生成されます。
これをWebサイトの然るべき場所に設置します。
![Google-タグ-マネージャー3](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー3.png)
WordPressで運用されているサイトで「Site Kit by Google」プラグインを導入していれば、テーマファイルを編集することなく簡単な操作で導入できます。
![Site Kit by Google でGTM設定](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/SiteKit-by-Google-でGTM設定.png)
これでGTMを使用する準備は完了です。
GA4の基本設定タグを設定する
タグを設定する
まず何はともあれGA4でさまざまな数値を計測するための基本タグを設定しましょう。
クリック計測のタグはこのあとに設定します。
![Google-タグ-マネージャー_GA4設定1](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_GA4設定1.png)
![Google-タグ-マネージャー_GA4設定2](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_GA4設定2.png)
名前は今回「GA4設定」としました。
![Google-タグ-マネージャー_GA4設定3](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_GA4設定3.png)
![Google-タグ-マネージャー_GA4設定4](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_GA4設定4.png)
![アナリティクス_GA4測定IDを確認](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/アナリティクス_GA4測定IDを確認.png)
![アナリティクス_GA4測定IDをコピー](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/アナリティクス_GA4測定IDをコピー.png)
![Google-タグ-マネージャー_GA4設定5](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_GA4設定5.png)
![Google-タグ-マネージャー_GA4設定6](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_GA4設定6.png)
![Google-タグ-マネージャー_GA4設定7](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_GA4設定7.png)
設定したタグをプレビューする
設定したタグが正常に動作するかどうかプレビューします。
![GA4タグのプレビュー_01](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/プレビュー_01.png)
![GA4タグのプレビュー_02](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/プレビュー_02.png)
![GA4タグのプレビュー_03](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/プレビュー_03.jpg)
![GA4タグのプレビュー_04](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/プレビュー_04.jpg)
また、その右側には「Tags Fired(動作しているタグ)」と「Tags Not Fired(動作していないタグ)」が表示されています。先ほど作ったタグが「Tags Fired」のほうに表示されているはずです。
![GA4タグのプレビュー_05](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/プレビュー_05.jpg)
設定したタグを公開する
設定したタグは「公開」することで初めてWebサイトに設置されます。
タグを設定し、プレビューが済んだら、公開しましょう。
![GA4タグの公開_00](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/公開.png)
![GA4タグの公開_01](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/公開_01.png)
![GA4タグの公開_02](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/公開_02.png)
![GA4タグの公開_03](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/公開_03.png)
内部リンククリック計測用のタグを設定する
変数を追加する
ここまでで説明した基本設定タグ同様、トリガーとタグを設定していきますが、今回はさらに「変数」というものも使用します。
「変数」はプログラミング言語ではお馴染みの、さまざまな値や文字列を格納することができる「箱」のようなものです。
GA4では例えばページタイトルを入れる箱やクリックしたリンクの文字列を入れる箱などを、GA4に指示を出したりGA4に取得させたりするために使用します。
ちょっとピンとこない人も多いかもしれませんが、大丈夫です。
先へ進みましょう。
![内部リンククリック計測_変数を追加_01](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_01.png)
![内部リンククリック計測_変数を追加_02](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_02.png)
![内部リンククリック計測_変数を追加_03](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_03.png)
![内部リンククリック計測_変数を追加_04](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_04.png)
![内部リンククリック計測_変数を追加_05](https://kaisha-yameta.com/wp/wp-content/uploads/2023/05/Google-タグ-マネージャー_05.png)
トリガーを設定する
では続いてトリガーを設定していきます。
![トリガー設定_01](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/トリガー設定_01.png)
![トリガー設定_02](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/トリガー設定_02.png)
![トリガー設定_03](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/トリガー設定_03.png)
<a>タグ以外で作られたメニューの開閉ボタンやinputなどリンク以外のクリックを計測したい場合は「すべての要素」にしてclass名や要素名等で計測対象を指定するといいでしょう。
![トリガー設定_04](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/トリガー設定_04.jpg)
「一部のリンククリック」にチェックを入れ、「Click URL」「含む」で自サイトのドメインを入力することでトリガーを内部リンクに限定します。
外部リンクも計測したい場合はもちろん自サイトのドメインは設定不要です。外部サービスの問い合わせフォームへの遷移やLINE友だち登録画面への遷移も含めて計測したい場合などがそれに当たるでしょう。逆にそれらのクリックだけを計測したい場合には Click URL で対象のURL(全部または一部)を指定したり、任意の class を付けておくなどでトリガーを限定しましょう。
![トリガー設定_05](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/トリガー設定_05.png)
![トリガー設定_06](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/トリガー設定_06.png)
![トリガー設定_07](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/トリガー設定_07.png)
タグを設定する
↑でGA4設定タグを設定したときと同様に内部リンク計測のタグを設定します。
![タグ設定_01](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_01.png)
![タグ設定_02](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_02.png)
![タグ設定_03](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_03.png)
![タグ設定_04](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_04.jpg)
![タグ設定_05](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_05.png)
![タグ設定_06](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_06.png)
![タグ設定_07](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_07.png)
![タグ設定_08](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_08.png)
![タグ設定_09](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_09.png)
タグをプレビューする
タグをプレビューし、正常に動作しているかどうかを確認します。
![タグ設定_10](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_10.png)
![タグ設定_10-2](https://kaisha-yameta.com/wp/wp-content/uploads/2023/08/タグ設定_10-2.png)
タグを公開する
タグが正常に動作していることが確認できたら公開します。
![タグ設定_11](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/タグ設定_11.png)
GA4でイベントの発生数を確認する
GA4のメニュー「レポート」の中に「エンゲージメント」>「イベント」がありますが、今回設定したカスタムイベントはここでは確認できません。
「レポート」ではなく「探索」から確認用画面を作成する必要があります。
では、その画面の作り方を見ていきましょう。
![GA4探索_01](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/GA4探索_01.png)
![GA4探索_02](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/GA4探索_02.png)
![GA4探索_03](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/GA4探索_03.png)
![GA4探索_04](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/GA4探索_04.png)
![GA4探索_05](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/GA4探索_05.png)
![GA4探索_06](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/GA4探索_06.png)
![GA4探索_07](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/GA4探索_07.png)
![GA4探索_08](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/GA4探索_08.png)
![GA4探索_09](https://kaisha-yameta.com/wp/wp-content/uploads/2023/07/GA4探索_09.png)
![GA4探索_10](https://kaisha-yameta.com/wp/wp-content/uploads/2023/08/GA4探索_10.jpg)
![GA4探索_11](https://kaisha-yameta.com/wp/wp-content/uploads/2023/08/GA4探索_11.jpg)
![GA4探索_12](https://kaisha-yameta.com/wp/wp-content/uploads/2023/08/GA4探索_12.png)
さて、大変長くなりましたが、今回はGA4で内部リンクのクリックを計測する方法について書いてみました。
いかがだったでしょうか?
ユニバーサルアナリティクスでは、リンクに計測タグを仕込む手間がありましたが、それさえしてしまえばGoogleアナリティクス側では特別な設定なしで測定することができました。
逆に、Googleタグマネージャ+GA4の計測では、GTMやGA4側での設定が面倒ですが、Webサイトのソースコードにいちいち手を加える必要がありません。
設定の敷居の高ささえクリアできれば、後者のほうが運用は楽になりそうですね。
読んでくださったあなたの参考に少しでもなれば嬉しいです。
それではまた次回。