通过JavaScript在页面头部注入Matomo标签管理器代码：预览模式下代码未触发的问题排查

嘿，咱们来排查下为啥你的Matomo标签管理器脚本在预览模式下没触发执行～

你提到用这段代码注入脚本到<head>：

var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = `
var _mtm = window._mtm = window._mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true;
g.src='http://url.com/matomo/js/container_xyz.js';
s.parentNode.insertBefore(g,s);
`;
document.head.appendChild(script);

问题主要出在这几个容易忽略的点上：

• 预览模式的参数未传递：Matomo的预览模式依赖URL里的mtmPreviewMode和mtmContainerId参数来加载调试用的容器脚本，而你的代码直接硬编码了生产环境的容器地址，完全没处理这些预览参数。这就导致加载的还是普通生产脚本，根本不会触发预览调试逻辑。

• 初始化逻辑缺少预览配置：即使你加载了正确的脚本，预览模式还需要在_mtm数组里推送预览相关的配置项，告诉Matomo当前处于调试状态。你的代码里只推送了启动事件，没带上预览模式的标识。

• 脚本执行时机可能滞后：动态注入脚本的方式如果触发得太晚，可能会错过Matomo预览模式的初始化窗口期，导致调试钩子无法正常挂载。

修正后的代码示例 #

这里给你调整后的代码，解决上述问题：

// 先提取URL中的预览模式参数
const urlParams = new URLSearchParams(window.location.search);
const mtmPreviewMode = urlParams.get('mtmPreviewMode');
const mtmContainerId = urlParams.get('mtmContainerId');

var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = `
var _mtm = window._mtm = window._mtm || [];
// 如果处于预览模式，添加预览配置
${mtmPreviewMode ? `_mtm.push({'mtm.previewMode': '${mtmPreviewMode}', 'mtm.containerId': '${mtmContainerId}'});` : ''}
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true;
// 根据预览状态拼接容器脚本URL
var containerUrl = 'http://url.com/matomo/js/container_xyz.js';
${mtmPreviewMode ? `containerUrl += '?mtmPreviewMode=${mtmPreviewMode}&mtmContainerId=${mtmContainerId}';` : ''}
g.src=containerUrl;
s.parentNode.insertBefore(g,s);
`;
document.head.appendChild(script);

额外注意事项 #

• 确保你使用的预览链接是Matomo后台生成的，这类链接会自动带上mtmPreviewMode和mtmContainerId参数，不要手动修改或删除这些参数。
• 尽量把这段注入代码放在<head>的最底部，或者用DOMContentLoaded事件早期触发，避免错过预览初始化时机。
• 打开浏览器控制台检查是否有报错，比如容器脚本加载失败（如果Matomo域名和页面域名不同，要确认CORS配置是否允许跨域加载脚本）。

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