Использование макроса {{element}} в Google Tag Manager

Тема для публикации возникла после комментария к материалу “Настройка отслеживания событий Google Analytics в Google Tag Manager”. Поскольку использовать до этого макрос {{element}} мне не приходилось, проверил его работоспособность на тестовом сайте и столкнулся с рядом сложностей. Сегодня хочу поделиться с вами вариантом его использования для собственных нужд.

В связи с выходом Google Tag Manager второй версии, информация утратила актуальность. За получением сведений о пользовательских переменных обратитесь к соответствующей публикации.

Начну пожалуй с того, что все таки рекомендуется использовать для идентификации элементов на странице макросы {{element id}} и {{element classes}}, но если вы все же решили использовать {{element}}, то необходимо немного выполнить несколько дополнительных операций.

Давайте рассмотрим практическую задачу. Отследить клики по всем тегам <div></div> на странице. Обратите внимание, что если в контейнере div содержатся другие теги, то клики будут фиксироваться на них, а не на div-е. Учтите иерархию.

Создадим новый макрос, для этого нажмите на следующую кнопку:

Создание макроса в Google Tag Manager

Создание макроса в Google Tag Manager

В открывшемся окне укажите имя, например element tagname и тип макроса Собственный код JavaScript:

Имя и тип макроса

Имя и тип макроса

Далее необходимо заполнить поле Собственный код JavaScript следующим содержанием:

Должно получится примерно следующее:

Код макроса Google Tag Manager

Код макроса Google Tag Manager

Сохраните изменения нажав Сохранить внизу страницы. На этом создание нового макроса завершено.

Проверим работу и значения возвращаемые созданным макросом. Создайте тег для прослушивания всех кликов на странице, затем тег для фиксации событий Google Analytics.

В качестве параметров отслеживания событий укажите одним из значений ранее созданный тег, например таким образом:

Пример настройки тега для Google Analytics

Пример настройки тега для Google Analytics

Сохраните изменения, создайте версию контейнера и опубликуйте ее. Теперь можете перейти к отчетам Google Analytics В реальном времени и проверить работоспособность выполненных операций.

У меня на странице тестового сайта имеется несколько тегов: из них div, span и форма. После кликов на них получил следующий результат:

Демонстрация работы макроса Google Tag Manager

Демонстрация работы макроса Google Tag Manager

Давайте теперь “уберем” не нужные нам клики по элементам отличным от div, как того требует наша задача.

Для этого нужно добавить правило в теге, который передает отправку данных в Google Analytics. Перейдите к настройкам этого тега и выберите правило, которое фиксирует клик по любому элементу и добавьте к нему следующее условие – {{element tag name}} равно div:

Изменение правила тега Google Tag Manager

Изменение правила тега Google Tag Manager

После этого будут фиксироваться клики только по тегам <div></div>. На этом задачу можно считать решенной.

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

Кейсы и инструкции по настройке в вашем ящике. Подпишитесь сейчас!

7 комментария(ев) к “Использование макроса {{element}} в Google Tag Manager

  1. Подскажите, какой макрос нужно использовать, что определить клик по кнопке “Искать!”, вот код кнопки

  2. Иван,
    У меня возникли сложности с настройкой отслеживания событий трех ссылок.
    Как я понимаю – событие дложно быть – клик по ссылке.
    У меня стоит тег на клики по ссылкам по всем страницам И отдельно тег с правилом {{event}} gtm.linkClick. Я много чего пробовала и добовляла и убирала в правилах, но событие не фиксируется. Пробовала и через class. Но все тчетно. Что может быть не так?
    Спасибо

    • Наталья, на ссылках могут быть обработчики JS или jQuery, нужно писать свои если стандартные не работают

  3. Здравствуйте, Иван! У меня есть вопросы на счет отслеживания кликов по кнопке. У нас интернет-магазин и я хотела бы отследить сколько с главной страницы нажимают на кнопку “Просмотр”. Также в категориях товаров хочу отследить кнопки “В корзину” и “Купить в 1 клик”. Для начала мы пометили все кнопки, то есть дали всем кнопкам id. Теперь столкнулась с проблемой что у каждого товара отличается номер id. Например в категории товаров если у одного товара кнопка “В корзину” имеет такой id button_cart_78728_btn_categories, то у другого товара эта же кнопка имеет такой id button_cart_78928_btn_categories. Как видите отличаются только цифры. У кнопок на главной странице примерно так же. Как мне в общем отследить клики по этим кнопкам? Правильна ли моя логика или нужно построить отслеживание совсем по другому?

    • Попробуйте для id при сопоставлении в триггере использовать регулярное выражение. Если Вам просто нужно количество кликов по кнопке – сделайте у кнопок уникальный id вне зависимости от товара, например id=”btnAddToCart” и на этот id настройте триггеры

Добавить комментарий

Current month ye@r day *