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

Пошаговое руководство по отслеживанию кликов по ссылкам с помощью Яндекс Тег Менеджера.

Начало

В Яндекс Тег Менеджере есть два триггера, которые используются для отслеживания кликов:

1. Клики - все элементы
2. Клики - только ссылки

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

Данный тип триггера используется для отслеживания нажатий на ссылки на вашем сайте. В отличие от триггера Клики - все элементы, он срабатывает только при клике по HTML-тегу <a>, то есть по настоящей ссылке. С его помощью вы можете отслеживать:

• клики на внешние ссылки (исходящие переходы на другие сайты, домены которых отличаются от вашего сайта);
• клики по кнопкам Скачать (если они оформлены как ссылки);
• клики по ссылкам e-mail и phone (если они размечены как mailto: или tel: соответственно);
• переходы по навигационному меню вашего сайта (если навигация сайта построена на обычных ссылках, можно отследить, какие разделы интересуют пользователей);
• переходы по ссылкам с UTM (можно настроить отслеживание, если пользователь кликает по ссылке с UTM-метками, например, utm_source=promo).

Чтобы узнать, содержит ли элемент на странице тег <a>, вам необходимо перейти на сайт и кликнуть правой кнопкой мыши по тому элементу, который проверяете, а затем выбрать Просмотреть код:

Вам откроется консоль разработчика с активной вкладкой Elements (Элементы). В исходном коде страницы найдите ваш HTML-элемент. Если вы изначально выбрали его, то консоль разработчика сразу же подсветит его. Он должен содержать тег ссылки <a> и атрибут <href> - обязательный атрибут тега <a>, который указывает куда ведет ссылка:

Именно тег <a> предназначен для создания ссылок. Например, на:

• другую страницу - https://site.ru
• файл (PDF, изображение и т.д.) - https://site.ru/file.pdf
• элемент на текущей странице (якорная ссылка с #) - https://site.ru/#section1
• email - mailto:mycompany@yandex.ru
• телефон - tel:+1234567890

Таким образом, <a> - это тег для создания ссылок, а href - его атрибут, определяющий назначение ссылки (URL, якорь, email и т.д.). Если <href > отсутствует, тег <a> будет выглядеть как ссылка, но не будет работать.

В моем примере у кнопки Подписаться присутствует тег <a> и атрибут href, у которого есть ссылка https://t.me/clicksider. Это означает, что в Яндекс Тег Менеджере для отслеживания клика по кнопке можно использовать не только триггер Клики - все элементы, но и триггер Клики - только ссылки, поскольку элемент кликабельный. Далее я покажу настройку такого отслеживания.

Другой распространенный пример отслеживания кликов по ссылкам - социальные сети. Наверняка на вашем сайте есть ссылки, которые ведут на социальные сети компании - в VK, Rutube, YouTube, Telegram и другие мессенджеры и сети.

Поскольку такой элемент является кликабельным и содержит ссылку (присутствует тег <a> с атрибутом href), то в Яндекс Тег Менеджере можно использовать триггер Клики - только ссылки.

У вас на сайте размещен кликабельный телефон или email? Не проблема! Их также можно отследить с помощью триггера Клик - только ссылки.

Ссылка ведет на скачивание какого-либо файла на вашем сайте? Например, коммерческого предложения? Если она кликабельная и содержит уже известные вам тег <a> и атрибут href, то ее отслеживание так же возможно с помощью триггера Клик - только ссылки.

Поскольку атрибут href является неотъемлемой частью тега <a>, то вместе с триггером Клик - только ссылки вы можете использовать встроенную переменную Click URL, которая будет извлекать значение из href.

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

Примечание: для отслеживания кликов по ссылкам чаще всего используют переменные Click URL, Click Target и Click Text. Но самый распространенный вариант - именно Click URL. Он наиболее надежный.

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

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

• создать соответствующие триггеры и теги для отслеживания JavasScript-событий в Яндекс Метрике;
• использовать выполненные настройки не только для Яндекс Метрики, но и передавать события кликов по ссылкам в другие рекламные и аналитические системы (например, в пиксель VK Рекламы).

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

В качестве примера я предлагаю настроить три отслеживания:

1. отдельные события клика по ссылке;
2. общее событие клика по ссылкам социальных сетей;
3. общее событие клика по ссылкам социальных сетей, а также передача само название социальный сети в Яндекс Метрику, по которой пользователь кликнул (VK, Rutube, YouTube, Telegram и т.д.), в качестве параметра события.

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

1. Отдельное событие клика по ссылке

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

Проинспектировав данный элемент через консоль разработчика, мы увидим, что он содержит тег <a> и атрибут href с ссылкой на книгу (файл .pdf):

Это значит, что для отслеживания клика по кнопке (которая содержит ссылку!) в Яндекс Тег Менеджере мы можем использовать триггер Клик - только ссылки. Для этого перейдите в раздел Триггер и нажмите на кнопку Добавить триггер:

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

Для того, чтобы настроить отслеживание клика по конкретной ссылке, а не всем, которые есть на вашем сайте, необходимо конкретизировать условие активации триггера. Для этого выберите Некоторые события и условие Click URL содержит ..., где в значении укажите ссылку из атрибута href. В моем примере скачивание книги доступно по ссылке https://graphanalytics.ru/Google_Analytics_dlya_googlyat_2018.pdf, поэтому я могу задать такое условие - Click URL содержит Google_Analytics_dlya_googlyat_2018.pdf:

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

Задайте название триггеру и сохраните его.

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

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

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

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

У этого шаблона всего две настройки (помимо названия):

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

Чтобы проверить корректность настройки нашего триггера клика по ссылкам в поле Переменная введите Ссылка - {{Click URL}}, сославшись на встроенную переменную с помощью двойных фигурных скобок, а триггером укажите триггер клика по ссылке, который вы создали на предыдущем шаге. В результате у вас должно получиться примерно так:

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

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

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

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

Теперь совершите клик по отслеживаемой ссылке. В моем примере - это клик по скачиванию книги. Если вы все настроили корректно (задали верное условие активации триггера), то в консоли разработчика появится то уведомление, которое вы добавили в теге Мини дебагер триггеров и переменных, а именно Ссылка - Click URL, куда динамически подставляется значение, извлеченное из атрибута href, то есть сама ссылка (полный URL-адрес):

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

Этот шаг мы разберем в следующем примере.

2. Общее событие клика по ссылкам

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

Как в этом случае корректно настроить такие отслеживания? Создавать для отдельной ссылки свой триггер с дополнительным условием активации как в примере выше? Можно, но это нецелесообразно. Вы плодите сущности (создаете много триггеров) и усложняете сам процесс настройки. Все это можно сделать, создав один общий триггер с одним общим условием активации.

Перейдите в Яндекс Тег Менеджер и добавьте триггер типа Клик - только ссылки. В качестве дополнительного условия активации выберите Click URL соответствует регулярному выражению ... Далее через знак вертикальной черты | укажите подряд ссылки на все социальные сети, которые вы планируете отслеживать. В моем примере - это ВКонтакте, Instagram, Facebook* и YouTube.

* Деятельность американской компании Meta (бывшая Facebook) запрещена в России, организация признана экстремистской.

Просто выпишите их в отдельный файл, а затем соедините с помощью символа | без каких-либо пробелов. У вас должно получиться примерно так:

Конструкцию можно упростить, убрав везде начало с https://

Вставьте любую из них в триггер Тег Менеджера:

Задайте название триггеру и сохраните его. Этот триггер будет срабатывать, когда пользователь нажимает на ссылку, ведущую на один из следующих URL:

• https://vk.com/graphanalytics
• https://instagram.com/graphanalytics
• https://facebook.com/graphanalytics
• https://www.youtube.com/channel/UCI6JN9P9vWbkcZE4G5mZiYQ

Символ | в регулярных выражениях означает логическое ИЛИ. Триггер проверяет URL клика на соответствие любому из этих вариантов. Если URL совпадает хотя бы с одним из них - триггер срабатывает. Чтобы проверить корректность его настройки, воспользуйтесь тем же тегом мини дебагера, который мы создали на предыдущем шаге. Только замените в нем триггер активации, а поле с переменной оставьте без изменений:

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

Как видите, общее условие Click URL соответствует регулярному выражению сработало для кликов по всем ссылкам. Таким образом, вам не нужно создавать отдельные триггеры на каждую ссылку. Вы можете использовать один триггер и общее условие активации для всех URL, перечислив их через специальный символ вертикальной черты |

Что делать теперь? Вам нужно создать в интерфейсе Яндекс Метрики цель типа JavaScript-событие, задав произвольный идентификатор для отслеживания кликов по социальным сетям. Например, social-network:

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

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

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

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

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

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

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

После этого вас вернет обратно в настройки тега. Задайте:

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

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

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

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

Добавьте нижеприведенную конструкцию после параметра _ytm_preview через &, чтобы получилось так:

Это встроенный отладчик Яндекс Метрики. Он помогает проверить, какие данные собирает счетчик, а так же правильно ли отслеживаются цели, события электронной коммерции и данные по контентной аналитике.

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

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

Примечание: вы можете видеть дополнительные строки с external url. Это признак отслеживания переходов по внешним ссылкам, который активируется при инициализации счетчика Яндекс Метрики с методом init и по умолчанию имеет значение true.

Через некоторое время данные по достигнутой цели отобразятся в Яндекс Метрике в отчете Конверсии:

Теперь вы этот триггер можете использовать для отслеживания и передачи данных в другие аналитические и рекламные инструменты. Например, в пиксель VK Рекламы.

3. Общее событие клика по ссылкам + параметры

Общее событие клика по ссылкам - это здорово! Но что, если вы хотите отслеживать не просто сам факт клика по ссылке, но еще и передавать в аналитику значение социальной сети или того элемента, по которому был осуществлен клик пользователя? Да, это возможно, но нам нужно сделать еще одно действие.

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

Если мы проинспектируем такой элемент, то увидим, что видимый текст данного элемента содержится внутри тега <a>:

Такой текст можно извлечь с помощью встроенной переменной Click Text. Поэтому вы можете использовать эту переменную в качестве параметра события в теге Яндекс Метрики.

Для этого вернитесь в созданный тег Метрики и поставьте галочку напротив поля params:

Введите в него следующую конструкцию:

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

Все остальное оставьте без изменений.

Сохраните/обновите тег.

Я также рекомендую обновить и тег мини дебагера, добавив в поле Переменная не только Click URL, но еще и Click Text, чтобы получилось так:

Обновите тег.

Запустите режим предварительного просмотра, дождитесь компиляции ссылки, а затем откройте режим отладки на отдельной вкладке браузера. Добавьте параметр отладки _ym_debug=2 после параметра _ytm_preview через &. Внизу страницы нажмите значок  — появится панель отладки. Перейдите в ней на вкладку Events и повторно нажмите на ссылку, которую вы отслеживаете. Если вы все настроили корректно, то на шкале событий вы увидите достижение JS-цели. А на вкладке Console будет отображаться переданный параметр события:

Сделайте то же самое для других ссылок, которые вы отслеживаете. У меня четыре социальных сети (ВКонтакте, Instagram, Facebook и YouTube), поэтому в консоли вместе с событием я вижу четыре переданных параметра события:

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

Как видите, событие клика по ссылкам срабатывает, а вместе с ним в Яндекс Метрику передается и параметр события с нужным текстом.

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

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

Пример переданного параметра события в Яндекс Метрику:

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

Еще несколько примеров отслеживания

Вы можете использовать нижеприведенные настройки триггеров для отслеживания кликов по ссылкам для своих собственных проектов.

Клик по номеру телефона

• Условие активации триггера: Click URL содержит tel:+1234567890

Клик по email

• Условие активации триггера: Click URL содержит mailto:mycompany@yandex.ru

Клик по части URL с #

• Условие активации триггера: Click URL содержит #section1

Клик по ссылке с загрузкой файла

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

Например, если вы желаете отслеживать точно такие же расширения, как и в Яндекс Метрике через цель типа Скачивание файлов, тогда добавьте условие Click URL соответствует регулярному выражению и возьмите нижеприведенный список:

В триггере Яндекс Тег Менеджера это будет выглядеть так:

Если вам необходимо отслеживать какой-то конкретный тип расширения (например, .pdf), то условие активации триггера будет гораздо проще - Click URL содержит .pdf: