@jstrauss hyphens should work as expected. Did you notice issues ?
Hi @artur ,
I’m trying to use a signup from to push into GTM via datalayer and register an event (for google/facebook ads tracking etc.).
This code only seems to work on a customizable form block (but not a signup form). here is the code I am using:
<script>
window.addEventListener('submit-form-success-signup-form', (e) => {
console.log('form submit success', e.detail);
dataLayer.push ({
'event' : 'FormSubmission'
});
});
</script>
I’ve looked everywhere for a solution but can’t seem to find anything.
Any ideas on pushing an event from a signup form into the data layer?
I will be able to share a code for signup block tomorrow. Signup block is still to be updated by us to work with the above code. but I can help with old approach. Can you share a link ?
@thegarty this should work
<script>
window.addEventListener('DOMContentLoaded', (event) => {
$( "#sw-sign-up-submit-btn" ).click(function() {
dataLayer.push ({'event' : 'FormSubmission'});
});
});
</script>
Once the block is updated though this will need to be changed just FYI
1 Like
Hello is the above script still the best solution for pushing sign-up form data into the data layer?
hi @artur thanks for your help here. What is the best way to catch a click on a list element (when not using the action buttons for which the React version of the solution seems to be this one: Action Buttons - Update Records event listeners)?
thx, Stephan
Hey @artur - is the sign up script up to date? Or is there an updated one following the block update?
I don’t think so, if you have a link to the page pls share it so I can check and provide up to date version
Thanks for the quick response Artur.
Here’s the page I’m trying to send an event from:
Will the event recognise Gmail sign up?
Is it still true for customizable form?
It seems these events are not triggered in my app
Hi @artur - Should this script work on pages that use the “Signup with side image” content block? The form I’m using doesn’t appear to have an ID or class I can use: https://app.coverdoc.ai/sign-up
I’m trying to use Google Tag Manager to fire an event in GA4 when a user signs up via the Softr form. I’d like to use dataLayer.push for the “submit-form” event but the script doesn’t work for me when I use a custom code block in Softr on https://app.coverdoc.ai/sign-up
@artur I have a custom code that listens to different forms on different pages in the footer custom code. the code is meant to show a custom loading screen when a form is submitted and refresh the parent page when the form submission is successful, it works on the dev environment(app clone) but it doesn’t work in prod(user-visible) the code looks like this below:
<div id="loading-screen">
<div class="ring">Loading
<span id="sp"></span>
</div>
</div>
<div id="loading-screen-n">
<div class="ring">Connecting
<span id="sp"></span>
</div>
</div>
<style>
.ring
{
// some css
}
.ring:before
{
// some css
}
#sp
{
// some css
}
#sp:before
{
// some css
}
@keyframes animateC
{
// some css}
@keyframes animate
// some css
}
#loading-screen,#loading-screen-n {
// some css
}
</style>
<script>
const showLoadingScreen = (s) => {
document.getElementById(s).style.display = 'block';
};
const hideLoadingScreen = (s) => {
document.getElementById(s).style.display = 'none';
};
window.addEventListener('submit-form-metricform', () => {
showLoadingScreen('loading-screen');
})
window.addEventListener('submit-form-success-metricform', () => {
hideLoadingScreen('loading-screen')
window.parent.location.reload();
});
window.addEventListener('submit-form-recommend', () => {
showLoadingScreen('loading-screen');
})
window.addEventListener('submit-form-success-recommendform', () => {
hideLoadingScreen('loading-screen')
window.parent.location.reload();
})"
Hi,
For your use case, few things:
You point, in your script, to loading-screen, but in your html it is loading-screen-n (at least one of them). Would this come from there?
The event listener for a block should be nested in another event listener, to avoid bugs.
window.addEventListener('block-loaded-YOURBLOCK', () => {
console.log('Block loaded');
});
Don’t forget to finish your script by </script>
Adding the code at page level would be better than running this all the time at app level (if this is the case, from what I understood)
@matthieu_chateau ok I tried adding the code at the page level, but then I feel it’s a selector thing because when i tried console logging something when the form is submitted it doesn’t show up in the console
here is a copy of my code
<script>
document.addEventListener('DOMContentLoaded', function() {
const currentPageURL = window.location.href;
console.log("Page loaded")
if(currentPageURL.includes("ad-filter-modal")){
console.log("Modal Page loaded")
const form1 = document.getElementById("metricform")
form1.addEventListener('submit-form', () => {
showLoadingScreen('loading-screen');
})
form1.addEventListener('submit-form-success', (e) => {
hideLoadingScreen('loading-screen')
window.parent.location.reload();
});
form1.addEventListener('submit-form-failure', (e) => {
hideLoadingScreen('loading-screen')
});
}
})
</script>
@artur I will also want the details of custom events in softr to be published in the docs
There are problems with your code, not really a problem of selector.
Few things:
It’s or failure or success but not just submit-form (which is triggerred whether it’s a success or a failure => it will lead to conflicts)
Can you explain me exactly what you want to do, step by step with this script and by naming the elements.
Like “when there is form submission (form name) in this page… I want this to happen…”
I will try to do it tomorrow, if I have time.
PS: I’m not a Softr employee
@matthieu_chateau @artur ok I want to show a loading screen immediately after a user submits a form(named metricform) in a modal(named “ad-filter-modal”), hide the screen and reload the page that brought up the modal(poping the modal off) when the form returns success,
and hiding the screen when the foem submission fails
so I have automation in make/integromat with a response webhook that fires on completion of the automation, this emits the “submit-form-success” event which is supposed to hide the loading screen and reload the parent window. so that’s why I listen to the “submit-form” and “submit-form-success” events. I hope this gives you clarity on my use case
Ok, so the submit form success event listener is not supposed to be trigerred on completion of the automation, it is trigerred on form submission stricto sensu (so => before the automation is completed or, in other words, whatever if the make automation is a success or a fail).
Does this Make automation, when it is successful, change something in the page, visually? A field in a table or in a list or something?
Hi @artur I think this ‘submit-form-formName’ event is broken. It doesn’t emit just before the form is submitted, as expected