• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / [GA4] Elementorでクリックイベントを設定する方法

[GA4] Elementorでクリックイベントを設定する方法

池田祐太郎 | 2021年10月7日 公開 コメントを書く

特定のボタンを押した時にアナリティクスにクリック数の測定をしたい、といった要望があがることがあります。通常のサイトやWordPressサイトであればすでに方法が紹介されていますが、Elementorで構築した場合やGoogleアナリティクスの新しいバージョンのGA4での方法はあまりありませんでした。

そこで、Elementorを使って作られたWordPressサイトに対して、GoogleアナリティクスのGA4でのイベントトラッキングの設定方法をご紹介します。

目次

  • 1 対象のボタンにidを設定
  • 2 クリックイベント情報を送信するJavaScriptを記述
  • 3 Googleアナリティクスのリアルタイムで確認
  • 4 GA4でのGoogleアナリティクスでの確認
  • 5 クリックした人が広告やSNS等どこを経由してやってきたのか把握する

対象のボタンにidを設定

クリック数を測定するイベントトラッキングを設定します。

クリック数を測定したいボタンに対して、Elementorからidを設定します。idを設定することで、後で記述するJavaScriptから「どのボタンをクリックしたか」を判断します。

例としてElementorで「ここをクリック」というボタンを作成しました。

対象のボタン箇所を選択した状態で、Elementorのウィジェット編集部分から「高度な設定」タブを選択し、「CSS ID」に任意の名称を入力します。固有のidのため、他と重複しないようにします。

クリックイベント情報を送信するJavaScriptを記述

ElementorのHTMLウィジェットを使って、Googleアナリティクスへカスタムイベントとして情報を送信するためのJavaScriptを記述します。

ボタンのすぐ後ろにHTMLウィジェットをドラッグし要素を配置して、HTMLの中に以下のコードを書きます。

<script>
document.addEventListener("DOMContentLoaded", function(event) {
	jQuery('#custom-button a').click(function(){
		var href = jQuery(this).attr('href');
		var text = jQuery(this).text();
		if( jQuery(this).find('img').length && text == "" ){
			text = jQuery(this).find('img').attr('alt');
		}
		if (href != null ) {
			gtag('event','CustomButtonClick', {
				'eventCategory': location.pathname,
				'eventLabel': '「'+text+'」 クリック',
				'value': 500
			});
		}
	});
});
</script>

3行目には先程設定したid名を設定します。

6-8行目にかかれているif文は画像が含まれていた場合に画像に設定されているalt属性からテキストを取得するためのコードです。画像の設定をしないようであれば削除しても構いません。

10-14行目のコードがGoogleアナリティクス GA4へのトラッキングコードの送信情報です。

  • event: カスタムイベント名を設定します。ここで設定した名称がアナリティクス側に表示されます。アナリティクス側で用意されているイベント名と重複しないようにします。(参照 自動的に収集されるイベント、推奨イベント)
  • eventCategory: ページのパスが送信されます。
  • eventLabel: 記載してあるテキスト情報が送信されます。通常は設定されたテキストが自動的に取得されているはずです。
  • value: クリック毎に送信する任意の価値を設定します。例では1クリックの価値を500円としました。

これで保存・更新して確認します。上記はJavaScriptのため、HTMLウィジェットで設定してもフロント側には何も表示されません。

Googleアナリティクスのリアルタイムで確認

早速アナリティクスで確認しましょう。

サイト全体にGoogleアナリティクスのトラッキングタグが設定されていることを確認したら、ブラウザのシークレットモード等の状態で対象ページを開き、設定したボタンをクリックします。すぐにGoogleアナリティクスに送信されるので、アナリティクスを開いて「リアルタイム」から確認します。

イベントが正しくGoogleアナリティクスへ送信されていることが確認できました。

GA4でのGoogleアナリティクスでの確認

無事設定ができたら、翌日以降にアナリティクスでレポートを確認してみましょう。以下はサンプルとして実際に計測しているカスタムイベントのデータです。

■閲覧方法

  1. アナリティクスにログイン
  2. レポート→エンゲージメント→イベントをクリックし、画面内に設定したカスタムイベント名が表示されているのでクリック
  3. カスタムイベントの詳細画面に遷移し、各種データが閲覧できる(画像参照)
  • イベント数: 全クリック数
  • ユーザーの合計数: ユーザーあたりでクリックした数
  • ユーザーあたりのイベント数: イベント数÷ユーザーの合計数
  • イベントの値: valueで設定した1クリック毎の数字の合計

クリックした人が広告やSNS等どこを経由してやってきたのか把握する

ちなみに、クリックした人がどの参照元からやってきたのかもアナリティクスで確認できます。

  1. レポート→エンゲージメント→イベントをクリック
  2. 「検索」部分にカスタムイベントの名称を入力→該当するカスタムだけが表示される
  3. 「イベント名」の横にあるプラスボタンを押して「セッション獲得」→「セッション参照元またはメディア」を選択

これで参照元別にクリック数毎の測定ができます。

以上、Elementorサイトに対してGA4のカスタムイベントの設定方法のご紹介でした。

これにより、資料請求ボタンのクリック数やダウンロード数等、ウェブサイトの目的に合ったカスタマイズされたクリックイベントが実装でき、アナリティクス側で確認できるようになりました。

メールコンサルティング
WordPress保守管理サービス

Filed Under: TIPS 関連タグ:アクセス解析

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

WordPress の admin-ajax.php のインデックスエラーはどうするのが正解なのか
2022年12月6日
タグ: アクセス解析
カテゴリー: WordPress
サーチコンソールの登録方法
2021年6月24日
タグ: アクセス解析
カテゴリー: TIPS
[2021年版]Search Consoleの共有設定の方法
2015年6月18日
タグ: アクセス解析
カテゴリー: TIPS

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.