What sort of function can I use to Call gtag_report_conversion on
Wanting to track 'Add to Cart' clicks on a WooCommerce store & Google Ads tell me I need to call gtag_report_conversion when any 'Add to cart' button is clicked on the site.
Some buttons are a link <a href="... etc"> using class="add_to_cart_button" - see example page
While other buttons are a <button> tag using class="single_add_to_cart_button" - see example page
I see from Google's instructions that the structure for a link is:
<a onclick="return gtag_report_conversion('http://example.com/your-link');"href="http://example.com/your-link">Add To Cart</a>And the structure for a <button> tag is:
<button onclick="return gtag_report_conversion('http://example.com/your-link')">Add To Cart</button>How can I construct a function hook that will create the above link / button tag structure & would it be an action or filter hook? Also, is it possible to use the classes mentioned earlier to define which buttons on the site should be affected by this particular function. The documentation showing what action & filter hooks are available for WooCommerce is here.
1). For loop Ajax add to cart button, you can use woocommerce_loop_add_to_cart_link filter hook to insert an onclick attribute, something like:
add_filter( 'woocommerce_loop_add_to_cart_link', 'customize_loop_add_to_cart_link', 10, 3 ); function customize_loop_add_to_cart_link($html, $product, $args){ if ( $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ) { $onclick_string = sprintf('onclick="return gtag_report_conversion(\'%s\');"', $product->get_permalink()); $html = str_replace('<a ', '<a ' . $onclick_string . ' ', $html); } return $html; }2). For single product add to cart button, you can use the following:
add_filter( 'woocommerce_available_variation', 'add_product_variation_permalink', 10, 3 ); function add_product_variation_permalink($data, $product, $variation){ $data['permalink'] = $variation->get_permalink(); return $data; } add_action( 'woocommerce_before_add_to_cart_form', 'customize_single_product_add_to_cart_button', 10 ); function customize_single_product_add_to_cart_button(){ global $product; if ( $product->is_type('variable') ) { wc_enqueue_js( "const b = 'button.single_add_to_cart_button'; $('form.variations_form').on('show_variation', function( event, data ){ $(b).attr('onclick', \"return gtag_report_conversion('\"+data.permalink+\"');\"); }).on('hide_variation', function(){ $(b).removeAttr('onclick'); });" ); } else { $onclick_string = sprintf('return gtag_report_conversion(\'%s\');', $product->get_permalink()); wc_enqueue_js( "$('button.single_add_to_cart_button').attr('onclick', \"{$onclick_string}\");" ); } }Code goes in functions.php file of your child theme (or in a plugin).
Thanks @LoicTheAztec - looking at Chrome inspector this generates the correct result in terms of code. However... Although it works on Home Page using link it then loads the single product page but I need it to stay on same page like it did before adding this code? Also it Intermittently works on single product page using but tbh today it's not working at all! - any ideas?
@PhilLegg No sorry no ideas…