Preparations for the server tracking

Author: ihorvansach

Block/GtmCode.php

@@ -121,7 +121,7 @@ public function getWebsiteId(): int
     protected function _toHtml(): string
     {
 
-        if ($this->config->isEnabled() && $this->getPublicId()) {
+        if ($this->config->isEnabled() /* && $this->getPublicId() */ ) {
             return parent::_toHtml();
         }
 

etc/adminhtml/system.xml

@@ -178,6 +178,35 @@ height="0" width="0" style="display:none;visibility:hid
                         ]]>
                     </comment>
                 </field>
+
+                <group id="preview" translate="label" type="text" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1" >
+                    <label>Debug View / Preview</label>
+                    <field id="enabled" translate="label comment" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+                        <label>Enable</label>
+                        <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    </field>
+                    <field id="secret" translate="label comment" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1" >
+                        <label>X-Gtm-Server-Preview HTTP Header (optional)</label>
+                        <depends>
+                            <field id="enabled">1</field>
+                        </depends>
+                        <comment><![CDATA[
+                                You can get the X-Gtm-Server-Preview value in the <a href="https://tagmanager.google.com/" title="Google Tag Manager" target="_blank">Google Tag Manager</a> container >
+                                Preview > &#10247; > Send requests manually.<br/>
+                                This value is used for debugging and the ability to view events in the preview mode of Google Tag Manager.<br/>
+                                <strong>Important!</strong> This value is changed by Google from time-to-time, before preview, please double check if the value is correct.
+                            ]]>
+                        </comment>
+                    </field>
+                    <field id="allow_ips" translate="label comment" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                        <label>Allowed IPs (comma separated)</label>
+                        <comment>Leave empty for access from any location.</comment>
+                        <backend_model>Magento\Developer\Model\Config\Backend\AllowedIps</backend_model>
+                        <depends>
+                            <field id="enabled">1</field>
+                        </depends>
+                    </field>
+                </group>
             </group>
             <group id="analytics" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                 <label>Google Analytics 4</label>

etc/config.xml

@@ -28,6 +28,11 @@
                 <account_id/>
                 <container_id/>
                 <tag_server_url/>
+                <preview>
+                    <enabled>0</enabled>
+                    <secret/>
+                    <allow_ips/>
+                </preview>
             </server_container>
             <analytics>
                 <enable>1</enable>

view/frontend/templates/js_code.phtml

@@ -167,14 +167,16 @@ if (!isset($escaper)) {
         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 if ($block->getPublicId()) { ?>
+            <?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 } ?>
         <?php } ?>
     }
 </script>

view/frontend/templates/no_js_code.phtml

@@ -12,7 +12,7 @@ if (!isset($escaper)) {
     $escaper = $block;
 }
 ?>
-<?php if (!$block->isProtectCustomerDataEnabled() || $block->isLoadBeforeConsent()) { ?>
+<?php if ($block->getPublicId() && (!$block->isProtectCustomerDataEnabled() || $block->isLoadBeforeConsent())) { ?>
     <!-- Google Tag Manager (noscript) -->
     <?php if ('use_public_id' === $block->getConfig()->getInstallGtm()) { ?>
         <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?= $escaper->escapeHtml($block->getPublicId()) ?>"