Contact Form 7 のメール送信フォームは、
① 送信ボタンクリック
② AjaxでフォームデータをPOSTしてJSON受信
③ 「送信されました」をDOMツリーに動的投入
という動作なので、そのままだとフォームの送信記録は Google Analytics に何も残らない。（フォームを閲覧した記録のみ）
送信完了の記録を取るために、Contact Form 7 の送信成功時に仮想ページビューを送ったりするが、
on_sent_ok: "ga('send','pageview',{'page':'/contact/complete', 'title':'お問い合わせ送信完了'});"Google Tag Manager から Google Analytics を使っていると、ga関数がそのままは使えず動かない。（第一引数にGTMの識別子をつければいいらしい？けど公式な方法ではない？）
GTMを使う場合は、以下の手順でできた。
まずGAとGTMは既に使っているとして・・、
WPサイトの全ページにGTMトラッキングコードが出るようになっている状態から、
GTMで新規タグを作成する。
フィールドで仮想ページビューのパスとタイトルを入力して、
| フィールド名 | 値 |
|---|---|
| page | /contact/complete |
| title | お問い合わせ送信完了 |
配信するタイミングで「その他」をクリック。
新規トリガーを作成。
カスタムイベントで、適当なイベント名（識別子）を決める。
タグを配信するトリガーに、新しく作ったトリガーのみセットしてタグを作成。
タグ増えた。
次に、Contact Form 7 で作ったフォームの「その他の設定」で、送信完了時に先ほどのGTMトリガーのイベント名を発生させる。
on_sent_ok: "dataLayer.push({ 'event': 'ContactFormSentOK' });"
設定完了。
そしてそのフォームから送信してみると、、、
GAに送信完了ページビューｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
ちなみに、もし on_sent_ok が使えない場合はどうするか？
残念ながら少々無理やりな感じで代替機能を実装するしかないかなぁ・・。
- 送信フォームページにGTMから独自<script>タグを出力。
- ページのDOMツリーに、クラス
wpcf7-mail-sent-okを持つ要素が出現したことを検知するJavaScriptコードを自力実装。- setInterval や MutationObserver で監視するか、
- jQuery.addClass を差し替えフックしてクラスの追加を検知するか、
- Contact Form 7 のJSを改造してクラス追加を検知するか、
- あるいは・・・
- そのタイミングが送信完了なので、上記の
dataLayer.push(...)を実行する。