如果当你刷新启用了GTM预览和调试模式的页面，或者单击将你重定向到另一个页面的链接的时候，则 Google跟踪代码管理器的预览和调试模式将与该页面一起刷新，但是GTM页面有时候会丢失，或者前台一直不显示gtm的调试框，这个情况一般都是经常出现的。
＃1、 GTM 尾部代码没有添加到网站中
你要求开发人员遵循跟踪代码管理器页面的说明，并正确将容器代码段添加到网站中去，这是所有工作的前提。如果一段时间后，这里不对劲–启用它后，Preview and Debug 控制台仍然不出现的话，说明很有可能你的代码布置是有问题的。
我之前也写过验证的方法，有两种方法可以验证是否成功布置了GTM代码段：
- 使用Tag Assistant Chrome扩展程序，该扩展程序可检查页面上的Google像素（例如Google Analytics（分析），Adwords，Google Tag Manager）并提供实时反馈成功与否。
- 检查网站的源代码。在浏览器中单击Ctrl + U（Mac用户是CMD + U），然后在其中查找GTM容器代码，看看有没有。
为了进行验证，请打开你的GTM帐户并检查屏幕的右上角-看到GTM容器ID，将其与添加到网站源代码中的代码进行比较，这些信息都不能出错。
＃2、在错误的容器中启用了GTM预览和调试模式
你使用的Google跟踪代码管理器帐户和容器越多，最终犯此错误的可能性就越大。因为当你的容器越多的话，你有时候操作代码就可能串了，一定要仔细对比下。因此，请不要忘记仔细检查容器是否正确，启用调试的时候也要看看对应的容器是不是正确的，别搞串了。
＃3。需要使用相同特定的浏览器
启用“预览和调试”模式后，GTM会向你的浏览器发送一个特殊的Cookie，使你可以预览而不更改实际站点。这将看到你的站点及其更改，就好像它们已被部署一样。因此，必须在同一浏览器中同时打开Google跟踪代码管理器帐户界面（用于设置Cookie）和启用了P＆D模式的网站（用于读取Cookie的数据）。在这里我推荐用谷歌浏览器和火狐浏览器，并且要保证你网站和GTM后台是使用同一个浏览器，一定要注意！
以下是一些可能有效和无效的示例：
- 可以工作 –谷歌标记管理工具帐户和你的网站在Chrome的常规标签页中打开。
- 无法使用 -GTM帐户在Chrome的常规标签中打开，但你的网站在隐身模式（也称为私有）标签中打开，或者在360浏览器打开。
- 无法使用 -使用Firefox打开GTM帐户，并使用Chrome打开你的网站也不行。
＃4。确保你的浏览器接受第三方Cookie
一些用户确实担心他们的在线状态和安全性，因此他们决定禁用第三方Cookie。在某些情况下，浏览器的默认设置可能禁用了第三方Cookie。还记得上面第三点中提到的“特殊” cookie吗，其实这也是第三方Cookie。没有它，预览和调试模式将不会出现在网站上，所以最好做一下调整：
- 在浏览器的设置中启用第三方Cookie。教程大家可以网上找一下。
- 保持第三方Cookie处于禁用状态，但需要向 www.googletagmanager.com 添加例外白名单。
＃5、使用Tag Manager Injector留了空白
如果你以前从未使用过Tag Manager Injector chrome扩展程序，那么建议你用一下，这样可以尽可能轻松快捷地过渡到Google跟踪代码管理器。该扩展程序帮助你能够在站点上运行/预览GTM容器，而无需在页面上添加任何JavaScript。只需打开扩展名并将GTM容器的ID粘贴到预定义字段中即可。
但是，需要注意。你需要在此ID之前或之后精确地粘贴该ID，不能有任何空格，否则TagManajerInjector将无法工作，那么预览和调试控制台也将不会出现在浏览器中。例子：
- “ GTM-XXXXX” 不正确（因为GTM容器ID之前有空格）
- 出于同样的原因，“ GTM-XXXXX ”也不正确–空白，但这一次是在容器ID后面。
- 唯一正确的选项是“ GTM-XXXXX” 。
同时 Tag Manager Injector 的另一个强大功能是在某些网站上注入Google跟踪代码管理器代码段的功能-只需使用包含设置并定义域或正则表达式即可。
但是，这里也还有一个需要注意的点。将此设置错误，最终可能也会阻止网站显示“预览和调试控制台”。因此，你必须添加了正确的正则规则或将该字段留空（因为这是“包括所有网站”的默认设置）。
＃7、启用预览和调试模式后记得刷新网站
实际上，这里没有太多要要说的内容。每当启用P＆D模式时，请一定刷新你的网站，在初学者中，这是非常常见但仍很有可能出现的错误。
＃8、预览和调试模式是全白？
我自己暂时没有遇到这个问题，但是注意到互联网上很少有人试图解决这个问题。我的建议是可能是浏览器扩展/插件导致的。所以你可以尝试一一禁用它们，并检查是否有帮助（通过在启用“预览和调试”控制台的情况下刷新网站），该问题也可能是由你网站的CSS和GTM之间的冲突引起的。
当GTM在网站上加载“预览和调试”面板时，如果它们共享相同的名称空间，则可能会发生样式冲突。换句话说，如果你网站上的特定元素使用相同的样式类（例如div class =“ gtm-some-class”），则在调试时可能会出现问题。
如果发生这种情况，最好的办法是通过UI中的“发送反馈”链接或在产品论坛中发布问题，与开发人员团队联系。
＃9、预览面板仅在约10分钟和多次刷新后出现
更新＃2： 有些朋友可能会抱怨，尽管容器和网页均已刷新，但预览和调试面板并未立即出现在网站中。他们一般需要大约10分钟的等待时间，直到Google跟踪代码管理器P＆D面板重新开始工作。我仍然不确定其背后的原因是什么（看起来像cookie的问题），但是我注意到清除/临时禁用缓存可能会有帮助。
更新＃3： 大佬 Brian Kuhn 解释了导致此问题的原因：
Chrome最近更改了其location.reload（）API的工作方式。这破坏了GTM从浏览器缓存中清除旧的（非预览版）gtm.js的能力。结果是你看不到gtm.js的预览版本，可能直到该缓存值过期（约15分钟）才行。
不用担心，还有一种非常方便的解决方法。
以下分步教程适用于Chrome用户。如果您使用的是其他浏览器，请搜索类似功能。我很确定其他浏览器也提供类似的功能。
在Chrome中，打开开发人员工具（在Windows上按F12，在Mac 上 按Cmd + Opt + I，或者直接转到 Chrome菜单>更多工具>开发人员工具，然后会出现一个面板。
单击右上角的三个点（1），然后选择“设置”（2）
找到“ 网络” 部分，然后单击“ 禁用缓存（打开DevTools时）”复选框。
现在，使用GTM用户界面和你的网站刷新两个浏览器选项卡（使开发人员工具保持打开状态）。就我而言，它是有帮助的，并且出现了Google跟踪代码管理器P＆D面板。出现了，就可以关闭“开发人员工具”面板了。如果问题再次出现，只需打开开发人员工具并刷新浏览器选项卡即可。
＃10、无法调整预览和调试控制台的大小？
我暂时不确定这个错误的确切原因是什么，你可以试试通过上下拖动顶部边框来调整Google跟踪代码管理器P＆D控制台的大小。不过，有时当我尝试更改P＆D控制台的高度时会遇到问题，无法调整，解决办法就是清除浏览器cookie和缓存来试试行不行。
＃11、AdBlocker或其他类似的扩展程序阻止了GTM
当今主流网络浏览都会有大量的插件，包括广告和内容阻止程序等。例如，Firefox提供了安装即用的跟踪保护功能，并且默认情况下会阻止 Google Analytics（分析）。
还有流行的浏览器扩展程序（例如 Ghostery 和 AdBlock Plus ）也可以阻止Google跟踪代码管理器。因此，如果你使用的是一种扩展程序，请尝试禁用它们，看看是否有帮助。同样的问题也适用于阻止跟踪器的扩展，例如 Avira Browser Safety， Ghostery 或 DuckDuckGo Privacy。
这种情况不会经常发生，但仍有概率。
＃12、CloudFlare正在改变GTM.JS的加载方式
一个内容交付网络或CDN旨在通过广泛的地理网络来缓存在网站上的静态内容。使用CDN的最终结果是，静态内容将从与访问者最接近的网络节点，更快地传递给访问者，从而缩短了站点访问者之间加载页面所需的时间。
CDN也会影响JavaScript的提取方式，并且gtm.js（Google跟踪代码管理器的JS库）也不例外。如果正在使用 CloudFlare（一种非常流行的CDN解决方案），请确保已禁用名为Rocket Loader的功能 。我还是建议你就此问题咨询一下开发人员。
＃13、内容安全策略阻止加载GTM脚本
一个内容安全策略（CSP）是开发者配置与添加一个附加的保护层的Web服务器。有了CSP后，网页加载和执行的所有资源都需要传递CSP指令（包括Google跟踪代码管理器的脚本）。
如果“预览和调试”模式根本没有出现或没有常规样式出现，并且在开发人员控制台中看到错误，例如“ 拒绝加载[…]，因为它违反了以下内容安全策略指令…”。”，那么你也就找到了GTM无法运行的原因了。有什么解决方案？开发人员将不得不修改CSP了，修改下应该就好了。
＃14、正在使用Firefox隐私模式
需要注意的是，Firefox隐私模式会阻止Google跟踪代码管理器。因此，在这种情况下，应该退出私有模式并以常规模式浏览网页即可。
＃15、GTM代码在复制/粘贴给开发人员时被意外修改
在工作对接中，当你想将GTM容器代码发送给开发人员，从标签管理器的界面复制代码，然后将其粘贴到某个Word文件（例如Google Docs或某些其他文本编辑工具），然后将代码发送给开发人员时，就会发生这种情况。
你要知道文本编辑工具会根据某些语法规则“固定”容器代码，可能会删除或添加一些间距，更改符号等，或者出现乱码等情况。即使代码看起来一样（乍看之下），也无法使用。
举个例子，在网站上，开发人员添加了GTM容器代码段。但是，如果你仔细查看撇号（在下面的屏幕截图中），它们看起来是错误的。在JavaScript中，撇号必须为半角，但在下面的屏幕截图中，撇号为”。相似，但不相同。
一个解决方案就是在GTM界面中复制GTM容器代码并将其粘贴到.txt文件（例如，通过记事本），保存该文件，然后将其发送给开发人员。
GTM预览模式不起作用：结论
Google跟踪代码管理器的预览模式可让你浏览已实施容器代码的网站，启用预览模式的网站将在网站内容下方显示一个调试器窗格，以便可以检查触发了哪些标签以及按什么顺序进行调试。全面的预览和调试过程将帮助你避免存在标记问题而损害实时站点的风险。
如果Google跟踪代码管理器的预览模式仍然不起作用（即便阅读了此文章），大家可以一起交流分享。
