如何创建库存状态消息Trigger？元素选择与同class元素区分方案

一、Element Visibility触发器的目标元素选择 #

针对你给出的这段代码：

<div class="product__specification">
    <ul>
        <li>
            <div class="product-item__stock-value stock-status-icon-is">In Stock</div>
        </li>
    </ul>
<div>

配置Element Visibility触发器时，应选择带有product-item__stock-value类的<div>元素——也就是直接显示库存状态（如"In Stock"）的节点。理由如下：

• 该元素是库存状态的直接载体，它的可见性完全对应你需要追踪的库存展示事件
• 外层的product__specification容器可能包含其他无关内容，选择更具体的子元素能避免误触发

二、区分相同class元素实现精准触发 #

你提供的两段代码中，库存状态元素共用product-item__stock-value stock-status-icon-bo类，但内容不同，可通过以下方式精准定位：

1. 基于元素文本内容筛选 #

利用CSS的:contains()伪类（多数前端追踪工具如GTM支持该语法），根据文本片段区分：

• 匹配"Expected Availability 07/15/2024"的元素：div.product-item__stock-value:contains("Expected Availability")
• 匹配"Normally Ships within Two Business Days"的元素：div.product-item__stock-value:contains("Normally Ships")

2. 结合父级/兄弟元素的属性关联 #

观察代码结构，库存元素的兄弟节点是数量输入框容器，可通过输入框的独有属性关联定位：

• 对应第一段代码（输入框data-err-value="1"）：div[data-err-value="1"] ~ .product__specification .product-item__stock-value
• 对应第二段代码（输入框data-err-value="2"）：div[data-err-value="2"] ~ .product__specification .product-item__stock-value

3. 用XPath实现精准文本匹配 #

如果工具支持XPath，可直接通过完整文本匹配定位：

• 匹配"Expected Availability 07/15/2024"：//div[contains(@class, 'product-item__stock-value') and text()='Expected Availability 07/15/2024']
• 匹配"Normally Ships within Two Business Days"：//div[contains(@class, 'product-item__stock-value') and text()='Normally Ships within Two Business Days']

内容的提问来源于stack exchange，提问作者jayran