解决Google Tag Manager自定义HTML标签中SVG嵌入错误

本文旨在解决google tag manager自定义html标签中直接嵌入svg代码导致的“invalid html, css, or javascript”错误。我们将探讨gtm对svg的限制，并提供两种有效的解决方案：通过将svg转换为data uri格式，利用标签或css background-image属性进行嵌入，从而确保代码在gtm中正确运行。

GTM自定义HTML标签与SVG嵌入挑战

在使用Google Tag Manager (GTM) 的“自定义HTML”标签功能时，开发者常会尝试嵌入包含HTML、CSS和JavaScript的复杂结构，例如自定义横幅或弹窗。然而，当这些结构中直接包含SVG（Scalable Vector Graphics）标记时，GTM可能会报告一个“Invalid HTML, CSS, or JavaScript found in template”的错误。

这个错误通常不是因为SVG代码本身语法有误，而是GTM的内部解析和安全机制对直接嵌入的SVG标记有严格的限制。GTM的模板引擎可能无法正确处理或验证内联的<svg>标签及其子元素，从而导致校验失败。

考虑以下原始问题中的代码片段，其中包含了一个直接嵌入的SVG图标：

<div id="id-custom_banner" style="...">
    <div style="position: absolute; right: 0; top: -21px; cursor: pointer" onclick="removeCustomBanner(this.parentNode);">
        <!-- 此处直接嵌入的SVG代码是导致问题的原因 -->
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16.6 17" style="width: 20px; height: 20px; filter: drop-shadow(1px 1px 2px #333); -webkit-filter: drop-shadow(1px 1px 2px #333)"><polygon fill="#FFF" points="15.5,1.7 13.7,0 7.7,6.1 1.8,0 0,1.7 6,7.9 0,14.1 1.8,15.9 7.7,9.7 13.7,15.9 15.5,14.1 9.5,7.9 "></polygon></svg>
    </div>
    <!-- ... 其他横幅内容 ... -->
</div>
<script>
function removeCustomBanner(element) {
  element.remove();
}
</script>

为了解决这一问题，我们需要避免直接在GTM的自定义HTML标签中插入<svg>...</svg>结构，而是采用将SVG内容转换为Data URI的形式。

立即学习“前端免费学习笔记（深入）”；

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

解决方案一：SVG转Data URI嵌入<img>标签

最常见的解决方案是将SVG代码转换为Base64编码的Data URI字符串，然后将其作为<img>标签的src属性值。这种方法将SVG视为一个图像文件，绕过了GTM对直接SVG标记的解析限制。

操作步骤：

1. 获取SVG代码： 复制你需要嵌入的完整SVG代码。
2. 转换为Data URI (Base64编码)： 使用在线工具（例如：davidgierth.de/tools/svg-to-data-uri/ 或其他SVG to Base64编码器）将SVG代码转换为data:image/svg+xml;base64,...格式的字符串。
3. 嵌入<img>标签： 将生成的Data URI字符串放入<img>标签的src属性中。

示例代码：

假设原始SVG代码经过Base64编码后得到如下Data URI（此处为示例SVG的实际编码结果）：

data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0

以上就是解决Google Tag Manager自定义HTML标签中SVG嵌入错误的详细内容，更多请关注php中文网其它相关文章！