If you view source on a CC signup form, notice that the top-most parent div has a class of ctct-inline-form and then a unique data-form-id (unique to your form and made up from lots of random characters).
Notice, too, that there is a hidden success message div with class ctct-form-success. When that success message div becomes visible, then Google Tag Manager (GTM) should be able to track it. Because my site has multiple signup forms, I want to know which form was submitted by its unique ID. My GTM Tag has 3 parts.
1. A custom JavaScript variable that looks for the top-most parent div and then grabs the unique ID. The javascript is:
function() {
return {{Click Element}}.closest(".ctct-inline-form").getAttribute('data-form-id');
}
2. An Element Visibility Trigger that watches for the success message div to appear. The setup follows.
- Selection Method: CSS Selector
- Element Selector: .ctct-form-success
- When to fire this trigger: Once per element
- Minimum Percent Visible: 1 percent
- Observe DOM changes: checked (I need the trigger to watch for the div to become visible)
- This trigger fires on: All Visibility Events (I’d like to narrow this down, but don’t know how at the moment)
3. GA4 Event Tag. Setup follows.
- Event Name: call_to_action (this is a made-up event name. You can call your event whatever you like).
- Event Parameters:
- Parameter Name: form_id (this is a made-up parameter. You will need to register it in GA4 as a custom dimension to use it in reports)
- Value: {{the name of the var created in Step 1}}
Note: in Step 1, I don’t know why {{Click Element}} works since the user didn’t click the success message to make it show. Maybe that doesn’t matter to the GTM DOM trigger.
How does this work?
If a user subscribes to your Constant Contact form, then the “success” div will appear. The trigger will see that because it is watching for DOM changes. It will trigger the tag. The tag will use the variable from Step 1 to lookup the unique ID of the form that was submitted. The tag will send the custom call_to_action event to GA4 and pass the parameter “form_id”.
P.S. I have lots of signup forms, so I’ll probably use some kind of lookup table in my data report to convert the unique IDs to something more meaningful like “My Signup Form of Destiny”. I’m not using a lookup table in GTM because I am not the only content contributor so I won’t know when new forms are added. (shrug)
