備忘：Contact Form7の送信をGoogleTagMangerで感知できない時の対処法

ウェブサイト制作系の話題です。ええ、当事務所はウェブサイトもDIYで設計製作しております。DIYについて推奨する云々は略。

ワードプレスの優秀なフォームプラグインContact Form 7でお客様のアクションを感知し、Google広告(adwords)やGoogleAnalyticsで計測するためにGTM（GoogleTagManager）を間に挟んで云々するのですが、うまくいかなくて丸一日悩んでいた問題の解決方法を備忘録として残します。

一連の流れは以下のサイト様を参考にしております。

Google広告でCF7のコンバージョンを設定する方法

GA4 & GTM で Contact Form 7 の複数フォームをコンバージョン測定する方法

問題とは、上記のサイト様の通りに設定しても、どうもフォーム送信をaddEventListener()が感知していないように見えることです。したがってGTMでプレビューしてもcf7submissionが出てこないのです。

検証のためにタグに設定していたカスタムHTMLは以下の通り。

<script>
    alert("Hello World");
    document.addEventListener("wpcf7mailsent", function (event) {
    alert("Hello World2");
    window.dataLayer.push({
      "event": "cf7submission"
    });
  }); 
</script>

2行目のalert(“Hello World”);はページを開いた時点で実行されるのですが、addEventlistener内に組み入れたalert(“Hello World2”);が実行されませんでした。そこで、以下のContact Form7の作者サイトで原因を調べていたところ、フォームのjavascriptがうまく機能していない可能性に気付きました。

DOM イベントが機能しません。

どうして私のコンタクトフォームは AJAX っぽく動かないのか?

原因を調べてみると、どうもテンプレートをいじった時にwp_footer();というWordPressの基本関数を消してしまっていたようでした。

wp_head();とwp_footer();とはいったい何なのか

こちらのサイトを参考にwp_footer();をもとに戻せば、問題は解決しました。