Refactored last merge request

Author: ihorvansach

etc/adminhtml/system.xml

@@ -169,7 +169,7 @@ height="0" width="0" style="display:none;visibility:hid
                 <label>Page Speed Optimization</label>
                 <field id="enabled" translate="label comment" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
                     <label>Enable Deferred Script Load</label>
-                    <comment>If enabled Facebook Pixel JavaScript will be loaded only after users first click, scroll, or mouse touch. It is recommended to keep it enabled for better page speed performance.</comment>
+                    <comment>If enabled Google Tag Manager JavaScript will be loaded only after users first click, scroll, or mouse touch. You can enable it for better page speed performance.</comment>
                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                 </field>
             </group>

view/frontend/templates/js_code.phtml

@@ -14,42 +14,21 @@ if (!isset($escaper)) {
 ?>
 <!-- Google Tag Manager -->
 <script>
-    function mfLoadGtm() {
-        <?php if ('use_public_id' === $block->getConfig()->getInstallGtm()) { ?>
-            <?php if ($block->isSpeedOptimizationEnabled()) { ?>
-            var actionDetected = false;
-            document.addEventListener('scroll', initGTMPixel);
-            document.addEventListener('mousemove', initGTMPixel);
-            document.addEventListener('touchstart', initGTMPixel);
-            function initGTMPixel()
-            {
-                if (actionDetected) return false;
-                document.removeEventListener('scroll', initGTMPixel);
-                document.removeEventListener('mousemove', initGTMPixel);
-                document.removeEventListener('touchstart', initGTMPixel);
-                actionDetected = true;
-
-                if (triedToLoadPixel) {
-                    mfLoadGTMPixel();
-                }
-            }
-            <?php } else { ?>
-            var actionDetected = true;
-            <?php } ?>
-
-        function mfLoadGTMPixel() {
-            triedToLoadPixel = true;
-            if (!actionDetected) return false;
-            !function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-            'https:<?= '/' . '/' ?>www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-            }(window,document,'script','dataLayer','<?= $escaper->escapeHtml($block->getPublicId()) ?>');
+    <?php if ($block->isSpeedOptimizationEnabled()) { ?>
+        document.addEventListener('scroll', mfGtmUserActionDetect);
+        document.addEventListener('mousemove', mfGtmUserActionDetect);
+        document.addEventListener('touchstart', mfGtmUserActionDetect);
+        function mfGtmUserActionDetect()
+        {
+            document.removeEventListener('scroll', mfGtmUserActionDetect);
+            document.removeEventListener('mousemove', mfGtmUserActionDetect);
+            document.removeEventListener('touchstart', mfGtmUserActionDetect);
+            window.mfGtmUserActionDetected = true;
+            mfLoadGtm();
         }
-        <?php } elseif ('use_head_and_body_script' === $block->getConfig()->getInstallGtm()) { ?>
-            <?= $block->getGtmScript(); ?>
-        <?php } ?>
-    }
+    <?php } else { ?>
+        window.mfGtmUserActionDetected = true;
+    <?php } ?>
 
     <?php if ($block->isProtectCustomerDataEnabled()) { ?>
     document.addEventListener('DOMContentLoaded', function () {
@@ -86,19 +65,41 @@ if (!isset($escaper)) {
         }
 
         if (customerDataAllowed()) {
+            window.mfGtmUserCookiesAllowed = true;
             mfLoadGtm();
         } else {
             let interval = setInterval(function () {
                 if (!customerDataAllowed()) return;
                 clearInterval(interval);
+                window.mfGtmUserCookiesAllowed = true;
                 mfLoadGtm();
             }, 1000);
         }
     });
 
     <?php } else { ?>
-    mfLoadGtm();
+        window.mfGtmUserCookiesAllowed = true;
+        mfLoadGtm();
     <?php } ?>
 
+
+    function mfLoadGtm() {
+        if (!window.mfGtmUserActionDetected) return false;
+        if (!window.mfGtmUserCookiesAllowed) return false;
+
+        if (window.mfGTMTriedToLoad) return;
+        window.mfGTMTriedToLoad = true;
+
+        <?php if ('use_public_id' === $block->getConfig()->getInstallGtm()) { ?>
+        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+            'https:<?= '/' . '/' ?>www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+        })(window,document,'script','dataLayer','<?= $escaper->escapeHtml($block->getPublicId()) ?>');
+        <?php } elseif ('use_head_and_body_script' === $block->getConfig()->getInstallGtm()) { ?>
+        <?= $block->getGtmScript(); ?>
+        <?php } ?>
+    }
+
 </script>
-<!-- End Google Tag Manager -->
+<!-- End Google Tag Manager -->