サイトのトラフィックを Google Analytics で監視しているなら、同様にフォーム送信も追跡したいと思うでしょう。この記事では Google Analytics 4 (GA4) でフォーム送信イベントを追跡する方法について解説します。

注意: この記事では Google Analytics の基本的な使い方に関する説明は行いません。まだ Google Analytics についてよく知らない方は先に Google の資料をご参照ください。Google の Site Kit プラグインを使えば GA4 の導入と WordPress サイトでのセットアップを簡単に行うことができるでしょう。

イベント追跡

Google Analytics にイベントを送信するには gtag() 関数をコールします:

gtag( 'event', 'event_action', {} );

メール送信が成功した場合にフォーム送信イベントを追跡するには、wpcf7mailsent カスタム DOM イベントを利用します:

document.addEventListener( 'wpcf7mailsent', function ( event ) {
    gtag( 'event', 'wpcf7_submission', {
        'event_category': event.detail.contactFormId,
        'event_label': event.detail.unitTag
    } );
}, false );

JavaScript を HTML に挿入する

次のステップとして、上記の JavaScript コードをフロントエンドページの HTML ソース中の適切な位置に挿入します。

これにはいくつかの方法が考えられます。その全てを説明することはしませんが、代わりに wp_footer アクションフックを利用してページのフッター領域に上記の JavaScript コードを含んだ script 要素を挿入するコード例を示します:

add_action( 'wp_footer', function () {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function ( event ) {
    gtag( 'event', 'wpcf7_submission', {
        'event_category': event.detail.contactFormId,
        'event_label': event.detail.unitTag
    } );
}, false );
</script>
<?php
}, 10, 0 );

これをアクティブなテーマの functions.php ファイルに埋め込んでみましょう。すべてが正しくセットアップされていれば、イベント発生から数時間のうちに wpcf7_submission イベントが GA4 のコンソールに現れるでしょう。