更新日: 2025年8月19日
このセクションでは、GTMでContact Form 7のGA4イベントトラッキングを使用する方法について説明します。Contact Form 7には、GTMのフォームトラッキングをサポートするAPIがあります。
Contact Form 7のトラッキングロジックは次のとおりです。送信が成功すると、addEventListenerを使用してリッスンし、dataLayerを介してデータを送信します。以下のコードはContact Form 7 をサポートしており、Contact Form 7を含むページにデプロイできます。コードは次のとおりです。
Contact Form 7は次のDOMイベントを提供します：
wpcf7invalid— Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.wpcf7spam— Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.wpcf7mailsent— Fires when an Ajax form submission has completed successfully, and mail has been sent.wpcf7mailfailed— Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.wpcf7submit— Fires when an Ajax form submission has completed successfully, regardless of other incidents.
次に、GTMでの設定方法を見てみましょう。
ステップ1：Contact Form 7コードを設定する
GTM で、「タグ」——「新規」——「タグタイプを選択して設定を開始…」——「カスタム HTML」をクリックし、名前を“cHTML – Contact Form 7 Listener”とし、次のように設定します：
トリガー条件は、Contact Form 7 フォームのページのみに設定することも、「すべてのページ」を選択することもできます。
ステップ2：フォーム成功トリガーを設定する
前のステップで、イベントがcf7submissionであることは既に分かっています。
GTMの「トリガー」 ——「新規」 ——「トリガーのタイプを選択して設定を開始…」 ——「カスタム イベント」をクリックし、名前を“Custom Event(Contact Form 7)”とし、以下のように設定します：
ステップ3: 変数を設定する
GTMの[変数] —— [新規] —— [変数タイプを選択して設定を開始… ] —— [データレイヤーの変数]をクリックし、名前を“dlv-formID”とし、以下のように設定します：
ステップ4：コードを設定する
最後に、コードを設定します。
GTM で、「タグ」——「新規」——「タグタイプを選択して設定を開始…」——「カスタム HTML」をクリックし、名前を“GA4 Event—Form Submit Tracking(Contact Form 7)”とし、次のように設定します：
ステップ5：プレビューとデバッグ
最後にテスト：
- まず、何も入力せずに「送信」をクリックします。これではイベントはトリガーされないはずです。
- 次に、何か入力して「送信」をクリックします。イベントが成功すると、イベントがトリガーされるはずです。
デバッグ方法がわからない場合は、こちらをご覧ください。
ステップ6：設定をカスタマイズする
GA4でfrom_idを使用する場合は、GA4のカスタム設定でそれらを登録する必要があります。
