---
tags: WordPress, SEO
---

# WordPress - Yandex.Metrica + Google Analytics + Google Tag manager (GTM)

- [Yandex Метрика - Справка](https://yandex.ru/support/metrica/index.html)

## Подключение к WordPress
* https://www.youtube.com/watch?v=EZnRnwcn2PU

**Требуется:**
- плагин Code Snippets Extended для WordPress
- Аккаунты в Яндекс и Google

### **metrika.yandex.ru:**
- добавить счетчик
- задаем имя счетчика
- адрес сайта
- [x]принимать данные с указанных адресов - нужно чтобы уменьшить погрешности
- часовой пояс
- валюта - необходима для отчетов по Яндекс.Директ
- таймаут визита - время бездействия, после которого визит считается завершенным
- настрока счетчика
- [х]асинхронный код
- [x]вебвизор, карта скролинга, аналитика форм - производится запись того что делает пользователь на сайте
> **ВАЖНО:** Вебвизор - эта опция полезная, но она замедляет загрузку страниц
- копируем код счетчика
- идем в сниппеты ***от плагина Code Snippets Extended***
- Добавить сниппет - задаем название
- вставляем код счетчика
- **настраиваем хуки автозапуска**
- Если располагать ближе к началу страницы - то загрузка сайта будет притормаживать из-за кода счетчика
- "после футтера" - лучше установить **Если сайт многостраничный** (короткие страницы, мало графики)
- "в области head" - устанавливаем **Если Лэндинг** (длинная страница с больших количеством графики) пока будет грузиться страница пользователь успеет покинуть сайт и неправильно будет считаться показатель отказов
- Нажимаем "Сохранить" - метрика применится ко всем страницам сайта.
> **ВАЖНО:** Если на сайте используется кеширование и оптимизация скриптов необходимо удалить все кэши.

### **www.google.com/analytics**
- входим в аккаунт
- создаем ресурс (на одном аккаунте может быть несколько ресурсов)
- создаем аккаунт гугл аналитикс
- настраиваем, задаем имя, часовой пояс
- отключаем доступ Гугл к нашей аналитике
- Получаем идентификатор отслеживания
- копируем код отслеживания
- идем в сниппеты ***от плагина Code Snippets Extended***
- Добавить сниппет - задаем название
- вставляем код отслеживания
- Хук автозапуска: в области HEAD (рекомендовано Google), но можно руководствовать теми же рекомендациями как для Яндекса

### Contact Form 7 + Google Analytics
https://contactform7.com/tracking-form-submissions-with-google-analytics/
Использовать рекомендации от сюда, если Google Analytics не работает для форм CF7.

Нужно будет изменить код отслеживания (скопипастить из статьи). После этого код отслеживания целей форм CF7 будет работать нормально.

# Contact Form 7 + Настройка Целей Google Analytics и Яндекс Метрики
* https://www.youtube.com/watch?v=HRI4Pq8TeWw
* https://wplovers.pw/tseli-contact-form-7/
* https://contactform7.com/tracking-form-submissions-with-google-analytics/
* [Яндекс.Метрика - Почему цели не работают](https://yandex.ru/support/metrika/general/check-goal.html)

## Google Analytics - настройка достижения целей
Достижение цели - это момент, когда пользователь совершил целевое действие на сайте\лендинге (например отправил заяваку, контакты, зарегался)

- создаем цель
- Шестеренка > Управление > Цели
- + Цель
- (х) Собственная > Далее
- Описание цели (рекомендуется называть цель также как форма на сайте)
- Тип = Событие > Далее
- Подробные сведения о цели - Категория и Действие следует указывать такое же как в скрипте отслеживания
- Сохранить

## Yandex.Metrika - настройка целей
- У созданного ранее счетчика есть Настройки
- В настройках есть раздел Цели
- Добавить Цель
- Задаем имя цели (рекомендуется называть цель также как форма на сайте)
- JavaScript-событие (задаем такое же как в аргументах в коде) 

## Настройка Кодснипета
Используем плагин Code Snippets Extended для WordPress
Запускать в области HEAD.
> **ВАЖНО:** Незабыть указать правильный идентификатор для счетчика Yandex.
> При использовании кэширования и оптимизации скриптов необходимо удалить кэши.

## Тестирование
Рекомендуется проводить тестирование в режиме **Инкогнито.**
Статистика на гугле или Яндексе может обновиться не сразу (может пройти до суток)

# WordPress + Google Tag Manager (GTM - диспетчер тэгов)
Отслеживание целей в WordPress через Google Tag Manager. Analytics, Метрика, Facebook, ВКонтакте
* https://www.youtube.com/watch?v=YBrWZQ3j804
* https://wplovers.pw/wordpress-konversii-gtm/

**Инструменты:**
- гугл хром, так как он корректно отображает предпросмотр.
- Tag Assistant (by Google) - расширение для Хрома
- Facebook Pixel Helper - расширение для Хрома
- плагин для вставки кода (например [Woody ad Snippets](https://wplovers.pw/r/woody/))
- зарегистрироваться в tagmanager.google.com

**Google Tag Manager (GTM)** - это контейнер. В него можно поместить любой код и настроить задания для его выполнения. Например код для Я.Метрики, ГуглАналитики, пикселей FB и VK... Любой внешний сервис можно подключить через GTM. (Метафора: сесть в проходном месте и подсматривать за всеми людьми).

> **ВАЖНО!:** При использовании GTM Необходимо удалить все коды отслеживания, которые были добавлены ранее через сниппеты, и заново добавить их через GTM. Потому иначе одинаковые коды отслеживания будут мешать друг другу.

## Необходим план действий
Размечаем цели:

**Идентификаторы целей метрики** - этими ид помечаются данные, которые GTM будет отправлять в разные системы.

## Настройка GTM
- зарегистрироваться в tagmanager.google.com
- создать аккаунт GTM (рекомендуется 1 аккаунт на 1 проект)
- Задать имя и страну
- Скопировать код контейнера диспетчера тегов для HEAD и BODY (ВНИМАНИЕ: там будет сгенерирован ID контейнера)
- вставить с помощью WordPress плагина для сниппетов в соответствующие места

**Настройка переменных**
Типы переменных:
- встроенные
- пользовательские
- настройки гугл Аналитикс - нужно скопировать идентификатор GA

**Триггеры** - условие для выполнения какого-то действия

**Тэги** - это то самое действие, которое будем выполнять
- задаем тип отслеживания (например просмотр страницы, событие)
- Необходимо выбрать триггер для отправки данных

## Подключение Яндекс.Метрики
- Копируем код счетчика Яндекс.Метрики
- Создаем тэг в GTM
- Выбираем тип "Пользовательский HTML"
- вставляем код счетчика
- триггеры активации = All Pages
- Нажимаем кнопку "Отправить" - создастся новая ревизия в контроле версий настроек.
- Задаем имя версии и описание
- Нажимаем "Опубликовать"
> это необходимо, чтобы Яндекс.Метрика увидела что у нас произошло. До этого мы делали все в экосистеме Google (Хром, Google Analytics, GTM), и по этому не требовалось специального пинга как сейчас с яндексом.
- Переходим в дашборды Яндекс.Метрику
- жмем "Начать пользоваться" счетчиком
- ждем когда позеденеет иконка (кликаем иконку, чтоб Я.метрика нашла счетчик)
 => 
- Создаем тег для отправки в Я.метрику
- тип = польлзовательский HTML
- вставляем код отправки данных 
- XXXXX - идентификатор счетчика
- TARGET_NAME - это идентификатор из последней колонки в эксельке с параметрами от слеживания 

**Проверка работоспособности**
- открыть сайт с добавлением параметра к URL 
- в консоли разработчика можно увидеть как отрабатывают события

## Подключение пикселя FB
- В рекламном аккаунте Facebook > Измерения и отчетность > Events Manager
- Источники данных > Пиксели Facebook
- кликаем "Начать"
- задаем имя пикселя
- "продолжить"
- ДОбавление с помощью Партнерских интеграций > Выберите партнера > Google Tag manager - произойдет автоматическая настройка
- ... или Добавление пикселя на сайт вручную
- копируем код пикселя
- переходим в Диспетчер GTM
- создаем новый тэг - задаем имя, например "Пиксель FB"
- Тип тэга = пользовательский HTML
- вставляем скопированный ранее код пикселя
- **ВАЖНО!!!:** переходим в расширенные настройки
- Настраиваем активацию тэга: Один раз на страницу
- Триггеры активации: All Pages
- Нажимаем "Отправить" - как и для Яндекс.Метрики, по тем же причинам
- Нажимаем "Опубликовать"

**Проверка работоспособности пикселя**
- Переходим на наш сайт и копируем адрес сраницы, куда добавлен пиксель.
- Переходим в FB > Установка пикселя (там где копировали код пикселя)
- в секции "Тестировать базовый код" вставляем адрес страницы
- нажимаем "отправить тестовый трафик"

С помощью расширения для хрома "Facebook Pixel Helper":
- перезагружаем страницу
- расширение покажет что найден пиксель и событие Page view

## Отправка события в FB
- в GTM создаем тэг на отправку событий
- конфигурация тэга: Пользовательский HTML
- вставляем код отправки кастомного события
- задать ID события - это идентификатор из последней колонки в эксельке с параметрами от слеживания 
> **ВАЖНО!!!:** в расширенных настройках задать:
> - Настройки Активации Тега = Один раз на событие
> - Порядок активации тэгов: перед активацией нашего тэга должен загрузиться тег "Пиксель FB" c кодом пикселя
> 
- Нажимаем "отправить" и "опубликовать"

**Проверка работоспособности**
- ПЕрезагружаем страницу на сайте
- кликаем на ссылку
- "Facebook Pixel Helper" покажет что зарегано событие клика по ссылке
- через некоторое время это событие появится в статистике FB > Events Manager > Обзор

## Подключение пикселя VK
- Заходим в личный кабинет VK, Таргетинг > Ретаргетинг
- Создать пиксель.
- Задаем Название пикселя, домен, тематику сайта,
- "Создать"
- Копируем код пикселя
- Идем в GTM
- создаем тэг
- тип = Пользовательский HTML
- вставляем код пикселя
- в расширенных настройках: один раз на страницу
- триггеры: All Pages
- отправить, опубликовать

## Отправка события в VK
Tут есть отличие от настроек FB.
- FB-пиксель отслеживает трафик на страницу и события.
- VK-пиксель отслеживает только трафик на сайт и может создавать аудитории по трафику.

Чтобы отслеживать события в VK нужно подключить JS API Вконтакте.
Этот код необзодимо добавить в тэг GTM:

<div id="vk_api_transport"></div>
<script>
  var pixel;
  window.vkAsyncInit = function() {
    pixel = new VK.Pixel('VK-XXXX-XXXXX-XXXXXXX');
  };
  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "https://vk.com/js/api/openapi.js?159";
    el.async = true;
    document.getElementById("vk_api_transport").appendChild(el);
  }, 0);
</script>

> VK-XXXX-XXXXX-XXXXXXX — это уникальный код пикселя ретаргетинга. Его можно взять в окне редактирования пикселя в личном кабинете VK.

> Порядок активации: после тэга VK пикселя. Триггер: All Pages.

Код для тэга отправки события в VK:

<script> 
    VK.Retargeting.Event('ID события'); // из эксельки 
</script>

**Проверка работоспособности**
Только в консоли девелопера браузера (Shift+F12) > Network. Можно посмотреть что отправляется во время срабатывания события по тегам.

## Создание конверсий
**Статистика по конверсии** - статистика по выполнению целевого действия.

### Google
добавляем Цель. После этого в Отчеты в реальном времени > Конверсии появится статистика

### Yandex
добавляем Цель. Можно добавить составные цели - фишка яндекса.

### FB
Идем в источники данных.
- Создать конверсию. Выбираем событие. Называем. Выбираем категорию. Можно задать ценность конверсии.
Идем опять в источники данных.
- создаем аудиторию = Пользовательская аудитория.
- вместов "вСе посетители сайта" выберем наше событие.

### VK
Конверсий нет. Есть только аудитории.

# Эффективное использование GTM

## Автоматическая отправка событий во все системы

Удаляем все теги на отправку событий для ля FB, VK, YaMetrika.
Оставляем только теги для подключения пкселей, GA, YaMetrika и отправку событий для GA.

Data Layer - это буфер, которые выполняет определенные запрограммированные операции, и их результат отправляет в GTM

GTM > Пользовательские переменные > Создать:
- называем переменную customTask (имя важно, иначе не заработает)
- Конфигурация переменной > Собственный код JavaScript

function () {
  return function(tracker) {
    var originalSendHitTask = tracker.get('sendHitTask');
    tracker.set('sendHitTask', function(model) {
      originalSendHitTask(model);
      var hitPayload = model.get('hitPayload'); // получаем все улетающие параметры в виде строки
      console.log(hitPayload); // выведем в консоли, чтобы посмотреть какой формат
      var GaEventVars = {}; // все параметры из строки закинем в объект
      hitPayload.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
          GaEventVars[decodeURIComponent(key)] = decodeURIComponent(value);
      }); 
      // и этот объект передадим в DataLayer в переменную 'GaEventParams' и создадим gtm-событие GaEvent
      window.dataLayer.push({'event':'GaEvent', 'GaEventParams': GaEventVars});
      
    });
  }
}

- подключаем customTask к счетчику Google Analytics
- ...настраиваем все необхордимые пользовательские переменные уровня данных...
- создаем триггер для отправки во все необходимые системы\сервисы

> **Проблема** - необходимо отфильтровать клики по ссылкам на внешние ресурсы

## Как отфильтровать себя в GTM
**Зачем это делать:** чтобы не портить статистику своими действиями на сайте.
В Wordpres в снипетах (Woody Snippets) настроить "логику выполнения снипета" для снипетов подключения GTM:
- Показать ЕСЛИ: роль != администратор

**Проверка правильности работы**
В обычном режиме простотра не должно быть скриптов GTM в коде страницы. Расширение TAg Assistant не должно показывать тэги.

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

## Импорт\экспорт контейнеров GTM
Полезно если мы делаем много лендингов на потоке:
- заходим в настройки нашего контейнера GTM
- использовать Импорт\экспорт контейнера
- придется только адаптировать идентификаторы отслеживания под очередной проект.
- Протестировать отправку всех событий.

# Альтернативные инструменты
[Хабр - Опенсорсные альтернативы Google Analytics на своём хостинге](https://habr.com/ru/company/vdsina/blog/518158/) - Matomo, Umami, Plausible Analytics