Как-то так получилось, что до недавнего времени я почти не сталкивался с внедрением событий(events) аналитики Гугла и Яндекса. Вчера разобрался с этим вопросом и решил зафиксировать для себя в блоге основные нюансы по теме + возможно, внести ясность для пользователей-новичков. В примере будет фигурировать популярная нынче WordPress CMS, но логика работы актуальная и для других решений. Вопрос создания целей/событий в текущей статье я не рассматриваю, только техническая часть работы (не исключено, что позже дополню пост).
Установка кода
Первым делом вам, конечно, нужно будет зарегистрироваться в данных сервисах аналитики. Там вы получаете код счетчика, который следует добавить на свой веб-проект. Ранее в другом блоге я уже публиковал статьи о том как установить Google Analytics на WordPress и про внедрение кода Яндекс Метрики на сайт, где рассмотрел интеграцию скриптов через хедер/футер или специальные плагины.
В принципе, вставлять HTML/JS-код напрямую можно в любой CMS, однако в Вордпресс разработчики советуют делать это через файл функций (functions.php). Вот как это выглядит:
function add_analytics_codes() { ?>
Здесь производится вставка содержимого функции add_analytics_codes в шапку сайта wp_head. Если вдруг захотите добавить код в футер, используйте значение wp_footer. Открывающего php-тега нет т.к. всю конструкцию вставлял в уже не пустой файл. Также не забудьте добавить реальные скрипты, в примере содержится лишь схема интеграции.
Создание целей и внедрение их на сайт
Дальше вам нужно создать и настроить цели. Зачастую они прикрепляются к определенным событиям на страничках сайта, отвечающим за конверсию: отправку заявки через форму, клик по определенной кнопке, по ссылке email и т.п.
По целям/событиям можете почитать тут, в общем случае для них используется следующая конструкция (кстати, сейчас у Гугла уже новый gtag скрипт).
gtag('event', , {
'event_category': ,
'event_label':
Здесь:
- action – определяет целевое действие (click, submit).
- label – метка/ярлык события.
- category – его категория.
- value – ценность события (положительное число).
Например, мне для вставки целей прислали такие значения:
gtag('event', 'submit', { 'event_category': 'request',});
gtag('event', 'click', { 'event_category': 'tel',});
Для Яндекс.Метрики почитать про аналогичную функцию можно тут. Принцип работы такой же, просто используется слегка измененная конструкция:
ym(XXXXXX, 'reachGoal', target[, params[, callback[, ctx]]]);
Добавление целей для кнопок/ссылок в HTML
Чтобы добавить реакцию на то или иное действие пользователя нужно использовать функцию javascript под названием “onclick”. Она вставляется в качестве атрибута тега А, например так:
Тел: +38(067)676-7667
Как видите, тут у меня используется активная ссылка на номер телефона, о которой я писал ранее.
Форма обратной связи
Если нужно привязать событие к форме, то важно(!) сделать настройку так, чтобы достижение цели определялось не просто по нажатию на кнопку "Отправить", а фиксировалось непосредственно тогда, когда сообщение будет отправлено (в формах ведь иногда случаются ошибки с заполнением полей и т.п.).
Тут я нашел 2 решения.
1. В первом предлагается размещать срабатывание onclick в тег формы Form (НЕ на кнопку) + добавляется параметр return true дабы отслеживать исключительно успешные срабатывания.