In this article we will mainly cover 2 things:

1. Sending Google Tag Manager events when a button is pressed
2. Enqueueing javascript onto your Add to Cart pages

Sending Google Tag Events for Add to Cart (Free & Pro)

Google Tag Manager, and many other “hidden” functionality on your website, is using javascript! It should come as no surprise that sending an AJAX request event (a javascript event) will require some additional javascript to get Google to recognize this click. Below, we have put a vanilla javascript example to send the Add to Cart action to Google:

// record all AJAX Add to Cart Button events
document.body.addEventListener('click', e => {
  let t = e.target;
  if (t.classList && t.classList.contains('a2cp_button')) {
    ga('send', {
      hitType: 'event',
      eventCategory: 'addToCart', // customize me
      eventAction: 'click', // customize me
      transport: beacon
    });
  }
}, false);

If you have a tag manager solution already implemented on WordPress, you can add this javascript above to get the event passed to Google Tag Manager (and thus Analytics and Ad Words). Don’t forget to customize for YOUR Google Analytics Categories & Actions!

To follow more products specifically, you can find a short example here we will let you expand upon:

// record adding sunglasses (pid:67) to cart via a2cp
document.body.addEventListener('click', e => {
  let t = e.target;
  if (t.hasAttribute('data-pid') && parseInt( t.getAttribute('data-pid') ) == 67 {
    ga('send', {
      hitType: 'event',
      eventCategory: 'addToCart', // customize me
      eventAction: 'click', // customize me
      transport: beacon
    });
  }
}, false);

Enqueueing Javascript onto your Add to Cart pages

While enqueueing javascript onto WordPress is becoming more commonplace, it is still very complex subject and if not protected fully, some methods are more suggested than others.

Our suggestion

There are many options for managing tags on your WordPress website. While we do not currently have a recommendation, there are many plugins to help enqueue inline javascript, in this case, “tags” and some plugins market towards this (“tag manager”) term. Our suggestion is to manage your tags in a centralized area. The HTML is all very standardized across buttons and rows to help manage tags like this better. It is on our feature request list to have a way to manage this within the plugin.

Our other suggested

Many CSP configurations will block the below implementations. Or for the most secure implementation, as succinctly and elegantly explained why here, you can add the same vanilla javascript as noted above to a javascript file to your theme and enqueue the file through wp_register_script() and wp_enqueue_script().

Other options

The most simple, and possibly one of the most efficient ways to enqueue the event on ALL your generated buttons, either shortcode or block, could be as follows:

// For readability we put spacing in the function, this may make it look ugly if copy and pasted. 
function add_a2cp_gtm_event_to_a2cp_render( $html, $product_id, $variation_id ) {
  $html .= '<script>
              document.body.addEventListener('click', e => {
                let t = e.target;
                if (t.classList && t.classList.contains('a2cp_button')) {
                  ga('send', {
                    hitType: 'event',
                    eventCategory: 'addToCart',
                    eventAction: 'click',
                    transport: beacon
                  });
                }
              }, false);
            </script>';
}
add_filter( 'a2cp_button_row_additional_fields', 'add_a2cp_gtm_event_to_a2cp_render', 10, 3 );

An alternative to put the code on all pages, no matter if a button is generated or not (might be used to solve caching issues or javascript extraction/minimization):

// For readability we put spacing in the function, this may make it look ugly if copy and pasted. 
function add_global_a2cp_gtm_event() {
  $html = '<script>
              document.body.addEventListener('click', e => {
                let t = e.target;
                if (t.classList && t.classList.contains('a2cp_button')) {
                  ga('send', {
                    hitType: 'event',
                    eventCategory: 'addToCart',
                    eventAction: 'click',
                    transport: beacon
                  });
                }
              }, false);
            </script>';
  echo $html;
}
add_action( 'wp_footer', 'add_global_a2cp_gtm_event', 10, 3 );