TOC

Baseline configuration

https://www.youtube.com/watch?v=YPbx-V-TSxE

Custom event for form submissions from webflow

If your website is built in Webflow and the form does not trigger a traditional form submission event (as the success message is displayed dynamically via JavaScript), you can adjust your setup in Google Tag Manager to track the appearance of the success message instead. Here's how to do it:

---

Step 1: Use a DOM Element Visibility Trigger

1. In GTM, create a new trigger:
   • Go to Triggers and click New.
   • Choose Trigger Type: Element Visibility.
2. Configure the trigger:

   • Selection Method: Choose CSS Selector.

   • Element Selector: Use the class of the success message div. For your example, enter:

     css

     Copy code

     .success-message.w-form-done

   • Visibility Options:

     • Select Once per page.
     • Check Observe DOM changes to account for dynamically added elements.

   • Some Visibility Events:

     • Add a condition: Page URL contains /lets-connect.
3. Save the trigger and name it, e.g., Form Success - Let's Connect.

---

Step 2: Update the Tag to Use the New Trigger

1. In Tags, edit your GA4 Event Tag for form submissions.
2. Use the same event name, e.g., form_submission.
3. Update the trigger to use the new Form Success - Let's Connect trigger.
4. Save the tag.

---

Step 3: Test the Setup

1. Preview the changes in GTM using the Tag Assistant.
2. Submit the form on https://www.poly.consulting/lets-connect.
3. Confirm that:
   • The success message appears.
   • The Form Success - Let's Connect trigger fires the GA4 Event Tag.

---

Step 4: Debugging and Validation

• If the tag still doesn’t fire, ensure:
  • The CSS selector .success-message.w-form-done is correct.
  • The success message is indeed added dynamically (check with browser dev tools).
• If the selector doesn't match dynamically, consider targeting using a Click Trigger on the form's submit button as a fallback.

---

Step 5: Scaling for Other Forms

To track additional forms:

1. Create additional Element Visibility Triggers with their respective success message selectors.
2. Reuse the same tag or create new tags with distinct parameters (e.g., page name or form ID). This method ensures reliable tracking of dynamically displayed success messages in Webflow forms.

Track events for PDF downloads

To track PDF downloads using Google Tag Manager (GTM), you can create an event that triggers when a user clicks on a PDF link. Here's how you can do it step by step:

---

Step 1: Enable Built-in Variables in GTM

1. Go to your GTM workspace.
2. Navigate to Variables in the left-hand menu.
3. Under Built-in Variables, click Configure.
4. Ensure the following variables are enabled:
   • Click URL
   • Click Text
   • Click Classes
   • Click ID

---

Step 2: Create a Trigger for PDF Downloads

1. In GTM, go to Triggers in the left-hand menu.

2. Click New and name the trigger (e.g., PDF Download Trigger).

3. Click on Trigger Configuration and select Just Links.

4. Configure the trigger:

   • Check the box for Wait for Tags and set the delay to 2000 ms.

   • Check the box for Check Validation.

   • Under Trigger Fires On, select Some Link Clicks.

   • Set the condition:

     mathematica

     Copy code

     Click URL contains .pdf

5. Save the trigger.

---

Step 3: Create a GA4 Event Tag

1. Go to Tags in GTM and click New.
2. Name the tag (e.g., GA4 PDF Download).
3. Click on Tag Configuration and choose Google Analytics: GA4 Event.
4. Configure the tag:
   • Configuration Tag: Select your existing GA4 Configuration Tag.
   • Event Name: Enter something like pdf_download.
   • Under Event Parameters, add the following:
     • Parameter Name: file_name
       Value: {{Click URL}}
     • Parameter Name: link_text
       Value: {{Click Text}}
5. Save the tag.

---

Step 4: Connect the Trigger to the Tag

1. In the tag editor, under Triggering, click Add Trigger.
2. Select the PDF Download Trigger you created earlier.
3. Save the tag.

---

Step 5: Test Your Setup

1. In GTM, click Preview to enter debug mode.
2. Open your website in the debug mode and click on a PDF link.
3. Check the GTM debug panel to ensure the GA4 PDF Download tag fires when a PDF link is clicked.

---

Step 6: Publish the GTM Container

1. After testing, click Submit in GTM to publish the container changes.

---

Step 7: Verify in GA4

1. Go to your GA4 property.
2. Navigate to Reports > Realtime or Explore > Events.
3. Look for the pdf_download event.
4. Verify that the file_name and link_text parameters are being recorded correctly.

---

Optional Enhancements

• Filter Specific Directories or Domains: Modify the trigger condition to track PDFs only from specific sections (e.g., Click URL contains /downloads/).
• Track Download Button Clicks: If PDFs are downloaded via buttons, use a Click ID or Click Classes variable in the trigger conditions.