Отслеживание кликов по кнопкам в Яндекс Тег Менеджере

Как правильно отслеживать клики по кнопкам с помощью Яндекс Тег Менеджера? Как передавать информацию о достижении конкретного события в Яндекс Метрику? Прочитав этот материал до конца, у вас больше не останется вопросов о том, как это сделать.

Читайте еще:

• Отслеживание кликов по кнопкам в Google Tag Manager

Вступление

Одной из самых популярных и важных настроек на сайте (наряду с отслеживанием отправки форм) является отслеживание кликов по кнопкам. Отправка формы, подписка на рассылку, скачивание файла, добавление товара в корзину, заказ обратного звонка - везде посетители вашего сайта вынуждены взаимодействовать с кнопками.

Клик по кнопке может быть таким же конверсионным действием, как и звонок, заявка, заказ. И его тоже нужно отслеживать. Однако сам факт клика нельзя считать ключевой (основной) целью на сайте, вокруг которого вы будете строить свою маркетинговую стратегию, отчетность, перераспределять бюджет между рекламными источниками и оптимизировать рекламные кампании, поскольку его выполнение служит только для того, чтобы получать промежуточные (вспомогательные) значения на пути к основным.

Например, добавление товара в корзину и дальнейшее заполнение способа оплаты в интернет-магазине не является последним шагом и влияет на конечный результат косвенно, поскольку он не означает, что человек достигнет основной цели в виде оформленного заказа. Но информация о том, что человек отвалился на этапе заполнения полей доставки и не завершил покупку – очень ценна для нас. Она позволит нам улучшить эту страницу и повысить коэффициент конверсии. Поэтому цели в веб-аналитике принято делить на:

• основные (звонок, заявка, заказ);
• вспомогательные (добавление товара в корзину, форма с вопросом, общение в чате, просмотр видео и т.д.).

Существуют проекты, где цикл сделки (время, которое проходит с момента первого взаимодействия с клиентом до момента получения денег) может исчисляться месяцами, а количество трафика, которое поступает на сайт, и, как следствие, достижение целей, сильно ограничено. И чтобы хоть как-то иметь возможность работать с автоматическими стратегиями и оптимизацией рекламных кампаний за конверсии, специалисты по рекламе выбирают в качестве основной цели именно вспомогательный шаг - клик по кнопке, скачивание файла, вопрос в чате и т.д.

Примечание: подробнее о том, какие бывают цели в Яндекс Метрике и как их настроить, читайте в этом материале.

Сейчас в Яндекс Метрике отследить клик по кнопке можно несколькими способами:

• использовать отдельный тип цели, который называется Клик по кнопке

Выбранный элемент легко настраивается в вашем браузере на нужной веб-странице:

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

• создать JavaScript-событие и попросить разработчика добавить итоговую конструкцию на отслеживаемый элемент на сайте;

Если таких кнопок на сайте много, то на каждую из них нужно добавить соответствующий код, предварительно создав цель с идентификатором в интерфейсе Метрики. Вот как это выглядит для одной из кнопок моего тестового сайта graphanalytics.ru:

Поскольку цель такого типа настраивается как через интерфейс, так и путем внедрения специальной конструкции в исходной код сайта, то вам как минимум нужно подготовить техническое задание (ТЗ) разработчику с подробными инструкциями того, куда нужно вставить код, а как максимум - внедрять его на сайт самостоятельно. Этот процесс может затянуться на дни или даже недели.

С выходом Яндекс Тег Менеджера в начале июня у нас с вами появился еще один способ отслеживания кликов по кнопкам. Теперь, используя счетчик Яндекс Метрики и активировав контейнер Яндекс Тег Менеджера, мы можем настраивать JavaScript-события без помощи разработчиков. Нам больше не нужно просить разработчика вносить изменения каждый раз в исходный код сайта, чтобы выполнить ту или иную настройку (например, настроить отслеживание JS-события на клик по кнопке, отправку формы, копирование текста, глубину прокрутки, видео, взаимодействие с элементами HTML и других пользовательских событий). Таким образом, мы сокращаем количество ошибок, упрощаем процесс внесения изменений и, главное, экономим время.

В рамках данного материала мы с вами будем учиться отслеживать клики по кнопкам именно с помощью Яндекс Тег Менеджера, поскольку он позволяет очень просто настроить (без привлечения программиста!) практически любое отслеживание на вашем сайте, не только клики по кнопкам, и передавать эти данные в Яндекс Метрику и другие рекламные и аналитические инструменты.

Основные этапы настройки

Для отслеживания кликов по кнопкам с помощью Яндекс Тег Менеджера нам необходимо:

1. определить уникальный идентификатор отслеживаемой кнопки;
2. настроить триггер активации (=событие);
3. создать цель типа JavaScript-событие в интерфейсе Яндекс Метрики;
4. создать тег Яндекс Метрика, выбрав его из каталога шаблонов;
5. проверить корректность передачи данных;
6. опубликовать контейнер ЯТМ;
7. посмотреть данные в отчетах.

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

Давайте рассмотрим каждый шаг подробнее.

1. Определение уникального идентификатора отслеживаемой кнопки

Определение уникального идентификатора отслеживаемой кнопки - самый важный и сложный этап всей настройки. Разобравшись с ним, выполнить все последующие шаги не составит труда.

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

1. если у элемента есть id, то в качестве условия активации триггера использовать Click ID содержит/равно
2. если у элемента есть class, то в качестве условия активации триггера использовать Click Classes содержит/равно
3. если нет 1 и 2, то в качестве условия активации триггера использовать Click Element соответствует селектору CSS

Почему так? Все дело в том, что идентификатор элемента, как правило, уникален на странице, то есть других таких же элементов с тем же id на странице быть не должно. Поэтому если у кнопки есть id, то рекомендуется использовать его в качестве приоритетного условия. Далее идет класс элемента. Он может быть задан сразу к нескольким элементам на странице (например, 5 кнопок на странице для разных форм, но с одинаковым class), поэтому при использовании его в триггере GTM необходимо сначала проверить к каким элементам он принадлежит, а далее уже настраивать.

Чаще всего бывает, что у кнопки нет ни идентификатора, ни класса, поэтому приходится находить CSS-селектор кнопки и использовать его с переменной Click Element. Какой вывод можно сделать? В 90% случаев для условия активации триггера по конкретной кнопке используются Click ID, Click Classes или Click Element.

Но перед тем, как начать поиск уникального идентификатора отслеживаемой кнопки, рекомендую ознакомиться с материалами, посвященными CSS-селекторам:

• CSS-селекторы в GTM. Часть I
• Селекторы в jQuery. Часть II
• Регулярные выражения в CSS-селекторах
• Отслеживание вложенных элементов с помощью универсального селектора *

Без начальных знаний HTML/CSS/JavaScript и понимая основ работы с CSS-селекторами, вам будет сложно определить конечную конструкцию для отслеживаемой кнопки. Надеюсь, что мои другие статьи в блоге хотя бы немного прольют свет на эту тему. Хотя эти руководства создавались во время моей активной работы с Google Tag Manager (что видно по скриншотам), они помогут вам понять основные принципы работы в любом случае. Вы также можете скачать мою книгу по Google Tag Manager, где подробно разобраны главы о переменных, триггерах, тегах и селекторах CSS. Все описанное там применимо и к Яндекс Тег Менеджеру.

Итак, для того, чтобы определить уникальный идентификатор кнопки, вам необходимо в браузере открыть консоль разработчика. Для Google Chrome это можно сделать с помощью сочетания клавиш Ctrl + Shift + I или F12. Перейдите на вкладку Elements, нажмите на значок инспектирования (1), затем левой кнопкой мыши выделите ту кнопку, которую планируете отслеживать (2), и далее посмотрите на исходный код страницы, который стал подсвечен (3):

Это и есть HTML-код отслеживаемой кнопки:

У нее есть два атрибута:

• href -  путь к файлу, ссылка #popup-audit, которая открывает модальное окно;
• class - класс элемента button hp-button-1 slide-button w-button green fancybox.

Теперь важно удостовериться, что кнопка с таким классом на странице одна. Для этого вы можете написать такую конструкцию на вкладке Console (в конце нажмите Enter):

, где button hp-button-1 slide-button w-button green fancybox - класс (class) вашей кнопки.

Метод getElementsByClassName() выдаст вам список дочерних элементов, которые имеют данный класс:

Если вы видите только один элемент с индексом 0, то это значит, что кнопка с таким классом на странице одна, и в данном примере мы можем использовать этот класс для создания уникального условия активации триггера. И в триггере Клики - все элементы условие активации будет такое: Некоторые события - Click Classes равно button hp-button-1 slide-button w-button green fancybox

Примечание: в отличие от Google Tag Manager, где для работы с переменными их предварительно нужно активировать, в Яндекс Тег Менеджере встроенные переменные доступны по умолчанию.

В вашем случае код для кнопки, идентификатор и класс будут другими. В моем примере у кнопки был только класс, но не было идентификатора. У вас может быть по-другому. Например, если у кнопки задан id, то в консоли разработчика при инспектировании элемента вы увидите данный атрибут:

Тогда в условии активации триггера будет использоваться встроенная переменная Click ID:

Примечание: в триггере Яндекс Тег Менеджера идентификатор или класс нужно вводить в том регистре, в котором он прописан на странице вашего сайта. Если есть заглавные буквы, значит пишите точно так же.

Чтобы проверить, является ли данный идентификатор уникальным на странице, вы можете написать такую конструкцию на вкладке Console (в конце нажмите Enter):

, где Subscribe - идентификатор (id) вашей кнопки.

Метод getElementById() выдаст вам ссылку на элемент, который имеет данный идентификатор:

Хорошо, когда у кнопки есть класс или идентификатор. Или то и другое одновременно. Но что делать, когда ни Google Tag Manager в режиме отладки не смог вернуть значения в Click Classes и Click ID, ни вы при инспектировании элемента не обнаружили признаков id и class?

Тогда мы спускаемся по алгоритму на третий пункт и начинаем искать CSS-селектор отслеживаемой кнопки. Сделать это можно несколькими способами:

1. использовать специальное расширение для браузера;
2. проинспектировать элемент и скопировать в консоли разработчика селектор.

Если вы планируете использовать первый вариант, тогда установите по ссылке расширение CSS Selector Capture Pro (для Google Chrome). Оно позволяет быстро найти уникальный селектор для любого элемента на странице. Закрепите расширение на панели браузера, а затем нажмите на его и активируйте с помощью опции Enable App:

После этого вы сможете применять его на своем сайте. Просто наведите курсор на нужный элемент - в верхней части страницы появится его селектор (путь к элементу).

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

CSS-селектор данной кнопки будет скопирован в буфер обмена, чтобы его можно было вставить в любой текстовый редактор и перепроверить. Для моего примера он получился таким:

Примечание: вы можете использовать и другие расширения для поиска и копирования селекторов. В этом случае не исключено, что скопированный селектор в одном приложении/расширении будет отличаться от итогового результата из другого приложения. Главное, чтобы он принадлежал нужной кнопке, которую вы планируете отслеживать.

Для проверки скопированного селектора я рекомендую использовать другое расширение. Например, CSS Selector Tester. Оно выделяет на странице элементы, соответствующие заданному CSS. Просто вставьте скопированный селектор в поле Enter CSS selector(s) и нажмите на кнопку TEST. Вы должны увидеть подсвеченный элемент:

Если вы не желаете устанавливать дополнительные расширения для своего браузера, вы можете получить селектор кнопки через инспектирование элемента и консоль разработчика. По аналогии с определением идентификатора и класса элемента, откройте консоль разработчика, перейдите на вкладку Elements, нажмите на значок инспектирования (1), затем левой кнопкой мыши выделите ту кнопку, которую планируете отслеживать, и в исходном коде сайта нажмите на HTML-элемент кнопки (2) правой кнопкой мыши и выберите Copy (3) - Copy selector (4):

Селектор кнопки также будет скопирован в буфер обмена. Для моей зеленой кнопки Консультация он имеет вид #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox

Как видите, они получились разными при использования расширения и консоли разработчика. Более того, если вы будете использовать другой браузер (например, Opera, а не Google Chrome), то можете получить еще один вариант написания селектора для одной и той же кнопки. Это нормально и не стоит за это переживать. Просто каждый из них находит оптимальный вариант конструкции. Вот так выглядит селектор для той же кнопки в браузере Mozilla Firefox: a.button:nth-child(1)

Чтобы проверить, является ли данный селектор уникальным на странице, вы можете написать такую конструкцию на вкладке Console (в конце нажмите Enter):

, где:

• body > section#home.slide-banner.startup-img:nth-child(5) > div.container > div.row-2.w-row > div.column-2.w-col > div > div.first-buttons:nth-child(4) > a.button.hp-button-1.slide-button.w-button.green.fancybox:nth-child(1)
• #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox
• a.button:nth-child(1)
• section#home a.button.hp-button-1.slide-button.w-button.green.fancybox

-> CSS-селектор отслеживаемой кнопки.

Метод querySelectorAll() выдаст вам список (NodeList) всех найденных элементов документа, которые соответствуют указанному селектору:

Раскрыв NodeList, вы увидите количество элементов:

Если там присутствует только один элемент с индексом 0, то это значит, что кнопка с таким селектором уникальна и одна на странице, и в данном примере мы можем использовать этот селектор для создания уникального условия активации триггера в Яндекс Тег Менеджере: Некоторые события - Click Element соответствует CSS-селектору. Любой из четырех описанных выше вариантов селектора подойдет:

Именно такое условие является наиболее распространенным при отслеживании кликов по кнопкам, так как часто бывает, что у кнопок нет ни идентификатора, ни класса. Зато селектор у элемента страницы есть всегда. Но если у кнопки есть и идентификатор, и класс, тогда условие активации триггера в GTM вы можете настроить одним из любых 3 способов:

1. Click ID равно/содержит;
2. Click Classes равно/содержит;
3. Click Element соответствует селектору CSS.

Но это еще не все. Вспомните эпизоды из своей практики, когда вам необходимо было настроить отслеживание клика по кнопке, а у вас не получалось. Вроде бы все делали правильно: нашли нужный элемент, скопировали его CSS-селектор, создали триггер, добавили условие активации, настроили тег. Но в режиме предварительного просмотра вы все равно не видите срабатываемых событий и данные в Яндекс Метрику не отправляются. Почему так происходит? Возможно, дело во вложенности элементов.

Мне не хотелось бы дублировать текст из другой статьи, поскольку в материале, посвященному отслеживанию вложенных элементов с помощью подстановочного знака (*), достаточно подробно обозначена проблема и предложено решение. Я лишь хотел бы добавить то, что интернет-маркетологи не всегда корректно определяют уникальный идентификатор элемента. Точнее, только для одного уровня (самого верхнего), но совершенно забывают про вложенные элементы.

Давайте разберем конкретный пример. На сайте есть 2 кнопки, которые находятся внутри одного блока. Его код выглядит так:

Предположим, веб-аналитик хочет отслеживать клик по левой кнопке. С помощью инспектирования элемента он находит класс кнопки .button-left и планирует использовать его в качестве условия активации триггера.

В Яндекс Тег Менеджере он задает условие Click Classes содержит button-left:

Но текущий триггер не активируется, и тег не срабатывает... В чем проблема? Можно ли было брать класс button-left, когда у самой кнопки чуть ниже есть значение другого класса fancybox-n? Можно, но этот класс не уникален и присутствует еще в нескольких кнопках на странице, а нам нужно отследить только клик по одной кнопке.

Да, можно использовать класс более верхнего уровня, коим является button-left. Но тогда еще нужно не забыть задать условие для отслеживания всех вложенных элементов с помощью универсального селектора со звездочкой (*). В результате условие Click Classes содержит button-left преобразится в более сложное условие Click Element соответствует селектору CSS .button-left, .button-left *

Именно такой способ отслеживания подробно описан в статье про универсальный селектор.

2. Настройка триггера

Теперь необходимо создать окончательный триггер для отслеживания кликов по кнопке, который будет запускать тег Яндекс Метрики с отправкой JS-события.

Для этого перейдите на вкладку Триггеры и нажмите на кнопку Добавить триггер:

В открывшемся окне выберите тип триггера Клики - все элементы:

В зависимости от того, какой уникальный идентификатор элемента вы нашли на предыдущем шаге, такое условие активации триггера вы и задаете. Один из вариантов для моей кнопки - это условие Click Classes содержит button hp-button-1 slide-button w-button green fancybox:

Примечание: если вы ранее использовали на своем сайте Google Tag Manager, а теперь перешли на Яндекс Тег Менеджер, то настройка триггеров не вызовет сложностей - логика их работы идентична. Вы можете просто скопировать условия из GTM в ЯТМ.

В Яндекс Тег Менеджере (как и в диспетчере тегов Google) есть еще один триггер, который используется для отслеживания кликов. Он называется Клики - только ссылки и позволяет отслеживать события только клики по ссылкам. Почему он важен для нас?

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

Клики по кнопкам с ссылками рекомендуется отслеживать именно с помощью данного триггера. Самым простым вариантом задания условия активации является использование встроенной переменной Click URL. Она как раз принимает значение ссылки, по которой пользователь переходит после клика. В данном примере https://t.me/clicksider. Например, Click URL содержит t.me/clicksider:

Принципиальное отличие между двумя триггерами Клики - все элементы и Клики - только ссылки заключается в том, что после клика по элементу они сработают по-разному:

• Клики - все элементы дойдет до самого последнего элемента в структуре DOM (объектной модели документа), по которому фактически был совершен клик;
• Клики - только ссылки будет искать элемент ссылки, коим в HTML является тег <a>.

Вернемся к кнопке Подписаться. Блок с ней имеет такой код:

При использовании двух триггеров для отслеживания кликов мы получим разные результаты:

• элемент <span> для Клики - все элементы;
• элемент <a> для Клики - только ссылки.

3. Создание цели типа JavaScript-событие

Зайдите в ваш счетчик Яндекс Метрики и в разделе Цели создайте цель с условием JavaScript-событие. Укажите произвольный идентификатор цели (в моем примере click_green_button) и название цели:

Примечательно: я рекомендую использовать условие Идентификатор цели совпадает.

Обязательно запомните идентификатор, он вам понадобится в окончательной настройке тега Яндекс Метрики. В завершение сохраните цель.

4. Создание тега Яндекс Метрики

Вернитесь в Яндекс Тег Менеджер, перейдите на вкладку Теги и нажмите на кнопку Добавить тег:

В открывшемся окне задайте следующие настройки:

• Название - произвольное название тега, характеризующее его действие (например: Яндекс Метрика - Клик по зеленой кнопке);
• Шаблон тега - Яндекс Метрика;

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

И в открывшемся окне добавить тег Яндекс Метрика (Передача информации о достижении цели):

После этого вас вернет обратно в настройки тега, только в шаблонах уже будет значиться Яндекс Метрика.

• ID счетчика - вставьте идентификатор вашего счетчика Яндекс Метрики. Он отображается вверху страницы;
• Идентификатор цели - задается на странице редактирования счетчика при создании или изменении цели типа JavaScript-событие. Как вы помните, в моем примере click_green_button);

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

Метрика распознает трехбуквенный код валюты по стандарту ISO 4217. При пустом значении используется валюта счетчика по умолчанию.

Примечание: подробнее о том, как в Яндекс Метрику передавать вместе с событием параметры события, будет рассмотрено в отдельном руководстве.

В качестве триггера активации выберите триггер, созданный на предыдущем шаге. Итоговый тег Яндекс Метрики будет выглядеть так:

Сохраните тег.

5. Проверка корректности работы

Для каждой системы аналитики существуют свои способы и приемы отладки. Для Яндекс Тег Менеджера я рекомендую использовать такой подход:

• добавить еще один тег Мини дебагер триггеров и переменных;
• использовать в режиме предварительного просмотра _ym_debug=2;

Создайте еще один тег в своем контейнере Яндекс Тег Менеджера. Задайте ему название (например: Отладка клика по зеленой кнопке). Выберите тип тега Мини дебагер триггеров и переменных. Если его нет в списке, также добавьте его через Шаблоны из каталога.

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

Команда Яндекса добавила его не случайно. Все дело в том, что в текущей версии ЯТМ (на момент написания этого руководства) как такового режима отладки в принципе нет. Да, в правом верхнем углу располагается кнопка Предварительный просмотр.

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

Нажав на кнопку, в отдельном окне откроется ваш сайт, а в адресной строке браузера в URL-ссылке будет добавлен специальный параметр _ytm_preview, свидетельствующий об активации режима предварительного просмотра:

Но отдельного окна или какой-то панели, на которой было бы видно срабатывание триггеров, активированных тегов и значений переменных в Яндекс Тег Менеджере пока нет. На сегодняшний день режим предварительного просмотра Yandex Tag Manager значительно отличается от режима отладки Google Tag Manager, который открывается в отдельном окне по адресу tagassistant.google.com.

Единственное, что можно сейчас делать с помощью режима отладки ЯТМ - это выводить сообщения в консоль разработчика, который будут отображаться на вкладке Console. Для этого Яндекс и разработал тег Мини дебагер триггеров и переменных. Обязательно добавьте его к себе в контейнер и используйте при отладке различных настроек, до выхода полноценного режима предварительного просмотра.

Фактически, у этого шаблона всего две настройки:

1. установка триггера;
2. поле для ввода какого-то значения вручную (например, текста об успешно отправленном событии) или указания переменной, чтобы в консоли выводилось ее значение, если оно изменяется во времени динамически.

Примечание: в Яндекс Тег Менеджере можно ссылаться на переменные в триггерах, тегах и других переменных с помощью ввода конструкции {{ и выбора соответствующей переменной из выпадающего списка.

Сам тег Мини дебагер триггеров и переменных ничего и никуда не передает. Он лишь сообщает нам информацию о нужном нам действии в консоли. Например, если вы желаете проверить настройку триггера и тега для отслеживания клика по кнопке, то и для тега мини дебагера задайте тот же самый триггер. Ведь если он сработает для этого тега, то и будет корректным для нашего основного тега Яндекс Метрики, который отправляет событие клика по кнопке.

В качестве примера в поле Переменная я просто напишу текст Событие успешно отправлено, чтобы продемонстрировать вам работу.

Сохраните тег. В результате в вашем контейнере Yandex Tag Manager должно отображаться два тега с одним и тем же триггером активации:

После этого нажмите на кнопку Предварительный просмотр и дождитесь компиляции ссылки.

Как только это произойдет, нажмите на кнопку Открыть предварительный просмотр:

В отдельном окне откроется ваш сайт, а в адресной строке браузера в URL-ссылке будет добавлен специальный параметр _ytm_preview. Поскольку мы с вами создали тег мини дебагера триггеров и переменных, который выводит результат в консоли, нам необходимо открыть ее. Сделать это можно точно таким же образом, что и прежде, когда мы исследовали HTML-элементы на странице на вкладке Elements. Только теперь нам нужна вкладка Console:

Теперь нажмите на ту кнопку, которую вы отслеживаете и для которой создали тег события Яндекс Метрики. Если вы все настроили корректно (задали верное условие активации триггера), то в консоли разработчика появится то уведомление, которое вы добавили в теге Мини дебагер триггеров и переменных:

Если на созданное событие клика по кнопке вы не увидели никакого уведомления в консоли разработчика, вероятно, вы неверно настроили триггер и условие его активации. Вернитесь в интерфейс Тег менеджера и скорректируйте свое условие, а затем попробуйте вновь.

Другой способ отладки - это использовать в режиме предварительного просмотра _ym_debug=2. Добавьте эту конструкцию после параметра _ytm_preview через &, чтобы получилось так:

Вы можете сделать это даже в режиме Инкогнито. Внизу страницы нажмите значок — появится панель отладки. Перейдите в ней на вкладку Events и повторно нажмите на кнопку, которую вы отслеживаете. Если вы все настроили корректно, то на шкале событий вы увидите достижение JS-цели:

На текущий момент - это самый наглядный и простой способ проверки корректности регистрации JS-событий. Перед публикацией версии контейнера Яндекс Тег Менеджера я рекомендую выполнять две таких проверки.

Конечно же, благодаря шаблону тега Мини дебагер триггеров и переменных и консоли разработчика мы можем получить больше информации о том, какие значения принимают переменные в тот или иной момент времени, почему не сработало событие и не активировался тег, и при желании внести правки. _ym_debug=2 нам таких детальных сведений не даст. Он лишь покажет или не покажет наше событие.

6. Публикация контейнера ЯТМ

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

При желании (необязательно) вы можете задать название версии и добавить описание. В завершение нажмите еще раз кнопку Опубликовать.

Теперь ваши настройки будут активны для всех пользователей.

Примечание: перед тем, как опубликовать контейнер, вы можете остановить вспомогательный тег Мини дебагер триггеров и переменных или вовсе удалить его из Тег менеджера, поскольку в окончательный версии он вам не нужен. А когда вы будете выполнять новые отслеживания, вы просто снова создадите его и добавите к нему новый триггер, чтобы проверить соответствующие настройки.

7. Данные в отчетах

После публикации контейнера отслеживания кликов по кнопкам пользователей будут передаваться в Яндекс Метрику. Посмотреть их можно будет в стандартных отчетах:

• Конверсии;
• Параметры событий и Параметры целей;
• любой стандартный отчет с выбором созданной цели.