Export logic of GTM events as functions

[morvy]

Hello,

I came across an issue with Add to cart on some themes, where this is handled by AJAX request and as such, it begins with e.preventDefault(); which breaks all other mounted functions on Add to cart button.
I made a fix by monitoring the response from AJAX and on success trigger the event, but for this I had to copy 80% of original gtm4wp code responsible for add_to_cart event. If the code could be exported to functions, it would be easier for developers to handle such compatibility issues with just little code.

This is just an idea .. here's the code I ended up adding for this specific custom coded theme:
https://gist.github.com/morvy/921a5ace2a29221f41d17c107da6780d

Everything after line 18 is just copy/paste. If there was a function with 2 arguments - event_target_element and product_form it could've been much shorter :)

[duracelltomi]

It is very important that I would like to avoid using jQuery.
Previously it was used a lot but now the code uses vanilla JS. The drawback is that related JS codes are not yet optimized. Some refactoring is needed as currently there are multiple event handler functions for the same event (especially click events)

On your specific issue: e.preventDefault(); is only called when someone clicks on a product in a product list. I am not sure what you saw in the add to cart code.

[morvy]

I'm also vanilla JS fan and was very happy when you removed jQuery. The problem is not in your code but in themes that use AJAX add to cart. If there wasn't e.preventDefault(); it would trigger a page refresh. But when there is such thing, all other codes, including GTM4WP are not triggered.
That's why I've chosen to listen to ajax response and trigger the event. If the function for triggering was separate, it would be much easier for developers to fix the missing events in such themes. So instead of long single function, there would be parts handled by smaller functions with single purpose.
When I have time, I'll try to change the code in my repo and give you a link. This is not a PR ready idea :)

[duracelltomi]

I plan to change how add to cart is being tracked as it turned out that when there are other plugins used that could prevent the add to cart event for some reason (user did not select all the necessary options) then the event is still tracked when pressing the button.

Unfortunately the added_to_cart event on the frontend is not triggered when the shop is not using the ajax cart functionality.

Therefore I plat to switch to use a WooCommerce hook on the backend and trigger the JS event on the next page load or so.... still not confident... :-\