【GTM 教程】自定义添加改变网站 HTML 元素

Share

今天还是简单说一下怎样利用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中引用。

 

【GTM 教程】自定义添加改变网站 HTML 元素

 

然后为了将这些变量传到一些 JSON-LD 标记中,我们需要建立一个自定义的 HTML 标签来引用它。

 

【GTM 教程】自定义添加改变网站 HTML 元素

 

一定要注意,为了成功引用 GTM 变量,你需要将它们包含在双大括号中。还要注意的是,我们已经引用了”Page URL”,这是 GTM 中默认的内置变量,不需要另外设置了。这个脚本的最后四行是将 jsonData 元素转换为脚本元素的一部分,并将”application / ld + json”类型注入到了页面的头部。

 

使用 jQuery获取相应的数据

当然有 jQuery基础的小伙伴,我们也可以在不触摸 GTM 变量的情况下做与上面相同的事情。在这种情况下,我们需要使用 jQuery 来替代上面提到的动态 GTM 变量所做的工作,如下图:

 

【GTM 教程】自定义添加改变网站 HTML 元素

 

这个 HTMl 标签与使用变量的标签非常相似,不同的是,它使用 jQuery 从页面中提取数据,而上一种方法中的gtm变量是你之前已经设置过的变量来来争取填补。但是有个前提,对于那些加载了 jQuery 的页面来说,这是可行的,但是在没有 jQuery 的 JS 中,就不一定了!

    版权声明:

     本网站的所有文字、图片资料,【未注明转载的】均由作者亲自整理创作,任何媒体、网站或个人未经本人同意和授权不得复制、转载、转贴或以其他方式复制发布/发表,请尊重我的劳动成果,侵权必究,谢谢。