Интеграция с Google Analytics и Яндекс.Метрикой

Модуль статистики позволяет упростить передачу данных в системы сбора статистики посещений и анализа поведения посетителей сайта — Google Analytics и Яндекс.Метрику (далее — «системы сбора статистики»):

• добавляет код счётчиков на все страницы сайта без необходимости внесения изменений в макет дизайна;
• унифицирует работу с разными системами сбора статистики и разными версиями скриптов систем сбора статистики, и тем самым убирает необходимость написания отдельного кода отправки событий для каждой из них;
• предоставляет JavaScript-функцию для одновременной отправки событий во все системы сбора статистики;
• позволяет автоматически передавать события нажатия и просмотра элементов страницы, отправки форм без необходимости программирования (путём добавления декларативной разметки)
• автоматически (без необходимости каких-либо изменений в макетах, шаблонах компонентов) отправляет данные о событиях электронной коммерции (добавление и удаление товара из корзины, просмотры страниц товаров, создание заказа);
• позволяет отправлять события взаимодействия с формами модуля «Заявки» (открытие форм, отправка) без необходимости добавления кода или разметки.

Интеграция с системами сбора статистики доступна с версии Netcat 5.7, отправка событий электронной коммерции — с версии 5.9.

Функции модуля для отправки событий недоступны в Internet Explorer версии 8 и младше.

Как работает отправка событий через модуль статистики

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

Модуль отправляет события сразу во все подключённые системы сбора статистики (Google Analytics и Яндекс.Метрику).

В именах стандартных событий, параметрах этих событий используются соглашения, принятые для скрипта Google Analytics gtag.js. При отправке данных о событиях с использованием других скриптов Google Analytics (gtm.js, analytics.js, ga.js) и в Яндекс.Метрику сведения о событиях приводятся к необходимому виду.

События взаимодействия с элементами страницы

У каждого события взаимодействия могут быть заданы действие (action), категория (category) и ярлык (label).

Категории и ярлыки позволяют объединить события по логически связанным типам событий или элементам страниц сайта. Подробные рекомендации по категориям и ярлыкам есть в документации Google Analytics.

• Категория события является обязательным параметром и определяет, как будет зарегистрировано событие:
  • в Google Analytics — категория события
  • в Яндекс.Метрике — префикс идентификатора цели (идентификатор цели будет иметь вид категория_действие, например для отправки формы с категорией «feedback»: feedback_submit
  При использовании декларативной разметки событие будет отправлено только если указана категория (атрибут data-analytics-*-category).
  При отправке события через JavaScript в случае, когда у события взаимодействия не задана категория, по умолчанию будет установлена категория «event».
• Действие описывает тип взаимодействия посетителя сайта с элементом страницы.
  Ряд действий модуль статистики рассматривает как стандартные:
  • нажатие на элемент (click);
  • просмотр элемента (view) — срабатывает, когда на экране показывается более 70% элемента по высоте и ширине;
  • отправка формы (submit).
  Через JavaScript-функцию можно отправлять события с любым действием; через декларативную разметку — только для стандартных действий (click, view, submit).
  В Яндекс.Метрику действие будет передано в составе идентификатора цели (см. пример для категории).
• Ярлык позволяет добавить дополнительную разбивку результатов при анализе собранных данных.
  В Яндекс.Метрику ярлык будет передано как дополнительный параметр “event_label”.
  Дополнительные параметры можно использовать в Яндекс.Метрике для сегментации отчётов по параметрам визитов и в отчёте «параметры визитов».

Отправка событий

Существует несколько способов указать, когда надо отправить то или иное событие:

• Декларативная разметка. В код страницы могут быть добавлены атрибуты data-analytics-* для стандартных действий (click, view, submit). Событие будет отправлено после соответствующего взаимодействия посетителя сайта с элементом, у которого указаны эти data-атрибуты.
• Вызов JavaScript-функции позволяет отправить произвольное событие в любой момент.
• Параметры событий взаимодействия с формами модуля «Заявки» (например, на страницах, созданных при помощи лендинг-конструктора) настраиваются в диалогах, доступных в режиме редактирования соответствующих страниц сайта.

События электронной коммерции

Передача событий электронной коммерции поддерживается для Яндекс.Метрики, Google Analytics (gtag.js, analytics.js) и Google Tag Manager.

Яндекс.Метрика позволяет фиксировать только основные события электронной коммерции (просмотр страницы товара, работа с корзиной, оформление заказа). Передача данных должна быть настроена через dataLayer.

Для Google Tag Manager Data Layer должен иметь имя dataLayer.

Для Google Analytics (analytics.js) должен быть включен плагин «Расширенная электронная торговля» (“ec”). Плагин «Электронная торговля» (“ecommerce”) не поддерживается.

Для старой версии Google Analytics (ga.js) передача событий электронной коммерции не поддерживается; для регистрации этих событий обновите код счётчика до analytics.js.

В текущей версии автоматическая отправка события “refund” при полном или частичном возврате заказа не поддерживается.

Отправка событий электронной коммерции

• При включённой регистрации событий электронной коммерции в настройках модуля основные события электронной коммерции отправляются автоматически и не требуют добавления на страницы сайта какого-либо кода:
  • просмотр страницы товара;
  • изменение количества товаров в корзине;
  • оформление заказа.
• Отправляются при наличии data-атрибутов в разметке страницы:
  • показ товаров в списке;
  • нажатие на ссылку в блоке товара в списке;
  • показ внутренней рекламы;
  • нажатие на ссылку в блоке внутренней рекламы.
• Все события также могут быть отправлены из JavaScript.
  Отслеживание шагов оформления заказа (checkout) возможно только через JavaScript.

Соответствие типов событий электронной коммерции

Настройки интеграции с Google Analytics и Яндекс.Метрикой

Параметры интеграции с системами сбора статистики задаются на вкладке «Аналитика и Метрика» в настройках модуля «Статистика посещений». Параметры настраиваются отдельно для каждого из сайтов.

• Если чекбокс «Добавлять на страницы сайта код Яндекс.Метрики и Google Analytics и код для интеграции Netсat с ними» не отмечен, описанные на данной странице возможности модуля будут недоступны.
• Чекбокс «Включить регистрацию событий электронной коммерции» управляет автоматической отправкой событий электронной коммерции (добавление и удаление товара из корзины, просмотры страниц товаров, создание заказа).
• Параметр «Место вставки кода счётчиков» позволяет управлять приоритетом готовности к передаче событий над скоростью отрисовки страницы:
  • вставка кода вверху <body> позволяет начать сбор и передачу событий статистики как можно скорее, не дожидаясь полной загрузки содержимого страницы;
  • вставка кода внизу <body> может ускорить отрисовку страницы при её загрузке.
• В поля для кода счётчиков Google и Яндекс необходимо скопировать код, который предоставляют соответствующие системы.
  Должен быть задан код по крайней мере для одной из систем сбора статистики, иначе описанные на данной странице возможности будут недоступны.
  Описание настройки и получения кода для вставки для каждой из систем сбора статистики приведено ниже.

Подключение систем сбора статистики

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

Если на страницах сайта (в макете сайта) уже добавлен JavaScript-код, содержащий идентификаторы счётчиков Яндекс.Метрики или Google Analytics, будут использоваться уже имеющиеся на странице скрипты и их настройки, то есть код не будет добавляться на страницы повторно.

Если в макете сайта счётчики не вставлены, они будут добавлены в указанное в настройках модуля место (в начале или в конце тэга <body>).

Яндекс.Метрика

Добавьте в Яндекс.Метрику новый счётчик или выберите существующий, а затем получите и скопируйте HTML-код счётчика в поле «Код счётчика Яндекс.Метрики» в настройках модуля.

В настоящее время модуль не поддерживает интеграцию с Яндекс.Метрикой, подключённой с использованием нового API (скрипт tag.js). В настройках модуля (или в макете дизайна) необходимо добавить скрипт watch.js; для получения кода счётчика на сайте Яндекс.Метрики выберите в настройках опцию «Устаревший код счётчика».

Для событий взаимодействия (просмотр — view, нажатие на элемент — click, отправка формы — submit) идентификатор цели составляется из категории и действия, разделённых символом подчёркивания. Например, при нажатии на ссылку с атрибутами:

<a href="/contacts/" data-analytics-click-category="contacts_link">Контакты</a>

идентификатор цели Яндекс.Метрики будет равен contacts_link_click.

Для фиксирования событий взаимодействия необходимо создать в настройках Яндекс.Метрики цели типа «JavaScript-событие» (или составные цели с шагами «Событие» с соответствующим идентификатором).

Если вы хотите отслеживать события электронной коммерции, на странице получения кода счётчика выберите пункт «Отправка в Метрику данных электронной коммерции» и имя контейнера данных “dataLayer”.

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

Google Analytics

Для подключения Google Tag Manager добавьте код со страницы «Администрирование / Установить Диспетчер тегов Google» из всех полей (для <head> и для <body>) в поле «Код отслеживания Google Universal Analytics или Google Tag Manager» в настройках модуля.

Модуль поддерживает работу с Google Analytics через подключение скриптов gtag.js, analytics.js, Google Tag Manager; также поддерживается использование устаревшего скрипта статистики ga.js (кроме отслеживания событий электронной коммерции).

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

При любом подключении сбора статистики для передачи событий электронной коммерции в настройках Google Analytics (меню «Администратор / Аккаунт / Ресурс / Представление / Настройки электронной торговли») должно быть включено отслеживание электронной торговли и отчёты для расширенной электронной торговли.

Обратите внимание, что обработка событий электронной коммерции в Google Analytics может занимать до двух суток.

Google Tag Manager (Диспетчер тегов Google)

При использовании Google Tag Manager переменная контейнера данных должна называться dataLayer.

Для передачи событий в аналитику через Google Tag Manager:

1. Нужно добавить пользовательские переменные уровня данных (версия уровня данных 2):
   • event_category
   • event_action
   • event_label
2. Должен быть настроен тег:
   • Продукт: Google Analytics
   • Тип тега: Universal Analytics
   • Настройка тега:
     • необходимо указать идентификатор отслеживания Google Analytics
     • тип отслеживания: событие
     • категория: {{event_category}}
     • действие: {{event_action}}
     • ярлык: {{event_label}}
     • если вы хотите отслеживать события электронной коммерции, в разделе «Дополнительные настройки / Электронная торговля» надо выбрать значение true для параметра «Включить расширенные функции электронной торговли» и отметить чекбокс «Использовать уровень данных»
   • Условия активации: новый триггер
     • название: например, Analytics Event
     • событие: пользовательское событие
     • имя события: event_ — регулярное выражение (события передаются со свойством “event”, равным “event_ДЕЙСТВИЕ”)

Необходимые условия для передачи событий электронной коммерции через Диспетчер тегов Google:

1. в настройках привязанного аккаунта Analytics должны быть включены отслеживание таких событий и отчёты для расширенной электронной торговли;
2. в настройках тега Universal Analytics включены расширенные функции электронной торговли, выбрано использование уровня данных;
3. у тега Universal Analytics задан триггер-событие (имя события — регулярное выражение event_.*).

gtag.js

Код для подключения счётчика можно получить на странице «Администратор / Ресурс / Отслеживание / Код отслеживания» в панели управления Google Analytics.

Функция отслеживания должна иметь стандартное имя (gtag).

analytics.js

Для добавления скрипта analytics.js необходимо вставить соответствующий код в поле «Код отслеживания Google Universal Analytics или Google Tag Manager» и заменить в нём UA-XXXXX-Y на идентификатор отслеживания со страницы «Код отслеживания» настроек ресурса в Google Analytics.

Если вы хотите отслеживать события электронной коммерции в Google Analytics, включите отслеживание электронной торговли и отчёты для расширенной электронной торговли в настройках представления и добавьте в код отслеживания в настройках модуля подключение плагина “Extended Ecommerce” (плагин «Электронная торговля» “ecommerce” не поддерживается):

<script>
// ··· (здесь код для подключения Google Analytics) ···
ga('require', 'ec');
</script>

ga.js

Скрипт ga.js является устаревшим; Google рекомендует заменить его на современную версию (gtag.js). Netcat отправляет события взаимодействия через данный скрипт, но отправка событий электронной коммерции через устаревший скрипт не поддерживается.

Способы отправки событий

Использование разметки для отправки событий

Если у тегов на странице есть определённые атрибуты data-analytics, при взаимодействии посетителей сайта с ними будут автоматически отправлены события в системы сбора статистики:

• события взаимодействия с элементами страницы:
  • нажатие на элемент (атрибуты data-analytics-click-category, data-analytics-click-label) — событие с действием click и указанными в этих атрибутах категорией и ярлыком;
  • просмотр элемента — срабатывает, если на экране показано минимум 70% элемента по высоте и ширине (атрибуты data-analytics-view-category, data-analytics-view-label), элемент должен иметь ненулевую высоту — событие с действием view;
  • отправка формы (атрибуты data-analytics-submit-category, data-analytics-submit-label у тега <form>) — событие с действием submit;
  • атрибут data-analytics-*-action позволяет переопределить стандартное действие (click, view, submit), отправляемое в системы сбора статистики.
• события электронной коммерции:
  • просмотр товаров в списках товаров, нажатие ссылку в блоке товара в списке (data-analytics-item) — события view_item, select_content;
  • просмотр товаров в списках товаров, нажатие ссылку в блоке товара в списке (data-analytics-promo) — события view_promotion, select_content.

События взаимодействия с элементами

Для отправки событий click, view, submit на основании разметки страницы у соответствующих элементов должен присутствовать атрибут data-analytics-ДЕЙСТВИЕ-category. Если такого атрибута нет, событие отправлено не будет.

При отправке событий по data-атрибутам может быть указано несколько категорий и ярлыков через запятую, при этом будут отправлены события со всеми сочетаниями категорий и ярлыков, например:

<form data-analytics-submit-category="form, feedback"
      data-analytics-submit-label="landing, landing_header">

'submit', {
    event_category: 'form',
    event_label: 'landing'
}

'submit', {
    event_category: 'form',
    event_label: 'landing_header'
}

'submit', {
    event_category: 'feedback',
    event_label: 'landing'
}

'submit', {
    event_category: 'feedback',
    event_label: 'landing_header'
}

'form_submit', {
    event_label: 'landing'
}

'form_submit', {
    event_label: 'landing_header'
}

'feedback_submit', {
    event_label: 'landing'
}

'feedback_submit', {
    event_label: 'landing_header'
}

События электронной коммерции

Если у элемента в атрибуте data-analytics-item указаны свойства товара, для него сработают события просмотра в списке, а нажатия на ссылки внутри данного элемента будут расценены как переход к странице товара.

Информация о товаре должна быть задана в виде JSON-строки, которая соответствует объекту с описанием свойств товара в формате Google Analytics (gtag.js).

Для облегчения формирования такого атрибута используйте метод nc_stats_analytics::get_item_attribute().

Аналогично можно отслеживать показы внутренней рекламы (атрибут data-analytics-promo).

Отслеживание просмотров и переходов по спискам товаров и внутренней рекламы поддерживается только в Google Analytics.

Отправка событий из JavaScript

Для отправки событий из JavaScript можно использовать функцию nc_stats_analytics_event(event_name, event_data).

Аргументы функции nc_stats_analytics_event():

• event_name — название события (также соответствует категории события), обязательный аргумент;
• event_data — объект с параметрами события.

Формат значений для этой функции совпадает с аргументами для функции gtag() Google Analytics.

При использовании gtag.js данные будут отправлены в том виде, как они переданы. Для других способов передачи в Google Analytics и для Яндекс.Метрики данные будут приведены к формату, подходящему для них:

• Google Tag Manager — передаются все сведения о событии.
  События передаются со свойством event = event_НазваниеСобытия.
  События электронной коммерции передаются в соответствующем формате, а для прочих событий передаются все параметры из event_data в неизменном виде (и их можно соответствующим образом использовать в свойствах тега Universal Analytics).
• analytics.js — будут переданы все сведения о событии в формате, подходящем для функции ga().
  Если в event_data не задана категория события (event_category) и это не событие электронной коммерции, категория будет равна “event”.
• ga.js — все события передаются как простые события взаимодействия.
  Если категория события не задана, она будет равна будет равна “event”.
  Передача событий электронной коммерции через ga.js не поддерживается.
• Яндекс.Метрика — цель события будет равна КатегорияСобытия_НазваниеСобытия (если категория не задана, она будет равна будет равна “event”); все параметры из event_data будут переданы как дополнительные параметры. Дополнительные параметры можно использовать в Яндекс.Метрике для сегментации отчётов по параметрам визитов и в отчёте «параметры визитов».

Пример: отправка события нажатия на кнопку

    nc_stats_analytics_event('click', { event_category: 'обратный_звонок', event_label: 'из_хедера' });

Будет отправлено событие:

• в Google Analytics — с категорией «обратный_звонок», действием «click», ярлыком «из_хедера»;
• в Яндекс.Метрику — с целью «обратный_звонок_click», дополнительными параметрами:

  event_category = обратный_звонок
  event_action = click
  event_label = из_хедера
      

Пример: отправка события электронной торговли

    nc_stats_analytics_event('begin_checkout', {
        items: [
            { name: 'Товар 1', quantity: 1, price: '200.00' },
            { name: 'Товар 2', quantity: 2, price: '500.00' }
        ]
    });

Будет отправлено событие:

• в Google Analytics — оформление заказа;
• Яндекс.Метрика такие события электронной коммерции не поддерживает, это событие в неё отправлено не будет.

Вспомогательные методы для шаблонов (PHP)

nc_stats_analytics::get_item_attribute(nc_netshop_item $item, $list_name = null, $list_position = null)

Формирует атрибут data-analytics-item с его значением для указанного товара. Аргументы:

• $item — товар (nc_netshop_item), для которого генерируется атрибут;
• $list_name — название списка (например, «Рекомендуемые»), опционально;
• $list_position — положение товара в списке, опционально.

Если отслеживание электронной коммерции отключено в настройках модуля, метод вернёт пустую строку.

Пример:

<div <?= nc_module_check_by_keyword('stats')
            ? nc_stats_analytics::get_item_attribute($item, 'Каталог', $curPos + $f_RowNum + 1)
            : '' ?>>
    --- ТОВАР ---
</div>

nc_stats_analytics::get_promo_attribute(array $promo)

Формирует атрибут data-analytics-promo с его значением для указанной внутренней рекламы. Аргументы функции — массив, в котором указаны свойства рекламы в формате, как для функции Google Analytics gtag().

Пример:

<div <?= nc_module_check_by_keyword('stats')
            ? nc_stats_analytics::get_promo_attribute(array(
                'name' => 'Название рекламной кампании',
                'creative_name' => 'Название баннера или объявления',
                'creative_slot' => 'Область страницы, порядковый номер баннера',
              ))
            : '' ?>>
    --- БАННЕР ---
</div>

Отправка событий для форм модуля «Заявки»

В настройках форм создания заявок (например, на страницах, созданных через лендинг-конструктор) можно указать события при открытии и отправке форм. Эти параметры действуют аналогично добавлению data-атрибутов.

Отладка

Для вывода в консоль браузера параметров вызова функций отправки статистики и некоторой другой информации о работе функции nc_stats_analytics_event() необходимо установить cookie с именем “nc_stats_debug” и непустым значением, и перезагрузить страницу.

Например, такую cookie можно установить в консоли браузера:

document.cookie = 'nc_stats_debug=1; path=/';