Trying to add google ad onclick to wordpress and Divi buttons and header link

Question

I'm trying to add this code in wordpress below to a button (Divi theme, using Divi builder) as well as to one of the top menu items.

it seems like i need to use some jquery, which is beyond me.

Any help would rock! https://canadasautoloan.ca

Google ads events tracking, i've done all the rest and I can add it to normal links, but not buttons and menus that I can't edit.

Add an onclick attribute directly to the code for the button or link that you'd like to track. The code you use will depend on how the link or button is displayed on your site: as a text link, button or button image.

Add the code to a text link: In the code below, replace "http://example.com/your-link" with the URL for your website or telephone link, and replace "Download now!" with your link text.

<a onclick="return gtag_report_conversion('http://example.com/your-link');" href="http://example.com/your-link">Download now!</a>

Add the code to a button: This code shows you how to add click tracking functionality to a button using the tag. Replace 'http://example.com/your-link' with the URL for your website.

<button onclick="return gtag_report_conversion('http://example.com/your-link')">Submit</button>

Add the code to a button image: In the code below, replace "download_button.gif" with your button image, replace the width and height with your image's parameters, and replace "http://example.com/your-link" with the URL for your link.

<img src="download_button.gif" alt="Download Whitepaper" width="32" height="32" onclick="return gtag_report_conversion('http://example.com/your-link')" />

*EDIT AND AN ANSWER:

The Divi team gave me some code I put into the header that seems to have done it. Here's the code in case it helps anyone else: Please go to your WordPress Dashboard > Divi > Theme Options > Integration > Add code to the < head > of your blog and add the following:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.get-started a').attr("onclick", "return gtag_report_conversion('https://canadasautoloan.ca/auto-loan-application-form/');");
jQuery('a.et_pb_button[href="https://canadasautoloan.ca/auto-loan-application-form/?choose_vehicle=Ask"]').attr("onclick", "return gtag_report_conversion('https://canadasautoloan.ca/auto-loan-application-form/?choose_vehicle=Ask');");
});
</script>

Answer 1

As you mentioned in the comment, if you have the ability to add ID value(s) to the elements, or you can try using css selector. choose what's best for you. then do as follows..

in your custom js file, add this,

(if you don't have your own custom js file, you can add one, append following into your theme's functions.php file)

function add_custom_scripts() {
wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/js/mycustom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );

in your js file,

jQuery(document).ready(function() {

var gButton = jQuery("#your-element-id");
var url = "http://example.com/your-link";

gButton.on("click", function(){ gtag_report_conversion(url); });

});

add every element you want to track in there and call the gtag_report_conversion(url) as I mentioned. That's all.

I assume you've already set up necessary steps, installed the global site tag and Event snippet code to necessary pages.

Answer 2

You can add this script to your webpage. It will select all elements with the class .your-class and add the specified onclick attribute to them. Make sure this script runs after the DOM has fully loaded, so all .your-class elements are present in the document. You can place this script at the end of your HTML body or execute it after the DOMContentLoaded event.

// Select all elements with the class .your-class
var orderNowLinks = document.querySelectorAll('.your-class');

// Loop through each element and add the onclick attribute
orderNowLinks.forEach(function(link) {
    link.setAttribute('onclick', "return gtag_report_conversion('https://your-link');");
});