Integration with Google Tag Manager. Event - form submittion after custom validating.

Targutai Yesugei asked on October 11, 2017 09:45

Hello! I want to integrate my site with Google Tag Manager.

Firsly, I need to catch an event, when user submit form (which is handled by custom web part - kind of wrapper class around default Kentico form web part) and our custom validator (which is the only one difference between our and Kentico default form web part) says it's ok. Now I need to execute js code (dataLayer.push({'event': 'universalFormSubmit'});) on client side. I can catch a validation event in a server side, but need to run code on client side.

So, can you suggest any solutions to handle this or how to integrate Kentico with GTM, if I use custom form web part with validation(so GTM data should be sent only after validation)?

Thanks in advance.

Recent Answers

Matt Nield answered on October 11, 2017 10:32

If you're looking to call some javascript, one simple approach it to add a script tag into the setting General > Form settings > After the form is submitted > Display text.

As an example, adding <script>alert('yay');</script> will cause the alert dialogue to open when the form is sumbitted.

That's a fairly simple approach, but it really depends how far you have taken your custom web part from the original and what action the site should take when the form is submitted. Are you simply diplaying a message, redirecting to another page or just clearing the form?

If you need to get more advanced, then you have access to the global event handlers in the API using CMS.OnlineForms.BizFormItemEvents or adding the script on the postback of your form webpart.

1 votesVote for this answer Mark as a Correct answer

Targutai Yesugei answered on October 11, 2017 13:10

Hello, Matt! Thanks for you answer!

I think, i forgot to mention that form can react in various ways: redirect to external site, redirect to current site's another page or just display text. So your suggestion works only in one way.

My custom web part wasn't go far away from original, it's really can be considered as default Kentico approach.

So my question can be slighly edited. How can i integrate form submission event with Google Tag Manager? I didn't work too much with GTM - my task is to execute js code, when form is submitted.

The problem is when i'm trying to insert js code execution code (by ScriptManager class) into OnAfterSave event and "Redirect to url after form submission" is selected in form settings, this js code doesn't execute. It executes if only there is no redirection after form submission.

I'm sorry for a quite misunderstanding, hope this will clarify my situation.

0 votesVote for this answer Mark as a Correct answer

Matt Nield answered on October 11, 2017 13:28

If you're potentially redirecting to another site, then I think you might want to look at doing something with global event handlers then. The ScriptManager will never be seen by the client as your sending a redirect response. If you have a look in the Network tab in your browser dev tools, you'll see that the inital redirect does not contain any of your content.

You can capature the event before the submitted form data is inserted. With that, you'd really want to be talking to the Google API from the backend code though. There is a NuGet package for the Google APIs as well as some documenation to get you started.

1 votesVote for this answer Mark as a Correct answer

Targutai Yesugei answered on October 11, 2017 13:50

Thanks again, Matt, i'll try to do something with this.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.