Сбор данных через web-интерфейс Google Tag Manager

Сбор данных через web-интерфейс Google Tag Manager

Диспетчер тегов от Google позволяет собирать и обрабатывать данные со страниц сайта не прибегая к услугам программистов и не создавая отдельные js-файлы. Все это возможно путем манипулирования переменными, триггерами и тегами непосредственно в web-интерфейсе Tag Manager. Говоря точнее, переменная типа "Собственный код Javascript" и тег с конфигурацией типа "Пользовательский HTML" позволяют получить доступ к любому атрибуту любого елемента веб-страницы: особенно удобно их использовать с jQuery.

Переменная типа "Собственный код Javascript"

Значение этой переменной вычисляется в браузере с помощью заданной анонимной функции JavaScript. Функция вызывается при каждом использовании переменной, возвращая ее значение. В самом общем виде, при использовании нативного javascript, это выглядит так

Сбор детальных данных через Google Tag Manager

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

Сбор детальных данных через Google Tag Manager

Обращение к вашей переменной внутри тега при помощи конструкции {{yourVariableName}} вызовет отработку функции и вы получите желаемое. В случае с использованием jQuery - объект, с которым можно работать привычным способом. Например, получаем

  • атрибут: {{yourVariableName}}.attr("title");
  • html: {{yourVariableName}}.html();

Тег с конфигурацией "Пользовательский HTML"

Это обычный js-код находящийся внутри парного тега script. В случае с переменной "Собственный код JavaScript", будет что-то вроде этого:

Сбор детальных данных через Google Tag Manager

Делайте внутри этого тега, что хотите: хоть - dataLayer.push

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

Сбор детальных данных через Google Tag Manager

Алгоритм сбора детальных данных будет выглядеть так

  1. Пользователь кликает по элементу с классом .sidebar-right .btn
  2. Срабатывает триггер по селектору CSS
  3. Функция переменной возвращает объект jQuery
  4. В теге обрабатывается переменная {{yourVariableName}}

Вот и все. Совсем ничего сложного.