今天还是简单说一下怎样利用google tag manager来修改html元素，以及如何动态的获取网站相关信息。这篇文章中可能很多人看了一遍不是很懂，没关系，第二遍第三遍是必须的，哈哈。当然不懂得，可以去博客搜下相关的知识。GTM标签管理器的很大的优点就是自己可以绕过开发人员去管理代码，提高工作效率，避免相互扯皮。当你使用一个 JavaScript 容器标签将各种不同的标签(例如跟踪、营销和 CRO 标签)到网页中，产生效果时，你会很有成就感的。
因为标签管理者（也就是你自己）使用 JavaScript 来实现标签，在过去，它并没有被看作是一个可靠的方式来改变网站的元素。以前人们会认为，就 SEO 的角度而言，百度/谷歌(和其他搜索引擎)并不能完全地执行 JavaScript，所以任何用 JavaScript 做出的改变都可能被忽略了。然而，直到现在来看，最起码谷歌正在积极的改变，百度我暂时还没认真的去弄，总之Google在这方面更新的很快，包括GTM标签管理器产品的迭代。本文将展示这方面的一些实例，以及如何在你的网站上实现这些变化，当然很多观点都是本人的个人主观想法，有错误大家望指正，交流为主。
如何使用 GTM 来改变 HTML的元素内容
改变html的内容包括: 向页面添加新元素，修改元素的内容或属性，从页面中移除相关元素。对于其中的每一项，你都可能需要了解: css选择器，JavaScript (尤其是jQuery）的相关知识储备。
当然如果你的站点已经加载了 jQuery，那么在页面中提取和写入元素就会容易得多。为了检查这一点，你可以在浏览 Chrome 或 Firefox 时打开控制台，输入”jQuery”(区分大小写)。 如果 jQuery 没有加载，你会看到一个错误消息。
我简单以插入一个元素为例，为了在 HTML 页面中插入一个元素，你可以在 GTM 中使用自定义的 HTML 标签。 比如下面是一个自定义 HTML 标签的例子，该标签将一个meta插入页面的索引标签。该例子使用 了jQuery，但是如果需要的话，你也可以在没有加载 jQuery 的情况下做同样的事情。
代码如下：
<script>
jQuery('meta[name="robots"]').remove();
var meta = document.createElement('meta');
meta.name = 'robots';
meta.content = 'noindex, follow';
jQuery('head').append(meta);
</script>
这个代码片段将添加一个新的meta noindex元素，替换原有的元素，原理是在删除任何现有meta元素后，添加到它触发器所应用的每个页面。在 GTM 中，每个标签都与至少一个触发器相关联的，这个触发器告诉容器何时应该触发这个标签。我们也可以使用任何我们喜欢的变量来指定页面，我们可以决定标签应该加载哪些页面等等。
从网站页面中提取数据
有两种方法可以从页面中提取数据。你可以使用 GTM 的内置变量，这些变量允许你提取基于 CSS 选择器的文本或元素属性，也可以在自定义 HTML 标签中使用 JavaScript和jQuery。
对于一个网站，其产品页面是有关于他们产品的数据信息的集合，每个页面的 HTML 中都有独特的 元素id，你需要找到 CSS 选择器，这些选择器会给出你想要的元素。css选择器插件 Chrome 扩展 Selector Gadget Chrome extension：https://chrome.google.com/webstore/detail/selectorgadget/mhjhnkcfbdhnjickkkdbjoemdmbfginb很好用，推荐，它可以帮助你在页面上找到CSS 选择器的不同元素。
如果你使用 GTM 变量从页面中提取数据，你需要为每个元素设置一个变量，比如你要提取产品信息，产品名，价格，图片地址等，你就需要为它们每个都要设置一个变量。
比如产品图片元素，你得定义一个新的”DOM 元素”的类型变量，使用 ID 或 CSS 选择器，以便在该字段中提取 src 属性，当然element img不是每个网站都是叫这个，你需要自己去运用插件检查下，替换下你的就好了，以便在接下来的自定义html中引用。
然后为了将这些变量传到一些 JSON-LD 标记中，我们需要建立一个自定义的 HTML 标签来引用它。
一定要注意，为了成功引用 GTM 变量，你需要将它们包含在双大括号中。还要注意的是，我们已经引用了”Page URL”，这是 GTM 中默认的内置变量，不需要另外设置了。这个脚本的最后四行是将 jsonData 元素转换为脚本元素的一部分，并将”application / ld + json”类型注入到了页面的头部。
使用 jQuery获取相应的数据
当然有 jQuery基础的小伙伴，我们也可以在不触摸 GTM 变量的情况下做与上面相同的事情。在这种情况下，我们需要使用 jQuery 来替代上面提到的动态 GTM 变量所做的工作，如下图：
这个 HTMl 标签与使用变量的标签非常相似，不同的是，它使用 jQuery 从页面中提取数据，而上一种方法中的gtm变量是你之前已经设置过的变量来来争取填补。但是有个前提，对于那些加载了 jQuery 的页面来说，这是可行的，但是在没有 jQuery 的 JS 中，就不一定了！
