Get best of the week

Simo Ahava提供的Google跟踪代码管理器的自定义HTML跟踪代码指南

1月底，Simo Ahava在他的博客中发布了有关在Google跟踪代码管理器中使用自定义HTML标记的可能性的评论。自定义HTML标记提供了足够的机会来更改网站上的内容，但是您需要非常小心-标记功能及其处理会带来很大的风险。 MediaGuru分析师Timur Ledenyov已为您翻译了此有用的评论。

自2012年底以来的相当长一段时间，最重要的GTM选项之一是“自定义HTML”标记。这个魔术工具允许GTM将HTML元素添加到网站页面。自2012年以来，Google跟踪代码管理器已从具有自定义标记模板的隔离环境发展成为无限的客户端内容管理解决方案。

在本文中，我们将考虑Custom HTML标记的原理及其应用的可能性。

自定义HTML标签填充


顾名思义，“自定义HTML”标记允许您将HTML元素放置在网站页面上。创建它：



<script>
  console.log('Hello!');
</script>

<div>
  <span>Hello!</span>
</div>

此标记将三个元素添加到页面：

  • <script>，它是用JavaScript编译和执行的；
  • 块div;
  • <span>包括在 <div>

当您发布一个容器并查看JavaScript容器的最小化源时，它看起来像这样：



精美的标签看起来像这样，因为HTML是经过编码的，这是在将字符串定义为HTML元素之前的明智之举。

enableIframeMode和enableEditJsMacroBehavior标志是UI中不再可见的旧功能。如果您知道如何，可以在“自定义HTML”标签界面中将其显示。但这不会影响任何事情。

因此，您创建了一个Custom HTML标记，并了解了如何将其添加到容器中。但是页面上会发生什么，到底在哪里？

注射


在Google跟踪代码管理器中触发“自定义HTML”代码后，以下机制将启动：

  1. 将创建一个虚拟对象<div>，并使用.innerHTML属性向其中添加一个表示您的Custom HTML标签的编码字符串。
  2. 这将迫使浏览器将编码后的字符串视为HTML，以便将添加到“自定义HTML”的标签转换为HTML元素。
  3. 这些元素一一地从<div>注射中移出并进行注射。
  4. 然后，将每个元素添加为最后一个子document.body元素。

在此过程中有一些细微差别：

  • Google跟踪代码管理器如何与队列中的onHtmlSuccess和onHtmlFailure交互
  • <script>注入之前如何清除元素的所有用户属性。

这是什么意思？您在Custom HTML标记中输入的所有内容都会添加到正文的末尾，无论注入时是什么。通常，它们的意思是页脚，但是鉴于现代的页面布局，这不是必需的。



重要：在页面上添加新元素时，您将开始重新安排内容。通常，浏览器应重新计算元素的大小，位置，布局和属性；嵌入元素之前，周围或嵌套。

这不是那么容易。您添加的每个项目都会加剧该问题。在单页应用程序中，它们可能不会在过渡之间重置DOM，因此您可以在一页上观察数百个此类元素，每个元素都会使性能越来越差。我们将在总结中回到这一点，但是在总结之前我会说：

避免在没有明显需求的情况下使用自定义HTML标记。

我承认，这样的免责声明并非没有讽刺意味。

自定义HTML脚本脚本


为什么要使用这些标签并应用标签管理解决方案来注入元素？我没有一个快速而明确的答案，这是一个很好的问题。

我可以说容器中的大量自定义HTML可以讨论以下情况之一：

  1. 您面对的情况过于复杂，标准GTM标签或自定义模板不适合使用。
  2. 您是GTM（或JavaScript）的新手，并且您不了解可以使用标准标记或自定义模板替换任何自定义HTML标记。
  3. , -, .
  4. , - .
  5. , Google Tag Manager, .

这是您的容器，当然，您有权按自己的意愿使用它。但是，如果出现方案2和3，我强烈建议您更改现状。忽略GTM和JavaScript的复杂性可能会干扰这些技术带来的积极影响。从长远来看，与您的公司所建立的限制背道而驰的工作还可能导致分歧，并导致通信中断，糟糕的站点和不可靠的信息存储。

让我们看一下您可能想尝试自定义HTML标记的一些情况。

将项目添加到页面上的特定位置


自定义HTML标记的缺点是它将元素嵌入到最后<body>。做什么的？如果该元素是视觉组件（即应在屏幕上显示），则很可能端点<body>不是您希望看到它的地方。要解决此问题，您需要使用JavaScript及其DOM操作方法。

诀窍是找到页面上已经存在的某些元素，并相对于它放置一个新元素。

例如，我想添加一个小的子标题页，使它看起来像这样：



现在，如果你创建一个自定义HTML如下：<h3> It's really cool - I promise!</h3>，元素被添加到最后<body>并不会看起来非常好。

所以我需要使用JavaScript创建一个新元素，然后相对于页面标题放置它。

<script>
  (function() {
    //    <h3> 
    var h3 = document.createElement('h3');
    
    //  
    h3.innerText = "It's really cool - I promise!";
    
    //     <h1>
    var title = document.querySelector('h1');
    
    //      <h1>
    if (title) {
      title.parentElement.insertBefore(h3, title.nextSibling);
    }
  })();
</script>

您在上面的屏幕快照中看到的最终结果。

具有讽刺意味的是，您可以使用自定义HTML创建一个元素（<script>），该元素将创建另一个元素（<h3>）。是的，如果您可以在“自定义HTML”中定义元素的放置位置，那就太好了。实际上，如果有一个自定义模板，它允许您创建一个能够选择元素位置的元素，那就更酷了。因此，您根本不需要在代码末尾插入脚本！但是我们分心了。

将脚本放置在<head>尽可能高的位置


这部分是由于先前的情况造成的，但根据这种情况的发生频率，应特别注意。有时您会被问到：“将脚本放到上方<head>。”

因此，您需要脚本尽可能早地在页面上运行。中的元素越高<head>，浏览器将其作为显示页面的一部分处理的速度就越快。

但是，在使用Google跟踪代码管理器时，这种优势会丢失。通常，在加载GTM库后，处理<head>已经结束，浏览器正在使用may和main进行渲染<body>。因此，试图将脚本添加到<head>尽可能高的位置是没有意义的，实际上只会损害最终结果。

为什么？创建自定义HTML时，它会形成一个元素并将其嵌入<head>。首先，浏览器需要添加自定义HTML（性能指标），然后创建一个新元素（另一个性能指标），最后向中添加一个新元素<head>（性能指标）。


相反，您需要将<script>HTML 直接添加到“ 自定义”。使用此方法，它将被添加到末尾<body>，浏览器将尽快执行它。

下载第三方JavaScript代码


让我们从上一个场景继续进行实验。假设您有一个第三方开发人员，您要将其JavaScript代码上传到站点。并且您意识到只需要<script>使用自定义HTML向页面添加元素。

在这种情况下，您根本不需要使用自定义HTML。

而是制作一个使用injectScript API加载库的自定义模板。

自定义模板针对JavaScript注入和加载进行了优化，并且它们提供了用于安全（更安全）注入的权限和策略模型。



将来，这将是实施的最佳方法<script>。这对其他脚本没有帮助，因为标准的JavaScript模板集非常有限。因此，例如，如果要添加自定义事件侦听器，则需要自定义HTML标记。

更改UX


您要使用“自定义HTML”要做的一件事就是修改UX（用户体验）。为此，您可以使用cookie横幅之类的东西，可以更改页面上的样式或添加它<iframe>，这会为您的电子商务网站加载一些便捷的小部件。

在此提醒您，使用Google跟踪代码管理器可能会带来一些风险。

  1. (, Brave) / GTM. ( , ).
  2. / , . , HTML . Google Tag Manager , , , . querySelector() , – - .
  3. 我上面提到的所有与性能相关的原因都添加到了这一切中。按递增顺序添加每个动态元素将降低页面性能，这将导致烦人的事情：您的自定义元素将开始出现和消失；数据质量会下降（当您动态更改的iframe在更改之前有时间时）会导致滞后和页面冻结，尤其是在单页面网站上。

因此，请勿考虑将Google跟踪代码管理器用作内容管理系统。

发现


这是自定义HTML标记功能的简要概述。

如果我可以在2012年与自己谈谈，我建议自己尽早考虑自定义HTML标记的缺点，并停止对Google标记管理器添加脚本的无限可能性产生幻想。相反，在做出冒险的决定之前，要以复杂的方式思考-有关组织，整个站点以及GTM工作所在的环境。

但是，今天有自定义HTML的应用程序。使用自定义HTML标记（document.addEventListener（））创建点击侦听器可能比使用GTM触发器运行某种自定义代码更有利。


这是因为单击触发器会在每次触发时一遍又一遍地运行标签（一次又一次地注入）。如果在“自定义HTML”标记中创建单击侦听器并使用它来处理重复任务，则可以避免在实现过程中造成混淆。

我还保证了自定义HTML在支持假设方面的便利。通过将更改发布到特定的访问者样本中，您可以快速尝试新的设计或功能。如果结果令人满意，则可以建议将这些更改包含在主站点代码中。

但是，我希望有一天自定义模板将替代自定义HTML标签。

作为使用自定义HTML标记的用户的分词，尤其是对于那些想要添加网络上发现的代码的用户而言，著名的俄罗斯谚语派上用场：
信任，但要验证。

如果您不知道代码在做什么，请与熟悉的Web开发人员联系。

More articles:


All Articles