Cherry Pie Web > ブログ > 技術記事 > Contact Form 7 で送信完了にならないのは、Google Analytics by Yoast のせい？

Contact Form 7 で送信完了にならないのは、Google Analytics by Yoast のせい？

2016年2月3日

—

先日、WordPressでサイト構築してから何年にもなるお客様から、「メールフォームから同じ内容のメールが何通も送られてくるので調べてほしい」と連絡がありました。
お客様によれば「メールフォームで送信ボタンを押しても送信完了にならないので、何度も送信ボタンを押すのではないか？」とのことでした。

1 問題の個所はすぐに特定できたのですが・・・
2 Google Analytics の設定をプラグインに任せている場合は要注意！

問題の個所はすぐに特定できたのですが・・・

お客様のサイトのメールフォームには「Contact Form 7」を採用しています。

まず、テスト環境で試してみましたが、テスト環境では全く問題ありませんでした。
そこでお客様に了解をとって本番環境で試してみると、送信ボタンを押した後、ボタンの横でローディングアイコンがくるくる回って、そのまま止まってしまいました。

テスト環境と本番環境で違う部分は、「その他の設定」での Google Analytics のイベントトラッキングの有無です。
Contact Form 7 で Google Analytics をトラッキングする方法は下記のページに書かれています。

フォーム送信を Google Analytics でトラッキングする | Contact Form 7 [日本語]

ここで注意しなければならないのは、このページに書かれているサンプルは従来の非同期トラッキングコードを使用している場合のものなので、ユニバーサルアナリティックスにしている場合は、ユニバーサルアナリティックス用のものを使用しなければならないという事です。

従来の非同期トラッキングコード用

on_sent_ok: "_gaq.push(['_trackEvent', 'Contact Form', 'Submit']);"

ユニバーサルアナリティックス用

on_sent_ok: "ga('send', 'event', 'Contact Form', 'Submit');"

しかし、問題はここからです。

私は、Google Analytics をユニバーサルトラッキングに変更した際に「その他の設定」をユニバーサルトラッキング用のものに変更していました。
そして、テストを行い、問題なく動作することも確認していました。
それがどうして、今になって動作しなくなっているのでしょうか？

Google Analytics の設定をプラグインに任せている場合は要注意！

WordPressで Google Analytics の設定をプラグインで行っている方も多いと思います。
Googleはよく仕様が変わりますので、古いプラグインを使っていると問題が生じます。
公式フォーラムにも下記のようなトピックが掲載されています。
プラグインが古いために古いトラッキングコードが吐き出されており、「その他の設定」に書いた関数が見つからなくてエラーになっているとの回答です。

WordPress › フォーラム » Contact Form 7フォーム送信をトラッキングしたら送信完了が表示されません

問題が起きたサイトでは、以前は「WP Total Hacks」プラグインの入力欄に自分でコードを書いていたのですが、「Google Analytics by Yoast」プラグインに変更していました。
このプラグインはしっかりアップデートされていますし、プラグインの設定でも「Enable Universal tracking:」にチェックしています。
だから問題ないと思っていたのですが、念のため「Google Analytics by Yoast」プラグインが吐き出しているコードを見てみると・・・

__gaTracker('create', 'UA-xxxxxxxx-1', 'auto');
__gaTracker('set', 'forceSSL', true);
__gaTracker('require', 'displayfeatures');
__gaTracker('require', 'linkid', 'linkid.js');
__gaTracker('send','pageview');

なんと、Google Analytics のトラッキングコードの、gaとなっているはずのところがすべて、__gaTrackerになっていたのです。
gaという関数が設定されていないのでエラーになってしまうわけですね。
（コンフリクトを避けるために、わざわざ変えているようです）

解決策としては、Contact Form 7 の「その他の設定」で、gaを__gaTrackerに置換すればOKです。

on_sent_ok: "__gaTracker('send', 'event', 'Contact Form', 'Submit');"

他の方法としては、「Google Analytics by Yoast」プラグインの「Advanced」設定にある「カスタムコード」欄に下記のコードを入れると、gaのままでも動作します。
こちらのほうが、Contact Form 7 以外に多くの箇所でイベントトラッキングを行っている場合にも有効ですのでおススメです。

__gaTracker( function() {
 window.ga = __gaTracker;
});

（参考）Yoast Google Analytics Reassign ‘__gaTracker’ Tracker to ‘ga’

WordPressは豊富なプラグインによってコードを触らなくてもいろんな設定ができるのが魅力ですが、一見関係なさそうなプラグイン同士が影響しあうことがあるので、常に動作確認することが必要ですね。

プラグイン作者の方に責任は無いので、使う側が注意していかなければならないと思います。

この記事を書いた人

川井昌彦: FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数