Отслеживайте покупку определенных продуктов с помощью Google Tag Manager

Question

У меня проблема с диспетчером тегов Google и Wordpress / WooCommerce (Я не могу получить доступ к бэкэнду).

Мне нужно отследить, когда приобретается конкретный тип продукта, образец основных продуктов (у большинства продуктов есть свой образец).

Образец можно приобрести с другими продуктами или самостоятельно.

Я нашел общий элемент в исходном коде, который отображается при каждой покупке образца (см. Ниже). Элемент color-card-a5 появляется при покупке образца на странице оформления заказа в двух разных областях:

Площадь # 1

dataLayer.push({
  "pagePostType":"page",
  "pagePostType2":"single-page",
  "pagePostAuthor":"root",
  "ecommerce":{
    "currencyCode":"EUR",
    "purchase":{
      "actionField":{
        "id":"22481",
        "affiliation":"",
        "revenue":"1.70",
        "tax":"0",
        "shipping":"0.00",
        "coupon":""
      },
      "products": [
        {
          "id":13487,
          "name":"Genert",
          "sku":"AQA021",
          "category":"Contemporary",
          "price":1.7,
          "currency":"EUR",
          "stocklevel":null,
          "quantity":1,
          "variant":"colour-card-a5,interior-design"
        }
      ]
    }
  },
  "event":"gtm4wp.orderCompletedEEC"
});//]]>

Площадь № 2

<td class="woocommerce-table__product-name product-name">
    <a href="https://www.example.com/product/genert/?attribute_pa_size=colour-card-a5&attribute_pa_finish=interior-design">
      Genert - Colour Card (A5), Interior Design
    </a> 
    <strong class="product-quantity">&times; 1</strong> 
</td>

Поскольку страница оформления заказа - example.com/checkout/order-received, я реализовал этот триггер: Тип триггера: Видимость элемента

Метод: Селектор CSS

Селектор элементов: color-card-a5

Когда срабатывать этот триггер: Один раз на страницу

Минимальный видимый процент: 1

Этот триггер срабатывает: Некоторые события видимости

Запустите этот триггер, когда происходит событие, и все эти условия выполняются: URL страницы | содержит | заказ получен

Но как только я куплю Sample, метка не сработает. Я уверен, что что-то упустил, но не могу понять, что.

Кто-нибудь может помочь?

Заранее спасибо

Answer 1

Ваш селектор CSS (colour-card-a5) не соответствует ни одному из элементов в предоставленном вами HTML. Вы должны использовать a[href*="colour-card-a5"], который выберет любой якорь с атрибутом href, содержащий строку color-card-a5.

Вы также должны проверить, присутствует ли элемент в DOM во время загрузки страницы, или он добавляется позже скриптом. В этом последнем случае вы должны включить проверку DOM в настройках триггера, чтобы разрешить запуск для любых добавленных элементов.