如何防止 Google 标签管理器覆盖 document.write()？

Question

我们正在为我们的网站使用 Angular。由于并非所有页面都已移植到 Angular，我们实施了一种混合方法：

每个请求都首先转到 Angular。加载后，它会检查 Route 是否存在
如果没有，HTML-页面从后端获取
DOM 中的 html-元素（即完整页面）被替换为响应正文

ngOnInit() {
  this.railsService.fetchRailsPage(this.router.url).subscribe(
    (response) => this.replaceDOM(response),
    (errorResponse) => this.replaceDOM(errorResponse.error)
  );
}

private replaceDOM(newContent: string) {
  document.open();
  document.write(newContent);
  document.close();
}

由于旧页面中的所有 a-href 都是普通的旧 href（不是 Angular 的 routerLinks），一旦用户导航离开，页面将重新加载并 Angular 再次启动。

到目前为止，它有效，但是：我注意到有时 DOM 没有被响应正文替换。

调试使我们得出结论，Google 跟踪代码管理器可能是问题所在。它会覆盖 document.write() 和许多其他默认 Javascript 函数。

这是为什么？ 以及如何防止获取默认版本，例如document.write()?

Answer 1

借调艾伦。

请确保您运行两项测试：

使用开发工具的请求拦截功能拦截 gtm 并尝试重现问题。
尝试创建一个空的 GTM 容器，将其加载到页面上并重现问题。

如果第一个测试显示问题仍然存在且 GTM 被阻止，则不是 GTM。

如果第二次测试表明问题已解决，则不是 GTM 问题，而是其配置中使用的逻辑问题。

如果有的话，我首先要确保 GTM 中没有自定义代码会额外覆盖 document.write（我以前从未见过，但绝对有可能）。然后我会广泛审核 GTM 部署的所有自定义脚本。之后，我会尝试暂停所有元素可见性触发器（如果已部署）并查看是否有帮助。

GTM 可能旨在覆盖写入以便能够观察 DOM 更改。但它做得很温和，在那里添加了一点跟踪，但没有改变它的本质。 GTM 的核心逻辑极不可能与 Angular.

发生冲突

//UPD 刚和一位同事在 Measure 上聊天。看起来 GTM 覆盖 document.write 的唯一情况是有自定义 HTML 标签可以选择“支持 document.write”。元素可见性触发器使用突变和交集观察器，而不是监听 document.writes.

如何防止 Google 标签管理器覆盖 document.write()？

How to prevent Google Tag Manager overwriting document.write()?

javascript

google-tag-manager

angular