Google Tag Manager form succesfull submition trigger raising.

Targutai Yesugei asked on December 27, 2017 07:44

Hello!

I need to raise succesfull form submition trigger on my site. I have several webparts which are responsible for a different form types. Also I have custom module, which is handling BizFormItemEvents.Insert.After event, where i know that form is submited correctly and do some magic with it.

Now, as i understand, i have to add js script like <script> dataLayer = [{ 'event': 'formSubmission' }]; </script> to the head of my page. But the problem is that i don't have an access to Page static variable, to use something like Page.Header.Controls.Add()

So, can you suggest any ideas to solve my problem?

Correct Answer

Brenden Kehren answered on December 27, 2017 16:16

I'm saying you need MORE than just the custom module AND the global event handler. You need a custom webpart which will allow you to capture that event as well and give you access to the page variable.

0 votesVote for this answer Unmark Correct answer

Recent Answers


Brenden Kehren answered on December 27, 2017 15:18

Use the javascript webpart and add your js in the head that way. You can specify the js you want and where it gets positioned on the page.

0 votesVote for this answer Mark as a Correct answer

Targutai Yesugei answered on December 27, 2017 16:00

Thank you for your replies, guys.

But my problem is how to catch successful form submition event in Kentico. I know about data layer variable, but i need to push it in right time.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on December 27, 2017 16:04

You stated your problem was "But the problem is that i don't have an access to Page static variable, to use something like Page.Header.Controls.Add()". Is this not the actual problem? The JS webpart does just that and uses the method Page.Header.Controls.Add() to add a literal control with the js to the head tag.

0 votesVote for this answer Mark as a Correct answer

Targutai Yesugei answered on December 27, 2017 16:08

If i add this web part to my page, this script will always be on this page, but i need this script appear only after successful form submition.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on December 27, 2017 16:11

Then you need to create your own custom webpart based on the online form webpart and capture that local event of InsertAfter in the form then place your javascript in the head. Your global event will still happen but you also need to capture the event in the webpart as well.

0 votesVote for this answer Mark as a Correct answer

Targutai Yesugei answered on December 27, 2017 16:13

As i said, i already have my custom module, which use BizFormItemEvents.Insert.After event, but i don't have an access to Page static variable to add something to Head element.

0 votesVote for this answer Mark as a Correct answer

Targutai Yesugei answered on December 27, 2017 16:19

Oh, got it.

I need web part which will be extension over default js web part, which will capture InsertAfter event and add required javascript to page, right?

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on December 27, 2017 16:21

Correct

0 votesVote for this answer Mark as a Correct answer

Targutai Yesugei answered on December 27, 2017 16:23

Thank you for you patience and your idea. I'll try to implement this.

0 votesVote for this answer Mark as a Correct answer

Targutai Yesugei answered on December 27, 2017 16:32

And last question to be sure in this.

Do i have an access to form's InsertAfter event from my custom js webpart?

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on December 27, 2017 16:37

Not on the js webpart but on the form webpart you will only because you're using a <cms:BizForm> control which will have that event exposed.

0 votesVote for this answer Mark as a Correct answer

Targutai Yesugei answered on December 27, 2017 17:55

So, i have an access to custom js webpart's content property from InsertAfter event?

0 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on December 28, 2017 01:57 (last edited on March 24, 2018 12:16)

You could capture the submitted data on a separate thank you page (which is always better if you want to set/track goals). You could to the following:

1) make sure you set your redirect url for your form with querystring params with macro's to pass your filled in form values (Forms > your form > general > redirect to url > {% GetResourceString("SomeLocalizationString.ThankYou.Url")%}">

3) then add a javascript webpart to the page which gets & pushes the values

for example:

(function() {
  var pt = $('#gtm-prospecttype');
  var ct = $('#gtm-concepttype');

  if ($.trim(pt.val()).length && $.trim(ct.val()).length) {
    dataLayer.push({
            'proparticulier': pt.val(),
            'typeconceptbrochure': ct.val(),
            'event' : 'conversion'
        });
  }
})();

I know this is a lot of fiddling with several things, but I've had some support from Kentico and there is no better way yet. Give it a try, we've got some examples working.

HINT: It would be a great asset if this was more integrated into the Kentico product ;-)

KR, Dennis

1 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on December 28, 2017 02:01

Good call Dennis. I forgot all about that. Might be worth creating a custom webpart based on the forms webpart and add a few of the extra things to it that you need like the JS and the page to redirect to. Or maybe a combination of 2 webparts, one for the form and redirect and the other for the JS needed

1 votesVote for this answer Mark as a Correct answer

Targutai Yesugei answered on December 28, 2017 07:36 (last edited on December 28, 2017 07:36)

Hello, Dennis, thank you for your reply. I thought about placing my js code to thank you pages, but the problem is that not all forms have them. So i can't use your suggestion, however, it's good.

0 votesVote for this answer Mark as a Correct answer

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