События в Google Analytics. Часть II

Этот материал посвящен дополнительному разбору событий в Google Analytics и способам их отслеживания.

Наверняка вы помните статью в моем блоге и pdf-ке, в которой речь шла о событиях. Мы с вами разобрали структуру кода, терминологию, узнали про цели-события, про то, как можно визуализировать воронки событий с помощью виртуальных страниц, научились фиксировать события в зависимости от библиотеки Google Analytics. Все это закрепили на нескольких примерах отправки форм (onsubmit) и кликам (onclick) по кнопкам.

Именно onsubmit и onclick чаще всего используют веб-аналитики при отслеживании элементов на сайте. Однако в HTML существует большое количество других событий. Давайте разберем примеры того, как еще пользователи могут взаимодействовать с вашим сайтом.

События HTML

Примечание: в примерах будут использоваться конструкции для библиотеки analytics.js. Проверить все передаваемые события можно с помощью GA Debugger.

1. onsubmit — срабатывает при отправке формы. Событие обычно происходит, когда пользователь нажимает специальную кнопку Submit.

События в Google Analytics
Событие onsubmit

2. onclick — срабатывает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick. Событие может происходить по любому элементу – изображению, кнопке, ссылке и т.д.

Событие onclick

onclick в каком-то смысле является комбинацией событий onmousedown и onmouseup.

3. onmousedown – срабатывает в момент нажатия на любую кнопку мыши (левую, среднюю, правую) на каком-либо элементе. Принцип работы схож с событием onclick, но в отличие от него, продлится до момента отпускания кнопки мыши.

События в Google Analytics
Событие onmousedown

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

4. onmouseup — событие противоположно onmousedown. Срабатывает после щелчка по левой кнопке мыши, но только в момент ее отжатия. Запуск процесса возможен не в любой точке экрана. Его активация осуществима только в рамках области, заданной объектом, для которого это событие прописано.

События в Google Analytics
Событие onmouseup

5. onmousemove – срабатывает на любое перемещение указателя мыши по экрану или в рамках заданного элемента. С помощью этого события создаются дополнительные эффекты при работе мышью. Например, всплывающие подсказки, перетаскивание объектов и др.

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

  1. 10 миллионов обращений в месяц на ресурс;
  2. 200 000 обращений на пользователя в день;
  3. 500 обращений за сеанс.

Может быть такое, что при использовании события onmousemove будет превышен предел скорости отправки запросов и данные не поступят в Analytics.

События в Google Analytics
Событие onmousemove

Вы можете попробовать задать это событие и посмотреть, как оно работает. На примере выше onmousemove добавлен на кнопку, поэтому событие в GA будет отправляться всякий раз, когда вы будете водить мышкой внутри этого элемента. Если курсор мыши выйдет за область элемента, то событие срабатывать не будет и данные в Analytics не отправятся. Всего за 30 секунд я передал в GA больше 120 событий в качестве теста.

6. onmouseover — срабатывает при наведении курсора на элемент, к которому приписан атрибут onmouseover.

События в Google Analytics
Событие onmouseover

В данном примере событие с категорией trackMouseOver и действием test срабатывает всякий раз, когда курсор наводится на кнопку.

7. onmouseout — срабатывает, когда курсор мыши выходит за пределы элемента, к которому добавляется параметр onmouseout. Чаще всего на практике это событие используется в комплексе с onmouseover.

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

8. oncontextmenu – срабатывает при клике по элементу правой кнопкой мыши и вызывает контекстное меню.

События в Google Analytics
Событие oncontextmenu

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

9. onfocus – срабатывает при получении фокуса. К примеру, поле в форме после начала его заполнения получает фокус.

События в Google Analytics
Событие onfocus

В данном примере как только пользователь ставит курсор мыши в поле «Имя», срабатывает событие onfocus. Сам код данного поля выглядит следующим образом:

onfocus действует с точностью до наоборот событию onblur.

10. onblur – срабатывает тогда, когда идет переход фокуса от определенного элемента к другому. Сущность этого действия заключается в утере фокуса.

События в Google Analytics
Событие onblur

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

11. onchange – срабатывает при изменении состояния формы. К примеру, при вводе какого-либо текста в <input> — событие сработает после потери фокуса. Аналогично с тегом <textarea>: если задан onchange, то событие срабатывает каждый раз, когда введен новый текст и поле потеряло фокус.

События в Google Analytics
Событие onchange

В данном примере я ввел текст в поле с тегом <textarea> и снял с него фокус. Сработало событие. Пример кода элемента:

 12. onreset – срабатывает при очистке формы, происходящей при нажатии на кнопку Reset. Такая кнопка не обязательна и может отсутствовать в форме, а при ее использовании данные формы возвращаются в свое исходное значение.

События в Google Analytics
Событие onreset

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

13. onselect – применяется в текстовых полях формы (к тегам <input> и <textarea>), и включается при выделении текста с помощью мыши или клавиатуры.

События в Google Analytics
Событие onselect

Например, в поле <textarea> мы ввели текст и захотели полностью (или часть) его скопировать. Как только мы это сделаем, сработает событие.

14. ondblclick – срабатывает только по двойному щелчку мыши. Действие распространяется на объект, к которому прикреплен атрибут. Такой прием часто используется в текстовых редакторах. К примеру, при двойном щелчке выделяется все слово целиком.

События в Google Analytics
Событие ondblclick

Для владельца сайта может быть полезным отслеживание копирования скидки на сайте или какого-то определенного текста. В данном примере событие срабатывает при двойном щелчке на SKIDKA10, но не сработает, если мы скопируем что-либо другое, так как ondblclick добавлен только на этот элемент:

15. onunload – срабатывает в том случае, если страница не прогрузилась или в момент клика на кнопку закрытия браузера.

События в Google Analytics
Событие onunload

Как правило, вешается на тег <body>

16. onload – срабатывает после полной загрузки страницы, включая все ее содержимое — картинки, текст, скрипты и прочее. Вешается на тег <body>

На все эти события можно создать цель-событие и отслеживать в Google Analytics как обычные конверсии.

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

Однако есть большое количество других не менее полезных атрибутов, которые можно использовать при решении практических задач и которые не были разобраны в данной публикации. А с появлением HTML5 их количество существенно возросло. Еще они делятся на категории: события по формам, клавиатуре, мыши, окнам, медиа и т.д. Подробнее о глобальных атрибутах событий можете узнать на w3schools.com или на htmlbook.ru.

Понравилась статья? Подписывайтесь на социальные сети:

Остались вопросы? Задай их на Кубик.Ком

Yakov Osipenkov | 03.10.2018

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Бесплатные уроки по контекстной

рекламе и веб-аналитике!

Решаем задачи

Общаемся

Делимся

Спасибо за подписку!