【Googleタグマネージャー】ボタンのHTML要素ID属性からイベント設定

クリック対象にID付与する理由

Googleタグマネージャーでボタンのクリック計測するとき、IDを付与することにより正確に計測が可能です

WordPress編集画面でボタンにIDを付与する

<div class="wp-block-snow-monkey-blocks-buttons smb-buttons" id="cta_btn_a"><!-- wp:snow-monkey-blocks/btn -->
<div class="wp-block-snow-monkey-blocks-btn smb-btn-wrapper"><a class="smb-btn" href=""><span class="smb-btn__label">Button-A</span></a></div>
<!-- /wp:snow-monkey-blocks/btn --></div>

Googleタグマネージャーで設定する

変数の設定

▼変数から「Click Element」を選択

※「Click Element」…HTMLの要素を取得できます

タグの設定

▼下記の通り設定

• 名前：ボタンAクリック
• タグの種類：Googleアナリティクス：GA4イベント
• 測定ID：GA4測定ID
• イベント名：cta_click
• イベントパラメータ
  （ボタンのIDごとにクリック数をカウントできるように設定）
  • cta_id (cta_btn_a)
  • cta_click_count (1)

トリガーの設定

• 名前：ボタンAクリック
• トリガーのタイプ：クリック – すべての要素
• このトリガーの発生場所：一部のクリック
• イベント発生時にすべての条件がtrueの場合にこのトリガーを配置します：
  Click Element / CSS セレクタに一致する / #cta_btn_a*
  （※上記ボタンAのHTMLコードを参照）

入力したら右上の保存をクリック

プレビューで確認

上記ボタンAをクリックするとぼたんAクリックがTags Firedに移動することが確認できます

GAで確認

「レポート」の「リアルタイム」の「イベント」のカードでcta_clickを確認できます

さらにcta_clickを開くと設定した各パラメータの表示も確認できます

カスタム定義の設定

▼カスタムディメンションの設定でGTAのイベントパラメータからコピーして貼り付ける

▼同様にカスタム指標の設定も下記の通りする

※即手単位は「標準」