Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
Hi,
As you're looking to add data to GA's data layer, you'll need to do that in your client-side JavaScript so the server-side code wouldn't work.
I suspect the reason your JavaScript isn't working is due to the order in which scripts render on the page. Looking at the code, I'm assuming you've added the JavaScript to your form block so it will be rendered before the Epi Forms library has been loaded and hence $$epiforms will always be undefined at the point where it's checked. Also, because of the scope of "guid" and "addEventHandlers" you're going to be limited to one form on any given page.
To avoid the scoping issue and attach your events after the forms JS has loaded, you'd need to replace your JS with something like this in your form container block:
<script>
document.addEventListener('DOMContentLoaded', function () {
$$epiforms('.EPiServerForms#@Model.Form.FormGuid').on('formsSubmitted', function (event) {
console.log("intercepted");
});
});
</script>
Hi Martin,
I agree with Pauls method and it is probably the easiet way to do it.
An alternative however would be to create you own submit element 'SubmitGoogleDataLayer' then you would be able to use form element resources to add you own resources js and markup.
Paul
Thank you!
I did manage to get it working finally, I ended up using window.addEventListener('load') instead of document.addEventListener('DOMContentLoaded')
I tried to addEventListener to form from FormContainerBlock.ascx with a code like this, I tried about a 100 different little variations but no matter what, I could never get event to fire during submission.
<form method="post" novalidate="novalidate" data-f-metadata="<%: Model.MetadataAttribute %>" enctype="multipart/form-data" class="EPiServerForms <%: validationCssClass %> clearfix form-horizontal" data-f-type="form" id="<%: Model.Form.FormGuid %>"> <script> const guid = "<%: Model.Form.FormGuid %>"; const addEventHandlers = () => { $$epiforms('.EPiServerForms#' + guid).on('formsSubmitted', function (event) { console.log("intercepted"); }); } if (typeof $$epiforms !== 'undefined') { console.log("epiforms exist"); $$epiforms(document).ready(addEventHandlers); } </script>
The only thing that acctually intercepted submission was this code
[InitializableModule] [ModuleDependency(typeof(EPiServer.Web.InitializationModule))] public class FormEventsInit : IInitializableModule { public void Initialize(InitializationEngine context) { FormsEvents.Instance.FormsSubmitting += Instance_FormsSubmitting; } private void Instance_FormsSubmitting(object sender, FormsEventArgs e) { // The event fires before the data is submitted so there is an opportunity to interact here var formData = e.Data; } public void Uninitialize(InitializationEngine context) { } }
What I need to do is to add some data realted to google analytics when form is submitted. So I need to access window.dataLayer object, whis is present then. I thought I'd be able to intercept through script and add it then but not working yet. I can intercept submission via IInitializableModule, however can window be accessed here ?