MENU

【GTM/GA4のみ】Contact Form 7 / Snow Monkey Formsの送信完了をGoogleタグマネージャーとGA4で計測する【サイト側対応不要】

目次

送信完了ページが有る場合

Contact Form 7もSnow Monkey Formsもフォーム送信後に遷移しない（URLが変わらない）仕様ですが、他のプラグインやフィルターフックを利用してカスタマイズすることで送信後にURLの異なる送信完了ページ（いわゆるサンクスページ）に遷移させることができます。
その場合は「ページビュー」トリガーでフォーム送信完了を計測できます。

▼参考

Web改善のレシピ
GA4でサンクスページ到達をコンバージョン（キーイベント）設定する2つの方法 | Web改善のレシピ フォームからの問い合わせをコンバージョンとして設定したい。 サンクスページがあるWebサイトのコンバージョン計測の方法がわからない。 上記のようなお悩みを解決する記…

送信完了ページが無い場合

  • 完了メッセージをトリガーにする

完了画面に固有のテキスト（「ありがとうございました」など）が表示される場合に、それをトリガーにする方法（「DOM要素」変数と「ページビュー – DOM Ready」トリガーまたは「要素の表示」トリガー）があります。
しかしこれはContact Form 7とSnow Monkey Formsではうまく動きませんでした（Ajax（非同期通信）を使用してページを再読み込みせずに表示を更新するフォームであるためと思われます）。

  • クリックトリガー

Web上では「フォームの送信」トリガーやクリックトリガーを使用する方法が散見されますが、これらを試したところ送信成功／失敗にかかわらずボタンクリックの度に発火してしまうので、実際に送信が完了した回数を正しく計測できませんでした。
アナリティクス拡張計測機能の「フォームの操作」を有効にすると自動収集されるform_submitも同様です。／(^o^)＼ﾅﾝﾃｺｯﾀ

ではどうするか…

  • プラグインのDOMイベントを利用

Contact Form 7、Snow Monkey Formsには、特定のフォーム操作の度に発生するDOMイベントが用意されており、それらの中にフォーム送信完了時に発生するDOMイベントがあリます。
それをキャッチしてタグマネージャーに受け渡し、最終的にGA4イベントとしてフォーム送信完了が記録される形で利用します。

プラグイン使用するDOMイベント　発生条件
Contact Form 7wpcf7mailsentフォーム送信が完了し、またメールの送信も行われた場合に発生する。
Snow Monkey Formssmf.complete送信ボタンを押して送信が完了したときに発生する。

Googleタグマネージャーでの設定手順

STEP
カスタムHTMLタグとトリガー
  1. タグを新規作成します。

プラグインのDOMイベントをタグマネージャーに受け渡すコードを配信するタグです。
フォーム送信が完了しDOMイベントwpcf7mailsentが起きたら、データレイヤーイベントcf7submission（変更している場合はその文字列）を発生させます。

タグ名：任意
タグの種類：カスタムHTML
HTML：下記のコードを入力

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

“event” : “cf7submission”,のcf7submissionの部分は変更可。

  1. ①のタグのトリガーを新規作成します。

フォームが表示されたら発火させるトリガーです。（ページビュー：すべてのページビューでも問題ありません。）

要素の表示トリガー

トリガー名：任意
トリガーのタイプ：要素の表示
選択方法：CSSセレクタ
要素セレクタ：下記のテキストを入力

.wpcf7-form
STEP
変数（不要なら省略可）
  • 単にフォームが送信された回数だけを計測すればよく、フォームIDや送信内容を利用する必要がない場合は STEP 2 を飛ばして STEP 3 に進んでください。

フォームから送信されたデータを抽出してGA4で利用するには、ユーザー定義変数を作成します。

ここでタグマネージャーのプレビューでフォームを送信してみてください。
正常に動作するとデバッグ画面左側にcf7submissionイベント（変更している場合はその文字列）が表示されます。そのイベントをクリックし、「データレイヤー」タブに移動すると、フォームから取得したデータが表示されています。

この例では formId の値は単一、response の値は配列（複数のオブジェクトを含む）です。

変数（変数のタイプ：データレイヤーの変数）を新規作成します。

「データレイヤーの変数名」は、取得したい項目を定義する文字列にする必要があります。
値が単一の場合は親キー（例：formId）を、配列の場合は親キー、index※、オブジェクトのキーの3つを .（ピリオド）で繋いだ文字列（例：response.2.value）を入力します。

  • indexは0から始まることに注意。

例：フォームIDを取得する変数

変数名：任意
変数のタイプ：データレイヤーの変数
データレイヤーの変数名：下記のテキストを入力

formId
  • 大文字小文字が区別されることに注意。formId は I だけが大文字。

フォームIDを取得すると、複数のフォームを使っている場合の判別に利用できます。

例：題名を取得する変数

変数名：任意
変数のタイプ：データレイヤーの変数
データレイヤーの変数名：下記のテキストを入力

response.2.value

response は値が配列なのでこの形式で入力します。
この例で題名を取得するにはindexの数字を2にします。

氏名やメールアドレスなど個人を特定できる項目は、指定しても送信されず、GA4での値の表示が (redacted) になります。

再度プレビューでテストしてみてください。
正常に動作するとcf7submissionイベントの「変数」タブで変数と値が確認できます。

STEP
GA4イベントタグとトリガー

GA4のGoogleタグは既に作成済みであるものとして説明します。

  • タグを新規作成します。

タグ名：任意
タグの種類：Google アナリティクス: GA4イベント
測定ID：Googleタグの測定IDを入力
イベント名：任意
イベントパラメータ：任意（この例の設定は下記の通り）

イベントパラメータ（任意）値（STEP 2で作成した変数を選択）
form_id_cf7{{UserDefined_FormID_CF7}}
response_subject_cf7{{UserDefined_Response_Subject_CF7}}
  1. ①のタグのトリガーを新規作成します。

STEP 1のカスタムHTMLタグのコードによりデータレイヤーイベントcf7submission（変更している場合はその文字列）が発生したら発火させるトリガーです。

トリガー名：任意
トリガーのタイプ：カスタムイベント
イベント名：下記のテキスト（STEP 1で変更している場合はその文字列）を入力

cf7submission

GA4での設定手順（不要なら省略可）

  • GA4イベントタグにイベントパラメータを設定していない、キーイベント（コンバージョン）を集計する必要がないなどの場合はこの手順を省略できます。

タグマネージャーのGA4イベントタグに設定したイベントパラメータは、そのままではGA4のレポート(または探索)に表示されません。表示されるようにするためにはカスタム定義として登録する必要があります。

カスタムディメンション

「管理」>「データの表示」>「カスタム定義」に移動
「カスタムディメンションを作成」ボタンをクリック

ディメンション名：任意
範囲：イベント
イベント パラメータ：タグマネージャーのGA4イベントタグに設定したイベントパラメータ (今回の例では form_id_cf7／response_subject_cf7 または form_id_smf／response_message_smf)

キーイベント

タグマネージャーのGA4イベントタグのイベントをキーイベントに設定します。

「管理」>「データの表示」>「イベント」に移動
「最近のイベント」タブに移動
該当のイベント名の横にあるスターを選択

ナレッジベース
タグマネージャー アナリティクス
目次