如何为PrestaShop 1.7.7版本添加Google Tag Manager？

排查及修复步骤 #

• 给noscript代码添加{literal}标签
  Smarty模板会自动解析代码中的特殊字符或类变量格式，你没给noscript代码加{literal}的话，Smarty可能会篡改GTM的代码结构，导致GTM无法识别。把noscript代码用{literal}包裹起来，确保代码原封不动输出：

  {literal}
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  {/literal}
  

• 核对GTM容器ID
  检查head里的脚本和noscript代码中的GTM-XXXXXX是否完全一致，并且是有效的容器ID——ID写错的话，GTM肯定无法匹配识别。

• 验证页面源码输出
  打开页面右键查看源代码，确认head中的GTM脚本、body下方的noscript代码都完整输出，没有被截断或篡改。比如看脚本里的gtm.start参数是否正常，noscript的iframe地址是否完整无缺失。

• 排查代码或环境限制

  • 检查是否有广告拦截工具阻止了GTM加载，或者站点的内容安全策略（CSP）限制了www.googletagmanager.com的资源请求。如果有CSP，需要添加对应规则允许GTM的脚本和iframe加载。
  • 确认页面没有其他JS代码干扰GTM脚本的执行。

• 清空Smarty缓存
  如果站点开启了Smarty缓存，修改模板后必须清空缓存目录（一般是项目里的cache文件夹），或者通过后台缓存清除功能刷新，确保新配置的代码被渲染到页面上。

内容的提问来源于stack exchange，提问作者OWS