Как отследить клик в google tag manager без помощи программиста если алгоритм gtm  не видит нужный элемент?

 

Бывают случаи, когда вы пытаетесь отследить  клик по кнопке но отладчик в gtm не видит, к чему привязать данный клик и селекторы не помогают. В основном это происходит, потому что: контент формируется динамически или алгоритм gtm  не видит нужный элемент.

В данной статье будут описаны два способа как в таком случае отследить клик.

1. Через html код

Данный пример показан на одностраничном веб приложении. В результате, когда вы включили встроенные переменные и отследить клик у вас будет примерно такая картинка:  [object HTMLUnknownElement]

А) Создаем html tag

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

Теги /// Создать тег /// тип тега: пользовательский html

Пропишем данный код:

<script>
var elements = document.querySelectorAll('card');
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("click", function(){
   dataLayer.push({"event": "click_articles"});
});
}
</script>

сard – название тега. Что бы прописать используйте консоль.

click_articles –название пользовательского события, на которое мы будем настраивать клик  (произвольное название)

 

Название тега:  js-dl-clicks (произвольное название)

Триггер активации: All pages (Все страницы)

 

Б) Настроим триггер, с тем пользовательским событием, которое мы настроили в html теге, в данном примере «click_articles».

Переходим в триггеры /// Создать триггер /// Пользовательское событие ///  название события «click_articles»

Название триггера dl-click-articles (произвольное название)

Условия активации триггера — все специальные события.

 

В) Создаем тег для отслеживания клика

Название тега:  ga – клик по статье (произвольное название)

Тип отслеживания:  Событие

Прописываем название категории, действие, ярлык, которые будут передаваться в google analytics и код счетчика (в данном примере сделан через переменную «GA-SET»)

Триггером активации будет: dl-click-articles – тот, триггер, что мы создали.

 

Проверяем корректность работы тегов, через режим предварительного просмотра.

 

 

2) Через библиотеку jQuery

Пример нам нужно отследить клики по кнопкам соц.сетей  на сайте. Но, отладчик показывает следующее:[object SVGSVGElement], [object SVGAnimatedString]

А) Создаем html tag в котором установим бублиотеку jquery и отправим пользовательское событие используя селекторы.

Внимание! Если на сайте установлена библиотека jquery, второй раз ее устанавливать не нужно.

В google tag manager переходим в теги /// создать тег ///

Прописываем название тега

Тип тега: пользовательский html

Вставляем код:

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
$('.w-soc-links__a').on('click', function(){
var title = $(this).attr('title');
dataLayer.push({"event": "soc_links",
"gtm-event-action": title});
 })
</script>

ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js — подключение к библиотеки jquery

.w-soc-links__a  — имя  класса

soc_links – пользовательское событие, которое будем передавать при клике

gtm-event-action – ключ переменной

title – значение переменной, будет извлекаться из  title

 

Триггером активации: All Pages (Все страницы)

Полностью тег будет выглядеть вот так:

 

Б) Исходя из нашего кода нужно создать переменную (gtm-event-action) и триггер с названием пользовательским событием  (soc_links) и создаем тег для отслеживания кликов.

Создаем переменную

Тип переменной: переменная уровня данных

Имя переменной уровня данных: gtm-event-action  (название должно соответствовать, названию что мы прописали в коде при создании пользовательского html тега)

Версия уровня данных: Версия 2

 

Создаем триггер

Тип триггера: пользовательское событие

Имя события: soc_links (название события должно соответствовать, названию тому, что мы прописали в коде при создании пользовательского html тега)

Условия активации триггера: Все специальные события

 

Тег для отслеживания кликов

Тип тега: universal analytics

Тип отслеживания: события

Прописываем категорию, действие, ярлык – данные, которые будут передаваться в google analytics и код счетчика аналитикса  (в данном примере сделан через переменную)

Не взаимодействие: False

Триггер активации: пользовательское событие, которое мы предварительно создали.

 

В) Проверка

Перед тем, как отправлять настройки на публикацию, обязательно проверьте все в режиме предварительного просмотра.

Также можете проверить в google analytics в режиме реального времени

 

 


Подпишитесь на обновление блога