【问题标题】：Select the correct element选择正确的元素
【发布时间】：2019-10-15 00:55:18
【问题描述】：

当有人将此产品添加到“我的最爱”部分时，我正在尝试使用 GTM 设置一个事件。除了“产品名称”之外，我得到了设置事件的所有元素。

网址是这个 -> https://www.silversanz.com/categoria/1/subcategoria/10/productos

这里有一些代码：

<article class="product cmp-product   " data-product-id="2166" data-gtm-name="Funda Shockwave anti-impactos iPad 9.7\&quot; Silver HT" data-gtm-id="111943640199" data-gtm-price="24.1879" data-gtm-brand="Silver HT" data-gtm-category="Apple-ipad" data-gtm-variant="" data-gtm-list="Fundas tablets" data-gtm-position="1" id="cmp-product_1" data-state="rendered">
    <a href="/producto/2166" class="product__content-link" title="Funda Shockwave anti-impactos iPad 9.7&quot; Silver HT">
      <section class="product__content">
        <div class="img-wrapper">
          <img alt="Funda Shockwave anti-impactos iPad 9.7&quot; Silver HT | Silver Sanz" src="//s3-eu-west-1.amazonaws.com/silversanz.com/product_images/images/product_images_2533_grid.png?1548836431" class="">
        </div>
        <h4 class="title">Funda Shockwave anti-impactos iPad 9.7" Silver HT</h4>
      </section>
    </a>

<article class="product cmp-product   " data-product-id="519" data-gtm-name="Funda Wave azul marino para iPad Air 1,2, y iPad Pro 9,7\&quot;" data-gtm-id="111933840199" data-gtm-price="19.9892" data-gtm-brand="Silver HT" data-gtm-category="Apple-ipad" data-gtm-variant="" data-gtm-list="Fundas tablets" data-gtm-position="2" id="cmp-product_2" data-state="rendered">
    <a href="/producto/519" class="product__content-link" title="Funda Wave azul marino para iPad Air 1,2, y iPad Pro 9,7&quot;">
      <section class="product__content">
        <div class="img-wrapper">
          <img alt="Funda  iPad Air 1,2,  iPad Pro 9,7" src="//s3-eu-west-1.amazonaws.com/silversanz.com/product_images/images/product_images_1378_grid.png?1528287248" class="">
        </div>
        <h4 class="title">Funda Wave azul marino para iPad Air 1,2, y iPad Pro 9,7"</h4>
      </section>
    </a>

使用 tihis 代码，我尝试在 GTM 中创建一个 Element Dom 变量以使用此元素选择器获取标题 -> article#cmp-product_1.product.cmp-product

但我的问题是数字，在本例中为 1，取决于产品在网格中的位置，因此，对于 1，变量仅获得第一个网格产品的名称。

如何正确获取产品名称？

提前致谢！

【问题讨论】：

为什么不用id不用，比如这个“article.product.cmp-product”
因为我得到了这个结果：'Funda Shockwave anti-impactos iPad 9.7" Silver HT 24,19 € Producto añadido 24,1 9 € Añadir Producto agotado Destacado' 是网格的第一个产品的名称并且有更多关于产品的信息..
我在代码中的任何地方都看不到属性id="cmp-product_1" (?)

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

【解决方案1】：

如果您希望您的 CSS 选择任何以 id 开头的元素

cmp-product_

那么选择器是：

[id^="cmp-product_"]

在这种情况下，^= 表示 任何 id 以这些字符开头。

属性选择器的进一步阅读：

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

【讨论】：