Google Conversion Tracking when click button

Question

I am trying to add google conversion tracking to an external-linking button on my website, using the steps outlined at https://support.google.com/adwords/answer/6331304?co=ADWORDS.IsAWNCustomer%3Dfalse&hl=en, but there is a little wrinkle:

I am using a Wordpress theme editor with a preset button template which only allows me to add in the URL link after

<a href=" 

so I added in the URL and then the onclick snippet, but it still recognizes everything in the first line as a URL and returns a server error.

<a href="http://capitalareasocialtennis.website.siplay.com/login" onclick="goog_report_conversion('http://capitalareasocialtennis.website.siplay.com/login')" 
class="elementor-button-link elementor-button elementor-size-lg">
    <span class="elementor-button-content-wrapper">
    <span class="elementor-button-text">Register through SI Play</span>
    </span>
</a>

Here is a live example of what I am describing. I used the code in the button under the Sunday column as a test, since it's not supposed to be functional yet anyways. Any suggestions?

https://www.austinsocialtennis.com/league-information/

Answer 1

You can use elementor css id feature to do this.

first, on your button elemen go to advance option > CSS ID, fill the field with ID you want, for example: registerbutton

Then, add html widget bellow the button or anywhere on the page. fill it with bellow code:

<script> 
document.addEventListener("DOMContentLoaded", function(event) { 
    jQuery('#registerbutton a').click(function(){ 
    // tracking code here
    // for example Facebook Pixel:  

    //fbq('track','AddToCart'); 
goog_report_conversion('http://capitalareasocialtennis.website.siplay.com/login');

}); 
}); 
</script>

That's it.