Диспетчер тегов Google не отслеживает клики по ссылкам на изображения и значки

Я мог бы сказать об этом более определенно, если бы увидел, как настроен ваш GTM, но я предполагаю, что вы используете триггер «Все элементы» для захвата этих кликов по ссылкам и фильтруете «Классы кликов» или «Элемент кликов». Проблема заключается в том, что когда тег ссылки (<a></a>) содержит другой элемент, например, <span>, даже если это вызывает открытие вашей ссылки, элемент, который GTM регистрирует как получение клика, является диапазоном, а не ссылкой.

Если вы хотите исправить это, есть два варианта, любой из которых должен работать.

Первый — переключиться на использование типа триггера «Click — Just Links» и фильтровать по классу «track_this». Для этого триггера GTM позволяет событиям щелчка «пузыриться» до тех пор, пока они не попадут в элемент ссылки, а затем он проверяет ваш триггер на этой ссылке, а не на элементе, на который был нажат. Простое использование этого типа триггера должно работать для всех трех ваших образцов.

Другой вариант — использовать более продвинутый фильтр с триггером «Click — All Elements». Если вы измените триггер так, чтобы он срабатывал при «Некоторых кликах», а затем установите условие, что «Элемент клика соответствует селектору CSS»:

.track_this, .track_this *

затем он зарегистрирует щелчок по любому элементу, который имеет класс track_this, так же как щелчок по любому элементу внутри этих элементов.

Эту проблему также можно решить, используя немного javascript и «Определяемую пользователем переменную» в диспетчере тегов. Это решение предназначено для обработки более сложных компонентов пользовательского интерфейса.

Объяснение

Google Analytics + Менеджер тегов записывают очень конкретный элемент или узел, на который нажимает пользователь. Этот элемент хранится в GA как переменная «Click Element». Таким образом, в более сложных ситуациях пользовательского интерфейса пользователь может щелкнуть несколько элементов для выполнения одного действия. Например. Вот кнопка со значком и текстом.

<div
   class = "button"
   id = "PARENT_ID"
   onClick = () =>  ... 
>
   <span id = "CHILD_ONE">
      icon
    </span>
    <span id = "CHILD_TWO">
      text
     </span>
</div>

В этом случае пользователь может щелкнуть любой из трех id выше. Все три активируют действие onClick. Однако Google Analytics не заботится о onClick. Он заботится только о том, какой конкретный элемент был нажат. IE: PARENT_ID, CHILD_ONE или CHILD_TWO.

Решение «Пользовательская переменная».

1. В диспетчере тегов перейдите в «Переменные». (Меню левой колонки.)
2. Добавьте новую «Пользовательскую переменную».
3. Выберите тип переменной «Пользовательский JavaScript».

Добавлять:

function() {
  if ({{Click Element}}.id != "") {
    return {{Click Element}}.id;
  }
  if ({{Click Element}}.parentNode.id != "") {
    return {{Click Element}}.parentNode.id;
  }
   if ({{Click Element}}.parentNode.parentNode.id != "") {
    return {{Click Element}}.parentNode.parentNode.id;
  }
  return {{Click Element}}.parentNode.parentNode.parentNode.id;
}

Этот скрипт будет искать DOM на три уровня вверх от любого дочернего элемента (узла) и искать соответствующий тег id. ПРИМЕЧАНИЕ. Click Element — это имя переменной, используемое Google Analytics. Это gtm.element, на который нажал пользователь.

Настройте конфигурацию диспетчера тегов, чтобы использовать новую «Пользовательскую переменную».

Теперь используйте родительский идентификатор для настройки триггеров. В моем примере PARENT_ID будет возвращен id, даже если пользователь нажмет на CHILD_ONE или CHILD_TWO. Поэтому выберите «содержит» PARENT_ID.

------ Дополнительные соображения -----

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

В более сложных компонентах пользовательского интерфейса может быть предпочтительнее добавлять теги id к каждому элементу. Если вы используете интерфейсную структуру, такую ​​​​как React, я бы предложил сделать идентификатор тега динамической опорой и добавить его ко всем дочерним компонентам.

ПРИМЕЧАНИЕ. Google Analytics часто меняется. Это решение GA4 + Tag Manager.