attaching a google event tracking code to a submit button

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Craig O'Mahony 364 posts 918 karma points

Feb 05, 2015 @ 11:22

0

Attaching a Google event tracking code to a submit button

Hi, I've been asked to add a Google event tracking code to the Submit button on a specific form on my site (there's about ten differing forms in total) and I've no idea where to even begin looking to acheive this.

If I was putting the code on a normal link it would be something like this...

<a onClick="ga('send','event','Go','Course Finder');" href="/myotherpage">Submit</a>

Could anyone point me in the right direction or even if what I'm trying to acheive is possible please?

Thanks,

Craig

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Feb 05, 2015 @ 11:55

0

Hi Craig

You don't need to use an inline event handler for that.

You should be able to catch the id of the button or it's parent and then be able to register the event on click. If you're using jquery in your project (Contour relies on it for validating form fields at least) then you should be able to write something like...

$('#idonbtn').on('click', function(){

ga('send','event','Go','Course Finder');

});

Does that make sense?

Copy Link
Mukesh Kumar 1 post 71 karma points

Apr 12, 2017 @ 19:49
0
Hi Jan,

I saw you are solving event tracking issues. Have similar issue with my event tracking code. I am not a tech gig.. just trying hard to learn things. Googling "event tracking code for button", I found lots of tutorials and had implemented the code. I am not sure, its gonna work, as I can not see any "real-time" events being recorded on GA while clicking on the button.

The website is in wordpress. Earlier the code for button was
```
<p><a href="#" onClick="ga(‘send’, ‘event’, ‘Short Form Submit’, ‘Click’, ‘Send’);"><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></a></p>
```
I had updated the code with event tracking as:
```
<p><a href="#" onClick="ga(‘send’, ‘event’, ‘Short Form Submit’, ‘Click’, ‘Send’);"><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></a></p>
```
Please help me, where I did mistake..

Thanks.
Copy Link
Craig O'Mahony 364 posts 918 karma points

Feb 05, 2015 @ 12:15
0
Hi Jan,

Yes it does (sort of!) how would I target the specific submit button though (the jQuery would need to be on the master template and therefore it would render on all pages). From examining the markup the HTML looks like this for the submit button:
```
<div class="contourNavigation">
```
```
    <input type="submit" value="Submit">
```
```
</div>
```
Thanks,

Craig
Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Feb 05, 2015 @ 12:31

0

Hi Craig

Then you should be able to target using $('.contourNavigation > input') or like $('input[type=submit]').

But this will capture clicks on all forms not just the one specific form. So if the form is wrapped on a page or in a context where there is a unique id somewhere then I would build my selector up based on that id.

Does this still make sense?

/Jan

Copy Link
Craig O'Mahony 364 posts 918 karma points

Feb 05, 2015 @ 12:48

0

Hi jan,

Thanks again for your time, I'm having trouble (!) targeting the actual button. I've wrapped the entire contour form in a div with a unique ID (contourTracking) but I can't seem to access it. The script I've written is

<script>

$('#contourTracking > contourNavigation > input').on('click', function(){

alert("Hello");

});

</script>

Am I just being a general idiot?!?!

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Feb 05, 2015 @ 13:04
100
Hi Craig

I don't think you're being an idiot :)

But seems like you're missing a dot when targeting the .contourNavigation class. And when using the > the element you're targeting must be a direct child, so it requires that you structure looks like this
```
<div id="#contourTracking">
  <div class="contourNavigation>
    <input />
  </div>
</div>
```
If it does that then using this should work (Just corrected your typo from above
```
<script>

$('#contourTracking > .contourNavigation > input').on('click', function(){

alert("Hello");

});

</script>
```
If your structure is different then just use this without the > selector.
```
<script>

$('#contourTracking .contourNavigation input').on('click', function(){

alert("Hello");

});

</script>
```
I Hope this helps.

/Jan
Copy Link
Craig O'Mahony 364 posts 918 karma points

Feb 05, 2015 @ 14:26

0

Genius!

Works a treat!

Thanks jan :)

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Feb 05, 2015 @ 14:43

0

Hi Craig

Happy to hear that :-) Whenever you face an issue where you see someone adding inline eventhandlers then remember that it's possible to avoid that by using either vanilla javascript or jquery as you just did. It makes things easier to deal with in the end :)

/Jan

Copy Link
Craig O'Mahony 364 posts 918 karma points

Feb 05, 2015 @ 14:49

0

Absolutely!

Never even occurred to me till you mentioned.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?