現象
フォームの入力画面において、ボタンをタップするとwindow.confirmダイアログが一瞬表示されたのちに消える。
→ダイアログのOKボタンでformのPOST送信処理を実行しているので送信できない!
確認した端末:Android(6,7,8)版chrome(ver77)。
※iOS版は未確認。
Android版chrome(ver76)では発生しませんでした。
原因はFacebook Pixel
こちらの記事と同じ条件で発生しました。
Facebook Pixel CodeとGoogle Chrome75の相性が良くない件について
ボタンをクリックした時にFacebook PixelのPOSTが悪さをしています。
Facebook Pixelとは
Facebook Pixelはページ内のどのjsが呼び出しているのか?
ページ内の管理担当外のどこかに埋め込まれた<script>
タグが怪しいのでChrome Developer Toolsを使ってつきとめます。
マーケティング担当領域の計測関連のjsが呼び出していました。
1. [Network]パネルを開き、左のFilterとある入力欄にfbevents.js
と入力
2. Initiator列を見る。(fbevents.jsの呼び出し元が表示されている)
3. 呼び出し元のjsがHTMLの<script src="~.js">
に記述されていなければ、更にそのjsのInitiatorを確認
※ページのソース内の<script src="~.js">
にたどり着くまで繰り返す
対処方法
- そのページだけfbevents.jsを呼び出さないように修正する
- Facebook Pixelのコードをカスタマイズする。(特定のボタンだけイベント追加させるなど)
対応方法参照:Facebook ピクセル のコード埋め込みについてメモ Facebook Pixel Advanced - confirmのOKボタンを押した後のPOST送信処理を修正する
対応方法参照:Facebook Pixel CodeとGoogle Chrome75の相性が良くない件について
参考
この記事は以下の情報を参考にしました。大変お世話になりました。
- Facebook Pixel CodeとGoogle Chrome75の相性が良くない件について
- Facebook ピクセル のコード埋め込みについてメモ