Contact Form7でGoogleアナリティクスのイベントトラッキングを設定する方法

WordPressでお問い合わせページを簡単に作成できるプラグインContact Form7。このContact Form7で作成した送信ボタンが押されたことをGoogleアナリティクスのイベントトラッキングでデータを取得できるようにします。

まず「Contact Form7」をインストールする必要があります。
管理コンソールから「プラグイン→新規追加」でContact Form7を検索してインストールしてください。

Contact Form7プラグインで作成したメール送信フォームでは

　
［submit "送信"］

のように送信ボタンは実装されています。
このため直接リンクのクリックイベントを追加しては書くことができません。

そこで今回は、Javascriptを使って「EventListner」を追加して対応することにしまし。

Contact Form 7はメール送信に成功した場合にwpcf7mailsentのカスタムDOMイベントを発生させてくれます。
なのでそのタイミングでイベントをフックし、Googleアナリティクスのイベントトラッキングを設定します。
フックするのは

document.addEventListener( 'wpcf7mailsent', function( event ) {
    ga( 'send', 'event', 'Contact Form', 'submit' );
}, false );

というコードでこれをheader.phpに設定してきます。

これでGoogleアナリティクスのイベントトラッキングの準備は完了です。

あとはGoogleアナリティクスでイベントを見ると実績があがっていると思います。

まとめ

難しく思えるかもしれませんが、手順を追えばそれほど難しくないので、解析できるように設定してみましょう。

以上、Contact Form7でGoogleアナリティクスのイベントトラッキングを設定する方法でした。