WAIT: Issue with add_to_cart Tag in GTM4WP Plugin

Bugs
1

Hello,

Firstly, I would like to express my gratitude to the great builder and community.

I am currently utilizing enhanced e-commerce tracking through Thomas Geiger’s GTM4WP plugin. While all tags are firing as expected, I have encountered an issue with the add_to_cart tag not triggering. It seems to be a known problem associated with Ajax Add to Cart functionality.

I am reaching out to inquire if there is any solution available to resolve this issue without having to disable the AJAX add to cart feature on the builder. I find this feature to be quite beneficial and would like to keep it active on the site.

I would greatly appreciate any assistance or help you could provide on this matter.

Thank you for your time and support.

Best regards,

2

Hi @KenAdams,

Welcome to the forum :slight_smile:

Tbh I’m not really sure how GTM4WP is tracking the add_to_cart event so it might be best to reach out to their dev team about this. If they mention that there’s something we can do on our end feel free to share the details with us and we’ll see what we can do.

3

Hello,

Thank you very much for the response. I appreciate it.

This issue only arises when Ajax Add to Cart is enabled. Everything works correctly when it is turned off.

The response in the thread where I was investigating a possible issue with the gtm4wp plugin owner is as follows:

“Hi,

Without seeing your site I can not tell you the exact reason.
Most probably the HTML/CSS of your add to cart buttons are unique to your theme and GTM4WP can not catch clicks on it.

There are some requirements that GTM4WP needs to track all ecommerce interactions on your site:
https://gtm4wp.com/gtm4wp-for-developers/how-to-make-your-wordpress-theme-compatible-with-enhanced-ecommerce-tracking”

Here is the link to the entire thread

I understand that the problem may be in the plugin and not in Bricks Builder. Nevertheless, perhaps someone has already solved this problem, and maybe it could be resolved with the help of Bricks Builder.

For any assistance, I will be grateful.

4

Hi @KenAdams ,

Based on the documentation given, seems like Bricks is following the standard practice and shouldn’t have the issue.

By the way, did you place the template hooks?

If not, please try if it resolves your issue.

Are you using your single-product template? If yes, please try to put your template as a draft and test it with Bricks’s default single-product template.

If the above suggestions do not work, please send your temp admin login access to help@bricksbuilder.io and include this thread URL as a reference.

Regards,
Jenn

5

Hello itchycode,

Thank you very much for your response. I appreciate your willingness to help.

Yes, I have tried using the template hook as per the documentation. However, unfortunately, no changes occurred. I also disabled the single product template and tested it with the default template for a simple product, as you suggested. Unfortunately, this change did not help either.

The only instance where I noticed this tag working is when I use the “Product” element provided by Bricks Builder in the “product archive” template. However, when it comes to a simple or variable product, it doesn’t seem to work at all. Unfortunately, it doesn’t seem to work for any type of product.

I would like to provide you with admin access via the email you provided, but the issue is occurring on multiple pages, so I suspect the problem is elsewhere.

It’s interesting to note that if Ajax WooCommerce is turned off in Bricks Builder, the tag starts firing, and everything works fine.

Anyway I can create a new admin for this e-mail as stated “help@bricksbuilder.io” if necessary. So, should I create a new admin for this e-mail?

Thank you once again for your response and have a nice day.

Best regards,

6

Hi @KenAdams ,

Yes please send it to our email and remember to include this thread URL as a reference.

Regards,
Jenn

7

Hi there,

Thank you so much for the login details via email.

I have checked your template setup and all are in place.

When AJAX add to cart is enabled in Bricks, I can see all GTM4wp-related data were submitted together as per my below screenshot.
image

However, I am not very sure if this plugin supports AJAX add to cart in a Single product page or not.

I checked their website, and documentation but nowhere did they mention AJAX add to cart.

From the article you provided in the forum, we can see that the plugin is following the standard Storefront theme. As far as I know, this theme has no AJAX add-to-cart feature on Single product page as well.
https://gtm4wp.com/gtm4wp-for-developers/how-to-make-your-wordpress-theme-compatible-with-enhanced-ecommerce-tracking

image
image2568Ă—990 189 KB

I am afraid we can’t do anything here as Brick already follows every standard WooCommerce setup on Single product page.

I also found this support ticket from and seems other people also facing issue when using AJAX add to cart on single product page,

I would suggest you check with this plugin support team. Otherwise gonna disable AJAX add to cart.

Regards,
Jenn

8

Hello itchycode,

I hope this finds you well.

Thank you for promptly addressing the issue and for your willingness to help. I truly appreciate it. If you would have any suggestions for me - feel free to share. If I come up with any idea that is working - I will let you know.

I would like to ask, is there any possibility if I turn off AJAX add to cart, so that the mini cart will appear after the product is added to the cart?

Once again, thank you, and best regards.

9

Hi @KenAdams ,

I am afraid it’s a little difficult to open mini cart on page load without AJAX enabled.

But you can try this snippet.

Amended code:

add_action( 'wp_footer', 'trigger_for_ajax_add_to_cart' );
function trigger_for_ajax_add_to_cart() {
    if ( isset($_POST['add-to-cart']) && $_POST['add-to-cart'] > 0
    && isset($_POST['quantity']) && $_POST['quantity'] > 0 ) :
    ?>
    <script type="text/javascript">
        (function($){
            setTimeout(function(){
            $( ".bricks-woo-toggle" ).trigger( "click" );
        }, 500);
        })(jQuery);
    </script>
    <?php
    endif;
}
10

Hi @KenAdams ,
did you manage to find a solution ?
I tried everything from my side, it does not work.

Thanks

11

Just wanted to share a solution I found for an issue that still seems to trip people up.

Bricks correctly applies the .add_to_cart_button and .single_add_to_cart_button classes to the buttons, which GTM4WP listens for. However, Bricks wraps the button content in a <span> (or an <svg> if it’s an icon-only button).

When a user clicks the inner element (text/icon), the event target becomes that inner element, not the button itself. As a result, GTM4WP doesn’t detect the click and won’t fire the add_to_cart event.

:white_check_mark: The fix:

Add the following CSS to your site:

.add_to_cart_button *,
.single_add_to_cart_button * {
  pointer-events: none;
}

This ensures that any click inside the button always registers on the button element itself, allowing GTM4WP to catch it properly.

Hope this helps anyone who’s been scratching their head over this one!

12

Update on this solution: this only works when the Google for Woocommerce plugin is enabled! When just the GTM4WP plugin is enabled, this does not solve this issue.

Upon further investigation, I came to the following conclusions:
GTM4WP is looking for add to cart clicks using the following selectors:

  • .add_to_cart_button:not(.product_type_variable, .product_type_grouped, .single_add_to_cart_button)
  • .single_add_to_cart_button:not(.disabled)

As you can see, the .single_add_to_cart_button may not have the .disabled class. However, because Bricks adds this class to show the loading state of the add to cart button, the click event will not fire, and the add_to_cart event won’t be sent to the Google Tag.

I’m not sure if this is something Bricks needs to address, or that the author of GTM4WP should remove the :not(.disabled) part.

Edit - created a Github issue for the GTM4WP plugin: Add_to_cart event not triggered due to `.disabled` class used by Bricks Builder · Issue #407 · duracelltomi/gtm4wp · GitHub