Hi,

We've been measuring our form submissions through Google Tag Manager. We did this by adding an event in JS in the Post-submit HTML  like this:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event':'leadform_submission'});
</script>

This method suddenly stopped working and can't find the reason.

It's not a GTM issue, I've tested a simple JS like this:

<script>
alert("thanks");
</script>

and it won't run either.

What could cause JS not to run in this section anymore?

Thanks

Thanks, Paul, that's a tremendous help, at least I know now where the problem is coming from!

Is there a new, recommended way to measure form submissions, or it is just not supported anymore and that's that?

On 5/12/2023 at 9:34 AM, Mate said:

Thanks, Paul, that's a tremendous help, at least I know now where the problem is coming from!

Is there a new, recommended way to measure form submissions, or it is just not supported anymore and that's that?

I am in the exact same boat, I thought I was going crazy for a little bit.

Did you figure out a solution to that? 

I am about to try putting it in the footer

.

Edit 

I ended up redirecting to a thank you page

Following this - any updates on a fix or a new recommended method to measure form submissions?

No solution yet, but I did confirm that the new international-friendly form block also breaks Zapier integrations if you are passing hidden fields.

It is possible to detect the events with an ajax listener, but that seems fragile and likely to break with a later deployment.

Seems like something they should have tested...

I (was) using it for passing user-provided data for enhanced conversions tracking in Google Ads, this is now broken as I had to revert to redirect and track a thank-you page. Squarespace should prioritize this and make an urgent hot fix in my opinion, it is a bit embarrassing.

Our form submissions have also been breaking.  We've lost many potential customers and now we have to redo our forms, and upgrade to "business" just to add web leads into Salesforce.   There was no warning of this change.   Squarespace customer support was also unable to give us direction on what had happened.

I have created a video about this and posted the code on GitHub(https://github.com/sorcamarian/squarespace-tricks/tree/main/Forms)

On 9/12/2023 at 6:13 PM, sorca_marian said:

I have created a video about this and posted the code on GitHub(https://github.com/sorcamarian/squarespace-tricks/tree/main/Forms)

Great idea to create an image element on post-submit with an onload event 💡

I used the following as the img src for the sake of being as tiny and insignificant as possible - it's a blank image at 26 bytes, taken from here:

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

@sorca_marian Thanks for the video. I think this is what I need, but I still have gaps in my understanding. 

I am trying to install Google Tag Manager and track form submissions. I have been working with Google to install the javascript code, but when we tried to install it they said their was som kind of ad blocker preventing it.

So I'm trying to embedd this code to test it and get it working:

event: "contactFormSubmitted"
formid: 63
gtm.uniqueEventId: 14
inputs: Array(5)
0: {name: 'your-name', value: 'test'}
1: {name: 'your-email', value: 'test@google.com'}
2: {name: 'your-phone', value: '98765432345'}
3: {name: 'your-subject', value: 'test'}
4: {name: 'your-message', value: 'test'}

It's what Google has given me, but I'm not having any success. I have tried injecting it into the Header, but that didn't work. I think there is something in your method I'm missing. I'm not sure about adding an image and then how to embed the javascript post submit.

Would you be willing to clarify a bit?

How can I add javascript code without it being seen by the user after the form has been submitted?

Thank you!

@EtchWood If Google told that you had some add blocker did they mean you have an add blocker extension installed in your browser?

With the post-submit technique that I presented in the video you can run JavaScript code after a form has been submitted.
The option with the image is very simple. Adding an onload event to an image in the post submit of a Squarespace form.
In the onload event you declare which function should be called.
Then you declare that function anywhere on that page and it will be called when a form was successfully submitted.
In that function you will probably need to add a code from Google that tracks conversions.
An additional code with Google Tag Manager will probably be needed to be added in Global Code Injection.

I haven't used Google Tag Manager many times and an expert in this would be fitted to answer you about the installation process.

The code that you added looks like it was copied from Developer Tools Console and is not valid JavaScript.

@sorca_marian Gotcha. Thank you for your input. I'll have to put some thought into that. That code was provided by the Google rep to test.

The rep couldn't identify what she meant by code blocker. It was a bit weird.

I'll see what I can do.

Thanks again!

@sorca_marian I have asked Chatgtp for help and he gave me a code to help fire a trigger in GTM. This is the answer i got and it works. (mind you to not put the " " in the trigger description of GTM, just formSubmitSuccess is enough )

To set up a Google Tag Manager (GTM) trigger and a tag that reacts to the addition of the class "form-submitted-successfully" to the body element of your webpage, you can follow these steps:

Step 1: Set Up a Custom Event Trigger

In this case, it's more efficient to directly send a custom event from your JavaScript function to GTM, instead of waiting for the class to be added. This gives you more control and ensures the tag fires at exactly the right moment. Here’s how you can modify your function:

<script>
    function onFormPostSubmit() {
        // Add your JavaScript logic here
        document.body.classList.add("form-submitted-successfully");
        // Send an event to Google Tag Manager
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'formSubmitSuccess'
        });
    }
</script>

Step 2: Create a Trigger in GTM

1. Log in to your Google Tag Manager account.
2. Navigate to the 'Triggers' section and click 'New'.
3. Choose the trigger type 'Custom Event'.
4. Enter the event name that you used in your dataLayer push, in this case, formSubmitSuccess.
5. Set the trigger to fire on all Custom Events that match this name.

Step 3: Create a Tag to Send to GA4

1. Return to the GTM overview and select 'Tags' followed by 'New'.
2. Choose the tag type 'GA4 Event'. If you haven't set up a GA4 configuration tag yet, you'll need to do that first.
3. Give the event a name, for example, 'form_submission'.
4. Add any event parameters as necessary. This could be specific information you want to track about the form submission, such as the values filled out (be mindful of privacy regulations).
5. Select the trigger you just created, 'formSubmitSuccess', for triggering.

Step 4: Test and Publish

1. Use the 'Preview' mode in GTM to test if your trigger and tag are functioning correctly. This shows you in real-time whether the events are being sent when the form is submitted.
2. Once you have verified that everything works correctly, click 'Publish' to push your changes live.

With these steps, you can create a robust and accurate tracking setup for form submissions on Squarespace, using GTM and GA4.

.