Contact Form 7（プラグイン） にgoogleタグマネジャーのトリガーを設定する

1. Contact Form 7にGoogleタグマネージャーのトリガーを設定する方法

Contact Form 7 (CF7) は、フォーム送信時に独自のJavaScriptイベントを発火させるため、GTMで簡単にトリガーを設定できます。

ステップ1: Contact Form 7のフォーム送信イベントを把握する

CF7は、フォーム送信成功時にwpcf7mailsentというカスタムDOMイベントを発火させます。このイベントをGTMでリッスンします。

ステップ2: Googleタグマネージャーでトリガーを作成する

1. GTMの管理画面にログインします。
2. 「トリガー」セクションに移動し、新しいトリガーを作成します。
3. トリガータイプとして「カスタムイベント」を選択します。
4. イベント名にwpcf7mailsentと入力します。
5. 「このトリガーの発生場所」は「すべてのカスタムイベント」のままで問題ありません。
6. トリガーに適切な名前（例: CF7_Form_Submit_Success）を付けて保存します。

ステップ3: Googleタグマネージャーでタグを作成する（例: Googleアナリティクス4のイベントタグ）

フォーム送信の成功をGA4に送信する場合を例にします。

1. GTMの「タグ」セクションに移動し、新しいタグを作成します。
2. タグタイプとして「Googleアナリティクス：GA4 イベント」を選択します。
3. 設定タグには、お使いのGA4設定タグを選択します。
4. イベント名には、GA4で計測したいイベント名（例: form_submit や contact_form_success）を入力します。
5. 必要に応じて、イベントパラメータを追加します（例: form_nameをContact Form 7とする）。
6. このタグに、先ほど作成したCF7_Form_Submit_Successトリガーをアタッチします。
7. タグに適切な名前（例: GA4 - Event - CF7 Form Submit）を付けて保存します。

ステップ4: プレビューモードでテストする

GTMのプレビューモードを使用して、フォーム送信が正しく計測されるかを確認します。フォームを送信した際に、GTMのデバッグ画面で設定したイベントが発火していることを確認できれば成功です。

【PR】 抜群に上位表示されやすい WP テーマ 【ザ・トール】 は、内部構造の最適化（HTML5+CSS3）、高速表示技術:（AMP・PWA、Gzip圧縮・ブラウザキャッシュ、画像遅延読み込み・CSS非同期読）、SEO設定機能、SEO系プラグインが不要とSEOに必要な機能が実装されています。

googleタグマネジャーのトリガーとは

Google タグマネージャー（GTM）におけるトリガーとは、設定したタグをいつ、どのような条件で発動させるかを定義するものです。例えるなら、トリガーはタグを「発射」するための引き金のような役割を果たします。

タグは、ウェブサイトやモバイルアプリ上で特定のイベントが発生したときに実行されます。その「特定のイベント」を監視し、イベントが検出された際にタグを実行するように指示するのがトリガーです。

トリガーの仕組み

トリガーの基本的な仕組みは以下の通りです。

1. イベントの発生: ユーザーがウェブサイト上で何らかのアクション（例：ページを閲覧する、ボタンをクリックする、フォームを送信する）を起こします。
2. GTMによるイベントの検知: Google タグマネージャーがこれらのイベントを監視し、検知します。
3. トリガー条件との照合: 検知されたイベントが、設定されているいずれかのトリガーの条件と一致するかどうかを確認します。
4. タグの配信（発火）: 条件が一致した場合、そのトリガーに紐付けられたタグが配信（実行）されます。

主なトリガーの種類

GTMには、様々な種類のイベントに対応するためのトリガーが用意されています。主なトリガーには以下のようなものがあります。

• ページビュー:
  • 同意の初期化: 同意設定に関するタグを最優先で発動させるためのトリガー。
  • 初期化: 他のトリガーよりも早く発動させたいタグに利用。
  • ページビュー: ページが読み込まれた直後に発動。ウェブサイトへのアクセスを計測する際によく使われます。
  • DOM Ready: ページのHTML構造が完全に読み込まれ、Document Object Model (DOM) が解析できる状態になった後に発動。
  • ウィンドウの読み込み: ページ内のすべての要素（画像やスクリプトなどを含む）が完全に読み込まれた後に発動。
• クリック:
  • すべての要素: ページ上の任意の要素がクリックされたときに発動。
  • 特定のリンクのみ: 特定のリンク（<a>タグ）がクリックされたときに発動。
• ユーザーエンゲージメント:
  • 要素の表示: 特定のHTML要素がユーザーの画面に表示されたときに発動。スクロールによる読了率の計測などによく利用されます。
  • フォームの送信: フォームが送信されたときに発動。コンバージョン計測に重要です。
  • スクロール距離: ユーザーがページの特定の割合（例：25%, 50%, 75%, 100%）までスクロールしたときに発動。
  • YouTube動画: 埋め込まれたYouTube動画の再生、一時停止、完了などのイベントに基づいて発動。
• その他:
  • 履歴の変更: URLの一部（ハッシュタグなど）が変更された場合や、HTML5 pushState APIが使用された場合に発動。
  • タイマー: 一定の時間間隔でイベントを送信。ユーザーがページに滞在した時間を測定する場合などに使用されます。
  • カスタムイベント: 独自のイベント名を定義して発動。開発者と連携して、特定のアプリケーション内の動作を追跡する場合などに利用されます。

トリガーの重要性

トリガーは、Google タグマネージャーでタグを効果的に管理するために不可欠です。適切なトリガーを設定することで、必要なタイミングで正確なデータを収集し、不必要なタグの発火を防ぎ、ウェブサイトのパフォーマンスを最適化できます。