magento2: Blocking Google Analytics prevents Checkout

Preconditions

  1. Magento 2.2.1
  2. PHP 7.0.25-1~dotdeb+8.1
  3. mysql Ver 15.1 Distrib 10.0.32-MariaDB
  4. uBlock Origin 1.14.18 on client

Steps to reproduce

  1. Enable Google Analytics in Stores > Settings > Configuration > Sales >Google API
  2. Install uBlock Origin on client, or block Google Analytics in any other AdBlocker
  3. Go to Checkout

Expected result

  1. Checkout is working

Actual result

  1. Checkout is loading infinitely

The rest of the site works fine. Apparantly the checkout just cannot handle any errors and will stop functioning immediately.

GET http://example.com/pub/static/frontend/Magento/luma/en_US/Magento_GoogleAnalytics/js/google-analytics.js net::ERR_BLOCKED_BY_CLIENT

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 13
  • Comments: 34 (13 by maintainers)

Most upvoted comments

We should be able to control if we want to be tracked or not. If the final user want to have an ad blocker he’s free. Actually a third party as the google analytics shouldn’t broke the core functionality. It’s a major issue because we can’t control (and we never should) if our customers has an AdBlocker or not…

This seems to be related to magento/magento2#13061 and #12828 . The pr doesn’t appear to fix this issue though.

Even if you replace the x-magento-init block in Magento_GoogleAnalytic\view\frontend\templates\ga.phtml with…

<script type="text/javascript">
require(["Magento_GoogleAnalytics/js/google-analytics"], function (analytics){
        analytics({
            "isCookieRestrictionModeEnabled": <?= (int)$block->isCookieRestrictionModeEnabled() ?>,
            "currentWebsite": <?= (int)$block->getCurrentWebsiteId() ?>,
            "cookieName": "<?= /* @escapeNotVerified */ \Magento\Cookie\Helper\Cookie::IS_USER_ALLOWED_SAVE_COOKIE ?>",
            "ordersTrackingData": <?= /* @escapeNotVerified */ json_encode($block->getOrdersTrackingData()) ?>,
            "pageTrackingData": <?= /* @escapeNotVerified */ json_encode($block->getPageTrackingData($accountId)) ?>
        });},
        function(err) {
            console.warn(err);
        }
    );
</script>

…which shouldn’t be able to kill any javascript flow, checkout-loader is still not cleared and the checkout doesn’t work.

Error thrown is:

GET ####/en_GB/Magento_GoogleAnalytics/js/google-analytics.js net::ERR_BLOCKED_BY_CLIENT require.js:1895 

Caught error (printed as a warning is:

(index):261 Error: Script error for: Magento_GoogleAnalytics/js/google-analytics
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:166)
    at HTMLScriptElement.onScriptError (require.js:1681)

I’m not sure I understand requirejs enough to work out whats going wrong. I assume the error thrown by require.js:1895 which is not caught (?) is the culprit but I can’t see how.

Just commenting out the script fixes the cart, so it doesn’t have to load to work.

For enterprise maintainers using Magento_GoogleTagManager, #14874 does not fix the problem.

I applied the latest version of resolver.js and this does fix the problem as the whole isPending logic was revised by Magento core team.

Another solution is to just set the require.onError handler.

require.onError = function(e) {
  console.error("RequireJS Error", e);
}

You just need to create a template and add it before everything in the after.body.start block.

<referenceBlock name="after.body.start">
  <block name="requirejs-errors" class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/requirejs-errors.phtml" before="-"/>
</referenceBlock>

The added benefit of this solution is that it’ll catch any uncaught error during the requireJS process.

I am not suggesting this should be the actual solution, but here is a work around, since I don’t understand where the blocking comes from (although @andrewhowdencom seems to have an idea).

<!-- BEGIN GOOGLE ANALYTICS CODE -->
<script type="text/javascript">
        require(["jquery"], function ($){
            $.get("<?php echo $block->getViewFileUrl('Magento_GoogleAnalytics/js/google-analytics.js'); ?>",
            function( script, textStatus ) {
                require(["Magento_GoogleAnalytics/js/google-analytics"], function (analytics){
                        analytics({
                            "isCookieRestrictionModeEnabled": <?= (int)$block->isCookieRestrictionModeEnabled() ?>,
                            "currentWebsite": <?= (int)$block->getCurrentWebsiteId() ?>,
                            "cookieName": "<?= /* @escapeNotVerified */ \Magento\Cookie\Helper\Cookie::IS_USER_ALLOWED_SAVE_COOKIE ?>",
                            "ordersTrackingData": <?= /* @escapeNotVerified */ json_encode($block->getOrdersTrackingData()) ?>,
                            "pageTrackingData": <?= /* @escapeNotVerified */ json_encode($block->getPageTrackingData($accountId)) ?>
                        });
                    });
            }
            ,'text');
        });
</script>
<!-- END GOOGLE ANALYTICS CODE -->

It just tries to load the .js file using jquery first, only if this is successful does it allow require to have a run at it. If the jquery request fails there appears to be no adverse effects. If require fails there are, so don’t let it even try until we know it works.

@spectravp problem is, you don’t always want bundling enabled. And it should not matter if it’s enabled or disabled.

I’ll try to find out what the cause is and how to fix the loader thing.

I think adding the requireJS onError handler is a permanent solution.

This certainly is an issue. I can confirm it for the 2.2.3 version.

For anyone having the same Issue:

Check your Ad-Blocker settings 😉