add lazy load for script

Author: ihormandzyuk

Block/GtmCode.php

@@ -113,4 +113,14 @@ public function getConfig()
     {
         return $this->config;
     }
+
+    /**
+     * Retrieve true if speed optimization is enabled
+     *
+     * @return bool
+     */
+    public function isSpeedOptimizationEnabled(): bool
+    {
+        return (bool)$this->config->isSpeedOptimizationEnabled();
+    }
 }

Model/Config.php

@@ -48,6 +48,11 @@ class Config
      */
     public const XML_PATH_PROTECT_CUSTOMER_DATA = 'mfgoogletagmanager/customer_data/protect';
 
+    /**
+     * Speed optimization config
+     */
+    public const XML_PATH_SPEED_OPTIMIZATION_ENABLED = 'mffacebookpixel/page_speed_optimization/enabled';
+
     /**
      * @var ScopeConfigInterface
      */
@@ -247,4 +252,15 @@ public function getConfig(string $path, string $storeId = null)
     {
         return $this->scopeConfig->getValue($path, ScopeInterface::SCOPE_STORE, $storeId);
     }
+
+    /**
+     * Retrieve true if speed optimization is enabled
+     *
+     * @param string|null $storeId
+     * @return bool
+     */
+    public function isSpeedOptimizationEnabled(string $storeId = null): bool
+    {
+        return (bool)$this->getConfig(self::XML_PATH_SPEED_OPTIMIZATION_ENABLED, $storeId);
+    }
 }

etc/adminhtml/system.xml

@@ -165,6 +165,14 @@ height="0" width="0" style="display:none;visibility:hid
                     <comment><![CDATA[<strong class="colorRed">Warning!</strong> Enabling this option may cause the performance impact.]]></comment>
                 </field>
             </group>
+            <group id="page_speed_optimization" translate="label" type="text" sortOrder="65" showInDefault="1" showInWebsite="1" showInStore="1">
+                <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>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+            </group>
             <group id="customer_data" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                 <label>GDPR/CCPA/LGPD (Customer Data Protection Regulation)</label>
                 <field id="protect" translate="label comment" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">

etc/config.xml

@@ -31,6 +31,9 @@
                 <brand/>
                 <categories/>
             </attributes>
+            <page_speed_optimization>
+                <enabled>0</enabled>
+            </page_speed_optimization>
             <customer_data>
                 <protect>0</protect>
             </customer_data>

view/frontend/templates/js_code.phtml

@@ -16,11 +16,36 @@ if (!isset($escaper)) {
 <script>
     function mfLoadGtm() {
         <?php if ('use_public_id' === $block->getConfig()->getInstallGtm()) { ?>
-        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+            <?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()) ?>');
+            }(window,document,'script','dataLayer','<?= $escaper->escapeHtml($block->getPublicId()) ?>');
+        }
         <?php } elseif ('use_head_and_body_script' === $block->getConfig()->getInstallGtm()) { ?>
             <?= $block->getGtmScript(); ?>
         <?php } ?>