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

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

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

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

События HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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