Tracking Form Submission in GA4 via GTM (Gatsby.js)

Objective:

Track successful footer form submissions on all pages of a Gatsby.js website and send the event generate_lead to Google Analytics 4 (GA4) using Google Tag Manager (GTM).

Step 1: Push a Custom Event to dataLayer on Form Submit

Update your form handling logic in Gatsby. After the form is successfully submitted (e.g. after a fetch or axios call completes), add the following code:

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

  event: “generate_lead”,

  form_location: “footer”

});

✅ This manually pushes a custom event (generate_lead) to GTM after the form is successfully submitted.

✅ The form_location parameter helps identify that the form was submitted from the footer.

Step 2: Create a Custom Event Trigger in GTM

1. Go to your GTM container → Triggers
2. Click New
3. Name it: Custom – generate_lead
4. Choose Trigger Type → Custom Event
5. Event name: generate_lead
6. Select “All Custom Events”
7. Save the trigger

Step 3: Create a GA4 Event Tag

1. Go to Tags → Click New
2. Name it: GA4 – generate_lead
3. Tag Configuration → Select GA4 Event
4. Under Configuration Tag, select your GA4 config tag (or create one with your GA4 Measurement ID)
5. Set Event Name to: generate_lead
6. (Optional) Add event parameters: form_location : {{DLV – form_location}}

Step 4: Create a Data Layer Variable (Optional but Recommended)

1. Go to Variables → Click New
2. Name it: DLV – form_location
3. Variable Type: Data Layer Variable
4. Data Layer Variable Name: form_location
5. Save

Step 5: Link Trigger to Tag

1. In your GA4 – generate_lead tag, scroll to Triggering
2. Select: Custom – generate_lead
3. Save the tag

 Step 6: Test in Preview Mode

1. Click Preview in GTM
2. Enter your site URL and connect
3. Submit the footer form
4. In Tag Assistant, check:
   • generate_lead event appears in the event timeline
   • Your GA4 – generate_lead tag Fires
   • form_location value is passed correctly

Step 7: Publish

Click Submit → Publish in GTM when testing is complete

Result

Every time a user submits the footer form, a generate_lead event is fired and sent to GA4, with a clear label that it’s from the footer (form_location: “footer”)