Как отследить клики по ссылке
Как отследить клик по любой ссылке на странице?
Суть в том, что хочу затемнять страницу, после нажатия на ссылку. Т.е., в тот момент, пока браузер не загрузил ещё новую страницу.
Мне необходимо отследить клик по любой ссылке на странице и выполнить функцию. Не подскажите, как мне отследить нажатие на ссылку?
Нужно именно на чистом JS.
2 ответа 2
Для всей страницы лучше делать через делегирование событий, определить функцию клика, далее убедится что клик произошел именно на ссылке. Для того чтобы ссылка не открылась (действие по умолчанию) это нужно запретить методом preventDefault()
для более надежного перехвата нужно не забыть про события:
если на окно больше никаких событий не будете навешивать можно сделать это цепочкой присвоений:
Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.22.41046
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как отслеживать клики по баннерам и ссылкам 10
Здравствуйте, уважаемые друзья. Баннеры html5 отличаются от остальных (помимо всего прочего) тем, что в них можно подключить аналитику Google Analytics и отслеживать не только переходы, но и другие параметры доступные для анализа, такие как:
Аналитика играет важную роль в развитии любого проекта. Так как вы всегда в курсе, что происходит на вашем сайте. Можете отследить конверсию и определить слабые места на вашем сайте или продающей странице.
Для этого не только подключаются сервисы аналитики, но и создаются многоступенчатые цели. Но, в случае с баннером, ситуация немного другая. Баннер размещается на сайте с целью привлечь внимание и побудить посетителя кликнуть по нему для перехода на целевую страницу.
Поэтому как таковую цель на баннер установить можно, другое дело что с Яндекс.Метрикой это сделать легко, а вот с Google Analytics и голову можно сломать.
К тому же в Гугловской аналитике частенько происходят изменения и те коды, которые работали раньше, сегодня уже не работают.
И для того чтобы создать правильные цели и события придётся лезть не только в код баннера, но и в шаблон самого сайта.
Как отслеживать клики по баннеру без целей аналитики.
Если вы хотите иметь полную картину движения трафика на вашем сайте, то есть откуда приходят посетители, на какие ссылки кликают, и куда уходят. Разумеется, для этих целей нужно подключать сервисы аналитики Яндекса и Гугла. Создавать цели, добавлять события и метки к ссылкам. И тогда вы будете в курсе всех событий.
Но, для отслеживания переходов (кликов) по баннерам и ссылкам вам не нужна вся эта сервисная аналитика. Клики можно считать гораздо проще.
И для того чтобы отследить клики по баннеру достаточно использовать севрисы сокращения ссылок, а ещё лучше прятатель ссылок для платформы WordPress и вы всегда будете в курсе, сколько кликов было сделано по баннеру или партнёрской ссылке.
При этом вы минимизируете количество внешних исходящих ссылок на сайте.
Я для этих целей как раз использую прятатель ссылок. Правда, платную версию. Заплатил за неё 150 рублей. И очень доволен результатом.
Как пользоваться прятателем ссылок и отслеживать клики.
Для начала вы скачиваете плагин. Он идёт в двух версиях. Бесплатная и платная. В бесплатной версии функционал ограничен. В платной же версии можно видеть общее количество кликов, уникальные переходы и сделать подсказку (пояснение) для каждой ссылки.
Кстати, вы можете сэкономить на покупке PRO версии плагина. Не всегда, но автор предлагает приобрести плагин со скидкой, когда вы желаете скачать бесплатную версию. И в таком случае у вас будет возможность купить плагин за 99 рублей. Так что советую проверить эту лазейку.
После того как вы установите плагин и активируете его. Вам будет доступен весь функционал.
Для начала откройте административную панель WordPress – «Настройки» – «Прятатель ссылок PRO» и кликните по ссылке «Настройки».
В настройках нужно указать префикс и отметить чекбоксом подключение функции комментирования ссылок.
Далее, нужно создать ссылку, которую вы разместите в баннере или в любом другом месте. По этой ссылке будут считаться переходы.
Для этого нажмите на ссылку «Добавить ссылку». Далее, в указанные поля вводите оригинальную ссылку и идентификатор видимой ссылки (вы его придумываете сами). Указываете тип редиректа (для партнёрских ссылок рекомендуется использовать 307), вписываете комментарий и нажимаете кнопку «Добавить ссылку».
Далее, распространяете ссылку и наблюдаете за статистикой. Всё просто и не потребует от вас сложных настроек в сервисах аналитики.
В качестве наглядного примера предлагаю посмотреть небольшой видеоурок по плагину с примерами его использования.
У меня на сегодня всё, желаю вам успехов и хорошего настроения.
И ни кликом меньше: как посмотреть кол-во кликов по ссылкам?
Чтобы посмотреть количество кликов по нужной ссылке можно использовать utm, но есть ещё одна маленькая хитрость.
В одном из прошлых материалов мы говорили о том, как анализировать трафик, что есть utm метки, которые позволяют решить эту задачу. Но, это не единственный способ. Мой коллега по цеху не так давно рассказал про ещё один трюк, коим я и поделюсь.
Отследим клик по ссылке с помощью goo.gl
Goo.gl – это сервис, позволяющий сокращать URL. Когда у вас очень длинная ссылка и вы, скажем, не хотите такую махину вставлять в пост соц.сетей, вас спасёт такое решение. Просто вставьте нужную вам ссылку в строку, нажмите на кнопку, и она превратится в короткую и более симпатичную версию.
Наверняка вы видели короткие ссылки, типа “https://goo.gl/hfXXlg” или “https://vk.cc/6D9RF5”, это всё их (сервисов) рук дело. За таким коротким адресом может скрываться очень длинная ссылка, которая по факту и будет отображаться при клике.
Всё бы ничего, но пару недель назад я узнал, что с помощью этого сервиса можно ещё посмотреть сколько кликов по ссылке сделали пользователи. Оказывается, любая ссылка, сделанная через “гугловский сокращатель” отслеживается в системе.
Простите, что прерываю чтение. Присоединяйтесь к моему telegram канал. Свежие анонсы статей, развитие digital продуктов и growth hack, там все. Жду вас! Продолжаем…
По шагам на примере
Конкретно для этой ссылки пока нет накопленных данных, я лишь один раз кликнул по ней из своего браузера. Но, стоит отметить, что данные подгрузились практически моментально. Не более 2 минут прошло, а уже всё отображается в статистике.
+UPD: важно, что статистику мы получаем именно по короткой ссылке, которая может быть использована в различных целях. От примера с email рассылкой, до различных рекламных каналов.
Главный плюс
В том, что для просмотра utm статистики вас необходим доступ в системы аналитики (Яндекс Метрика Google Analytics). А для просмотра через короткие ссылки не требуется ничего, кроме 2 кликов вашего указательного пальца.
Конечно, таким способом вы не сможете посмотреть качественные показатели трафика и увидеть более глубокую аналитику. Но для простых задач, когда нужно понять сколько раз “тыкнули”, вполне себе неплохой вариант.
Лёгким движением руки
Теперь вы знаете, как посмотреть статистику кликов по ссылке. Надеюсь, теперь ваша жизнь стала немного проще, до скорой встречи!
А что, если поменяться ролями? Посадить людей в клетку вместо собак? Немного грустный, но поучительный ролик от Pedigree.
Отслеживание кликов в Google Tag Manager
Разберем как отслеживать клики и переходы с помощью Google Tag Manager и передавать эту информацию в Google Analytics. Есть как минимум два сценария, когда это актуально:
Отслеживать отправку форм по нажатию на кнопку «Отправить» не рекомендую. Хотя, такой способ и будет работать, статистика будет неточной: пользователь может нажать на кнопку до заполнения самой формы — событие в Google Analytics зафиксируется, а по факту форма отправленой не окажется.
Для настройки отслеживания кликов нам понадобятся Google Tag Manager (GTM) и Google Analytics (GA).
Настраиваем переменную Click URL в GTM
Заходим в Google Tag Manager, в левом меню переходим в раздел Variables (Переменные). Тут будет список всех переменных, которые доступны. Если в списке Click URL нет, нажимаем Configure (Настроить) и в выезжающем меню проставляем галочку возле Click URL. После этого она появится в списке и мы сможем её использовать в Триггерах и Тегах, об этом далее.
Мы разбираем отслеживание кликов по ссылкам, поэтому и используем Click URL. Эта переменная предназначена только для кликов по ссылкам. Для отслеживания нажатий на другие элементы можно использовать Click Classes/ID/Text. Это актуально, если надо отслеживать нажатия по кнопкам — они обычно сверстаны через тег button и ссылками не являются.
Настраиваем триггеры в GTM
Теперь, нам необходимо обозначить те клики, которые нас интересуют. Для этого необходимо перейти в раздел Triggers (Триггеры) и задать условия, по которым будут фильтроваться нужные клики. Мы будем отслеживать две категории кликов:
Триггер для кликов по ссылкам tel и mailto
Переходим в раздел Triggers (Триггеры) и нажимаем New (Создать). Появится окно создания триггера, где нам необходимо выбрать тип триггера: Just Links (Только ссылки).
В конфигурации мы используем регулярное выражение, при котором будет проходить проверка на наличие «mailto:» или «tel:» в начале самой ссылки.
Символ ^ (карет) значит, что «mailto:» или «tel:» должны идти именно в начале ссылки. Символ | (пайп) — это логическое или.
Регулярные выражения обычно вызывают сложности у начинающих, поэтому рекомендую проверять их с помощью https://regex101.com.
Можно обойтись и без регулярных выражений, если использовать Click Classes/ID/Text для фильтрации нужных нам кликов. Это проще, но несет за собой риски: текст ссылки (эл. почта или номер телефона) могут поменяться, равно как класс или идентификатор ссылки. Моя конфигурация на регулярных выражениях не зависит от номера или адреса почты — она будет работать с любыми данными и на всех сайтах.
Сохраняем триггер и даем ему понятное название, чтобы не запутаться. Обычно, я называю триггеры по шаблону: «тип триггера — условие» — это удобно, когда их становится больше одного. Таким образом, однотипные триггеры имеют одинаковое начало в названии и наглядно группируются в общем списке.
Триггер для кликов по внешним ссылкам
По аналогичному сценарию создаем второй триггер.
Конфигурация триггера для кликов по внешним ссылкам
Конфигурация второго триггера очень похожая:
Триггер будет фиксировать клики по ссылкам, которые не начинаются с адреса нашего сайта, то есть являются внешними. А второе правило активации исключает клики по tel- и mailto-ссылкам (технически, они тоже внешние), триггер для которых мы настраивали выше.
Настраиваем теги
Тег для tel- и mailto-ссылок
Тег для внешних ссылок
Между собой теги отличаются только полем Category и триггерами, по которым они срабатывают. Отдельно распишу по полям в двойных фигурных скобках:
Передавать <
Проверка результатов в Гугл Аналитике
После сохранения и публикации изменений в Тег Менеджере, переходим в Гугл Аналитику, в раздел отчетов в режиме реального времени и проверяем результаты работы новых тегов:
Отчет по событиям в режиме реального времени
Отмечу, что мой способ не является аксиомой, а лишь одним из вариантов отслеживания кликов. Его основное преимущество — универсальность — мы не привязываемся к каким-то конкретным параметрам, которые могут поменяться (текст, классы или идентификаторы). Эти настройки можно смело использовать на любом сайте (не забудьте изменить адрес сайта в настройках триггера для кликов по внешним ссылкам).
Добавляем определение устройства
Иногда, может понадобится отделить или отфильтровать клики в зависимости от устройства. Например, нажатие на кнопку телефона имеет смысл именно на мобильных устройствах. С обычных компьютеров и ноутбуков тоже можно совершать звонки, но это бывает сильно реже и такие нажатия не будут приводить к конверсии.
Устанавливаем скрипт
В первую очередь, установим скрипт, который будет определять устройство пользователя. Для этого заходим в раздел Variables (Переменные), создаем новую переменную типа Custom JavaScript и вводим сам скрипт:
Обновляем тег для tel- и mailto-ссылок
Теперь, добавляем переменную getDeviceType в наш тег. У меня переменная добавлена через нижнее подчеркивание к странице, на которой был клик по контактной ссылке, в поле Label. В Гугл Аналитике это выглядит так:
Тип устройства указан в поле Event Label, вместе с адресом страницы, на которой был клик по номеру телефона
Создаем цель в Гугл Аналитике
Остается дело техники. Если мы хотим отслеживать, например, клик по номеру телефона, который посетитель совершил с мобильного устройства, создаем в Google Analytics цель нажатие на кнопку и задаем следующие настройки:
Как настроить отслеживание кликов по ссылкам и отдельным элементам в Google Tag Manager
Про GTM было выпущено много статей. Сегодня попробуем разобраться с передачей события по взаимодействию с отдельными элементами на странице. Методы помогут настроить отслеживание внутренних и внешних ссылок, анализировать квиз-механики, клики по изображениям и баннерам.
Как отследить клик по внутренним ссылкам
Необходимо создать новый триггер и внести некоторые настройки.
Далее настраиваем отслеживание взаимодействия с ссылкой на скачивание прайс-листа. Находим нужную ссылку на сайте и определяем ее class или id с помощью функции просмотра кода в браузере:
Настройки должны быть выполнены следующим образом:
Готово! Указываем название для нового триггера и сохраняем.
Рекомендую включить флажок Ждать теги, так как данная опция предусматривает небольшую задержку, что позволяет GTM дать время для активации тега. Особенно это полезно когда при клике на ссылку происходит редирект на другую страницу.
Если вы установите флажок «Проверка ошибок», то теги будут активироваться только при успешном открытии ссылки. В противном случае они будут срабатывать при каждом нажатии на ссылку, даже когда ссылка не открыла требуемый элемент.
Как отследить клик по отдельному элементу
Допустим, нам необходимо отследить взаимодействие пользователей с кнопкой «Добавить корзину» на странице /cart.html. Находим код кнопки и определяем идентификатор элемента:
Далее выполняем действия:
Настройки выглядят так:
Сохраняем и проверяем работу созданных триггеров в режиме Предварительного просмотра. Выполняем клик по объекту на сайте и видим, что информация о действие передаются.
Если данные передаются корректно, то можно создать теги для передачи события в Google Analytics и Яндекс.Метрику.
Расширение GTM Sonar
Проверка ссылок может вызвать некоторые сложности. Например, вам нужно в Режиме предварительного просмотра проверить корректность активации тега, но при нажатии на ссылку загружается новая страница и вы не сможете проверить передачу данных из консоли GTM.
Для таких случаем можно установить расширение GTM Sonar для своего Google Chrome. Расширение легко устанавливается и активируется.
GTM Sonar помогает в Режиме предварительного просмотра кликать на нужные элементы, оставаясь на исходной странице, без перехода по ссылке.
Остались вопрос?
Друзья, тема не сложная, но если у вас будут вопросы или комментарии, то пишите в форме ниже под материалом. Не забывайте делиться материалом в социальных сетях. Удачного дня!