Googleサイトで自社製品のランディングページを作成する際、HTMLリンクを用いたボタンを設置しても、GA4でクリックイベントが発火せず計測できないことがあります。この記事では、HTMLボタンのデザインを崩さずにGA4でクリックを正しく計測する方法を紹介します。
GA4でのイベント計測の仕組み
GA4では、ユーザーのアクションをトラッキングするためにイベントとして計測します。通常、リンククリックやボタン押下は自動で計測されますが、GoogleサイトやカスタムHTMLでは自動計測が正しく機能しない場合があります。
そのため、手動でイベント送信のコードを追加することが推奨されます。
HTMLボタンにGA4イベントを追加する方法
例えば、楽天への購入ボタンにクリックイベントを追加するには、onclick属性を利用します。次のように記述します。
<a href="楽天の商品ページ/?utm_source=googlesite" target="_blank" onclick="gtag('event', 'click', { 'event_category': 'button', 'event_label': '楽天購入' });" style="flex:1;text-align:center;padding:12px 5px;background:#BF0000;color:#fff;text-decoration:none;border-radius:50px;font-weight:bold;font-size:13px;">楽天で購入</a>
このコードでは、ボタン押下時にGA4へイベント送信され、計測できるようになります。
複数ボタンのイベント管理
複数の購入ボタンがある場合、それぞれにonclickでイベントを設定します。
イベント名、カテゴリ、ラベルを分けることで、どのボタンからのクリックかを詳細に分析できます。
例えば、Yahoo!購入ボタンでは'event_label':'Yahoo購入'と設定します。
Googleタグマネージャーを活用する方法
コードを直接編集せずに計測したい場合は、Googleタグマネージャーを利用する方法もあります。
タグマネージャーで「クリック」トリガーを作成し、対象のリンクに発火条件を設定することで、GA4に送信可能です。
この方法だと、ボタンデザインやHTMLを変更せずに計測が可能となります。
計測結果の確認方法
GA4のリアルタイムレポートで、クリックイベントが発火しているか確認できます。
イベント名やラベルが正しく表示されていれば設定完了です。
まとめ
GoogleサイトでHTMLリンクを使用しつつ、GA4でクリック計測を行うには、onclickでイベント送信する方法とGoogleタグマネージャーを活用する方法があります。
これにより、ボタンデザインを維持しながら正確にデータ収集が可能となり、広告やLPの効果測定を効率化できます。
コメント