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

WordPressの基本

WordPressサイトにお問い合わせページを設定する超スタンダードプラグインの「Contact Form7」。

今回はこの「Contact Form7」で作ったメール送信ボタンにGoogleアナリティクスのイベントトラッキングを設定する方法をまとめておきます。

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

まず「Contact Form7」をインストールする必要があります。

その方法は下記を参照してください。
WordPressプラグインお問い合わせページを簡単に作れる「Contact Form 7」プラグイン

Googleアナリティクスのイベントトラッキングを設定

Contact Form7では

 
[submit "送信"]
 

みないになっているので直接リンクのクリックイベント書けません。

そこで、Javascriptを使って「EventListner」をひとつ追加します。

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

フックするのは

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

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

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

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

まとめ

今回の記事は
参考 フォーム送信を Google Analytics でトラッキングするContact Form 7 を参考に実際に設定してみました。

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