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
    Craig O'Mahony
    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

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Feb 05, 2015 @ 11:55
    Jan Skovgaard
    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?

  • Mukesh Kumar 1 post 71 karma points
    Apr 12, 2017 @ 19:49
    Mukesh Kumar
    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 the button image with code

    <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.

  • Craig O'Mahony 364 posts 918 karma points
    Feb 05, 2015 @ 12:15
    Craig O'Mahony
    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

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Feb 05, 2015 @ 12:31
    Jan Skovgaard
    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

  • Craig O'Mahony 364 posts 918 karma points
    Feb 05, 2015 @ 12:48
    Craig O'Mahony
    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?!?!

     

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Feb 05, 2015 @ 13:04
    Jan Skovgaard
    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

  • Craig O'Mahony 364 posts 918 karma points
    Feb 05, 2015 @ 14:26
    Craig O'Mahony
    0

    Genius!

    Works a treat!

    Thanks jan :) 

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Feb 05, 2015 @ 14:43
    Jan Skovgaard
    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

  • Craig O'Mahony 364 posts 918 karma points
    Feb 05, 2015 @ 14:49
    Craig O'Mahony
    0

    Absolutely! 

    Never even occurred to me till you mentioned.

Please Sign in or register to post replies

Write your reply to:

Draft