Элемент щелчка с помощью селектора CSS не работает в диспетчере тегов Google

ProgramBox

Элемент щелчка с помощью селектора CSS не работает в диспетчере тегов Google

Post author:admin
Запись опубликована:2 сентября, 2022
Post category:Вопросы по программированию

#html #css #css-selectors #google-tag-manager

#HTML #css #css-селекторы #google-tag-manager

Вопрос:

Как мне определить щелчок по следующему элементу, используя переменную «Click Element» в диспетчере тегов Google:

 <a href="https://amazon.in/product-id" target="_blank" class="amazon-btn">
    <div>
        <span>BUY NOW AT</span>
        <div class="amz-logo"></div>
    </div>
</a>

Я создал следующий триггер:

 Click - All Elements -> Some Clicks -> Click Element -> matches CSS selector -> *.amazon-btn*

Это не срабатывает при нажатии на элемент.

Ниже приведен элемент щелчка в окне отладки:

 'HTMLDivElement: html > body > section.content.looking-sec > div.container > div.row > div.col-md-6.looking-cont > div.btn.btn-custom.btn-top.hide-small > a.amazon-btn > div'

Я даже пытался, Click Element -> contains -> amazon-btn . Это тоже не работает.

1. Я предполагаю, что для этого требуется действительный селектор CSS, поэтому я не понимаю, с чего *.amazon-btn* начать. Вы пробовали просто .amazon-btn ? Если это тоже не сработает, то для начала нам, вероятно, понадобится лучшее описание проблемы.

2. .amazon-btn тоже не работает.

Ответ №1:

Попробуйте вместо этого щелкнуть по элементу привязки

Не используйте «Щелчок> Все элементы»

Используйте «Щелчок> Просто ссылки»

А затем примените свой селектор CSS

1. Возможно, в этом случае сработает «Щелчок> Просто ссылки». Но иногда это может быть <div> или <button> . Вот почему я был заинтересован в том, чтобы заставить «Все элементы» работать.

2. нет причин использовать только ссылки. Просто используйте то, что сказал CBroe. Никогда не используйте «содержит» с элементами, на которые нажимают. Он не делает то, что вы думаете. С элементами вы всегда используете селектор совпадений css. . amazon-btn — это то, что должно быть там. Кроме того, не используйте classes contain , или, если вы это сделаете, удалите точку, потому что в этом случае она не является частью имени класса. Точка — это часть селектора. Это, действительно, довольно тривиально. вы просто пытаетесь делать неправильные вещи в неправильных местах.

Ответ №2:

В конфигурации триггера попробуйте добавить это условие:

Click Element matches CSS selector .amazon-btn, .amazon-btn *

Я не тестировал это, но оно должно работать, когда элемент с amazon-btn классом является целью щелчка или любым дочерним элементом внутри этого элемента.

Ответ №3:

Вот проблема, Click - All Elements триггер возвращает фактический элемент, на который был нажат (очевидно), но тогда это может быть просто значок на кнопке большего размера. В то время как мы хотим зафиксировать щелчок в любом месте кнопки или целевого элемента. Подробнее об этом по этой ссылке

Это то, что я в итоге использовал. Я создал пользовательскую переменную javascript Get All Classes :

 function() {
  var el = {{Click Element}};
  var ad = el.nodeName.toLowerCase();
  if(!el.className==''){
    ad = ad '.' el.className.replace(/s/g,'.');
  }
  var i = 0
  while(el.parentElement.nodeName.toLowerCase() != 'body' amp;amp; i < 50){
    el = el.parentElement;
    var st = el.nodeName.toLowerCase();
    if(!el.className==''){
      st = st '.' el.className.replace(/s/g,'.');
    }
    ad = st '>' ad;
    i  ;
  }
  return ad;
}

Это возвращает строку со всеми именами узлов и их классами, начиная с выбранного элемента и заканчивая <body> элементом. Вот так:
body>div.main-container.content>p.first-section>a.amazon-link
И затем я использую эту переменную в триггере, чтобы проверить, содержит ли она определенный класс.

Есть ли более простой и лучший способ получить значение переменной {{Click Element}} GTM в виде строки, как показано ниже? Если это так, пожалуйста, добавьте его в качестве ответа, и я приму это как правильный ответ.

1. У вас неправильный вопрос. приведенная ниже строка не является представлением элемента. Это универсальный селектор CSS. Это также плохой селектор (именно потому, что он общий). Он хрупкий. Если вы используете что-то подобное, его будет намного легче взломать. Поэтому правильный способ — использовать.amazon-link, а не body> div.main-container.content> p.first-section> a.amazon-link Единственная причина, по которой.amazon-link не сработал для вас, заключается в том, что вы использовали его неправильно.

Метки: Элемент щелчка с помощью селектора CSS не работает в диспетчере тегов Google