Настройка целей и событий Google Analytics / Яндекс Метрики на сайте WordPress и др.

Как-то так получилось, что до недавнего времени я почти не сталкивался с внедрением событий(events) аналитики Гугла и Яндекса. Вчера разобрался с этим вопросом и решил зафиксировать для себя в блоге основные нюансы по теме + возможно, внести ясность для пользователей-новичков. В примере будет фигурировать популярная нынче WordPress CMS, но логика работы актуальная и для других решений. Вопрос создания целей/событий в текущей статье я не рассматриваю, только техническая часть работы (не исключено, что позже дополню пост).

Установка кода

Первым делом вам, конечно, нужно будет зарегистрироваться в данных сервисах аналитики. Там вы получаете код счетчика, который следует добавить на свой веб-проект. Ранее в другом блоге я уже публиковал статьи о том как установить Google Analytics на WordPress и про внедрение кода Яндекс Метрики на сайт, где рассмотрел интеграцию скриптов через хедер/футер или специальные плагины.

В принципе, вставлять HTML/JS-код напрямую можно в любой CMS, однако в Вордпресс разработчики советуют делать это через файл функций (functions.php). Вот как это выглядит:

function add_analytics_codes() { ?>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script>
...
</script>
 
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
...
</script>
<!-- /Yandex.Metrika counter -->
 
<?php }
add_action('wp_head', 'add_analytics_codes');

Здесь производится вставка содержимого функции add_analytics_codes в шапку сайта wp_head. Если вдруг захотите добавить код в футер, используйте значение wp_footer. Открывающего php-тега нет т.к. всю конструкцию вставлял в уже не пустой файл. Также не забудьте добавить реальные скрипты, в примере содержится лишь схема интеграции.

Создание целей и внедрение их на сайт

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

По целям/событиям можете почитать тут, в общем случае для них используется следующая конструкция (кстати, сейчас у Гугла уже новый gtag скрипт).

gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>
});

Здесь:

• 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”. Она вставляется в качестве атрибута тега А, например так:

<a onclick="gtag('event', 'click', { 'event_category': 'tel',}); yaCounter555555.reachGoal('telclick');" href="tel:+380676767667">Тел: +38(067)676-7667</a>

Как видите, тут у меня используется активная ссылка на номер телефона, о которой я писал ранее.

Форма обратной связи

Если нужно привязать событие к форме, то важно(!) сделать настройку так, чтобы достижение цели определялось не просто по нажатию на кнопку «Отправить», а фиксировалось непосредственно тогда, когда сообщение будет отправлено (в формах ведь иногда случаются ошибки с заполнением полей и т.п.).

Тут я нашел 2 решения.

1. В первом предлагается размещать срабатывание onclick в тег формы Form (НЕ на кнопку) + добавляется параметр return true дабы отслеживать исключительно успешные срабатывания.

<form id="myform" onsubmit="gtag('event', 'sendemail', { 'event_category': 'mail', 'event_action': 'send', });return true;">

2. Если же у вас установлен WordPress плагин Contact Form 7, то в современной его версии были введены специальные DOM-события, отвечающие за результаты работы формы:

• wpcf7invalid — неправильное заполнение, отправки нет;
• wpcf7spam — выявлен спам, отправки нет;
• wpcf7mailsent — все успешно и письмо отправлено на почту;
• wpcf7mailfailed — все заполнено и выслано, но возникла ошибка отправки на email.
• wpcf7submit — успешное завершение работы с формой независимо от других факторов.

Нам пригодится третий вариант. Соответствующий скрипт добавляется в шапку сайта – для Worpdress через все тот же файл функций.

function add_analytics_codes() { ?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
gtag('event', 'submit', { 'event_category': 'request',}); yaCounter555555.reachGoal('request');
}, false );
</script>
<?php }
add_action('wp_head', 'add_analytics_codes');

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

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function sendMail( event ){
 if ( 'ХХХХХХ' == event.detail.contactFormId ){
  gtag('event', 'send', {'event_category': 'formapopup', 'event_action': 'Submit'});
  yaCounter555555.reachGoal('formapopup');}
}, false );
</script>

Здесь ХХХХХХ – номер (ID) созданной в Вордпресс формы. Также вам следует заменить значение цели Яндекс.Метрики yaCounter555555 на свое. Если надо внедрить какой-то, отличающийся от моих примеров, код Гугло-аналитики, то просто вставляйте свои значения по тому же алгоритму, что показан в статье.

Возможно, дальше дополню текст скриншотами о процессе создания событий в Google Analytics и Яндекс Метрики, но пока будут только технические нюансы. Вопросы и дополнения по тексту пишем ниже.