用于触发 Google Tag Manager 的 CSS 选择器答案

【问题标题】：CSS selector to trigger Google Tag Manager用于触发 Google Tag Manager 的 CSS 选择器
【发布时间】：2017-10-19 06:59:44
【问题描述】：

我试图在我的网站上通过 Google 标记管理器使用 CSS 选择器，但使用的 CMS 系统使用不同的标记标准（？）。

我正在努力实现在这个标签中获得“价值”：

<ul k="redmeta">
   <i k="PageType" value="Andre produkter"></i>
   <i k="ProduktKategori" value="Tilhenger"></i>
   <i k="ProduktNavn" value="Basic 750"></i>
</ul>

我尝试的是：

ul[k="redmeta"] i    --> nothing
ul.k --> nothing
ul.redmeta --> nothing

希望有人可以帮助我获取这些标签“PageType”、“ProduktKategori”和“ProduktNavn”中的值。

我想要的是：

ul[k="redmeta] li[k="PageType" Value ] ---> "Andre Produkter"

CSS-selector 的新手，我可以获得简单的元数据，但是这个有点棘手，因为没有“Class”属性，而是使用“K”，不知道这是否有什么不同？

谢谢！

阿西姆

【问题讨论】：

我不认为你可以使用 css 获取元素的值
您可以将 CSS 使用值作为动态内容，但是 1. <i> 没有 value 作为有效属性。 2.表单控件（例如<input>）可以有value但是不能有动态内容，因为它是一个空元素（即没有结束标签）。
K 是 Google 跟踪代码管理器 API 的一部分吗？
不要把k当作一个类，把它当作一个属性[k='whatever']
您的 CMS 是否生成有效的 HTML？您提供的 HTML 示例在浏览器中不可见。我不得不修改它以显示在jsfiddle.net/h15qxvz4/2

标签： html css css-selectors google-tag-manager

【解决方案1】：

您可以在 Google 跟踪代码管理器中配置触发器以在各种条件下触发，但您的条件不是它们的标准选项之一。当变量匹配或不匹配 CSS 选择器，或者匹配或不匹配 RegEx 时，一些默认选项会让触发器触发。 Simo Ahava 在他的博文“Matches CSS Selector” Operator In GTM Triggers 中解释了一些选项。也许您可以使用“DOM Element”变量类型，选择方法为 CSS Selector，值为i[k='ProduktKategori']，属性名称为value。

https://www.simoahava.com/analytics/matches-css-selector-operator-in-gtm-triggers/

【讨论】：

这正是我所需要的@Michael，就像魅力一样。非常感谢！

【解决方案2】：

我有点混淆你想要实现的目标。但是，如果对您有用，请尝试以下代码：

ul[k='redmeta'] li[k='PageType'] {
  write css your code here..
}


<ul k="redmeta">
   <li k="PageType" value="Andre produkter"></li>
   <li k="ProduktKategori" value="Tilhenger"></li>
   <li k="ProduktNavn" value="Basic 750"></li>
</ul>

【讨论】：

没有用。我正在尝试从标签“li”中获取“value”属性。示例我想打印出“Andre Produkter”
ul[k='redmeta'] li[value='Andre produkter'] { } 它适合你吗？
是的，这会起作用，但这给了我内部文本的值，而不是“值”属性。并且这个“值”属性是动态的，所以它会随着页面的变化而变化。我想打印“andre produkter”而不是里面的文本值
另外，如果你想获取值而不是选择器，那么 CSS 没有解决方案。您应该通过 JS 尝试。