Настройка целей “Яндекс.Метрики” в GTM

Настройка целей “Яндекс.Метрики” в GTM

Надежда Светлова
Надежда Светлова Ведущий специалист
04.06.2018 в 9:00

В этой статье мы расскажем о настройке целей “Яндекс.Метрики” в Google Tag Manager (GTM). Вначале ответим на самый популярный вопрос:

  • Зачем настраивать «Метрику» через диспетчер тегов от “Гугл”, если можно сделать все напрямую?

Преимущества настройки “Яндекс.Метрики” при помощи GTM

  • Гостевой доступ. К аккаунту для просмотра настроек легко подключить сторонних специалистов без возможности изменения параметров.
  • Автоматизированный функционал. Диспетчер запрашивает от пользователя минимум информации. Базовые скрипты настраиваются в 2–4 шага.
  • Универсальность. При помощи GTM можно объединить не только “Метрику” и GA, но и многие другие сервисы (Marin, AdAdvisor, Crazy Egg, Hotjar, K 50, DoubleClick, Adometry, Awin, AB TASTY и пр.).
  • Простота настройки. Вносить изменения в исходный код сайта не придется.

Настройку лучше всего начинать сразу после регистрации в “Яндекс.Метрике” и получения кода счетчика. Итак, приступим.

Этап 1. Регистрация в GTM и настройка диспетчера

Чтобы получить доступ к GTM, зарегистрируйте аккаунт в Google-почте, залогиньтесь и перейдите по ссылке https://tagmanager.google.com. Вы попадете на страницу настройки аккаунта. Введите название вашей компании и нажмите на кнопку “Далее”.

Настройка целей «Яндекс.Метрики» в GTM - изображение №1

После этого вы перейдете к настройке контейнера. Введите URL главной страницы сайта, выберите “Веб-сайт” и нажмите на кнопку “Создать”.

Настройка целей «Яндекс.Метрики» в GTM - изображение №2

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

Настройка GTM завершена. Идем дальше. Чтобы вы понимали, что вообще происходит, дадим определения основным терминам, связанным с диспетчером тегов “Гугл”.

  • Тег. Это основной объект в GTM. Представляет собой код, который выполняется при загрузке страницы или при взаимодействии пользователя с ее элементами. Основное предназначение тегов — передача данных сторонним сервисам.
Обратите внимание! При настройке тегов в GTM коды добавляются на сайт автоматически. Вручную это делать не придется.
  • Триггер. Это условие, которое может оказаться истинным или ложным в зависимости от фактического значения переменной. Оно определяет, сработает тег или нет.
  • Переменная. Один из параметров триггера. При загрузке страницы или выполнении пользователем определенного действия фактическое значение переменной сравнивается с заданным в триггере. В результате определяется, будет ли триггер истинным (true) или ложным (false).

Теперь о том, как продолжается настройка целей “Яндекс.Метрики” в GTM.

Этап 2. Установка счетчика “Яндекс.Метрики” на страницы сайта при помощи GTM

Чтобы установить код счетчика “Метрики” на все страницы сайта, нужно создать тег. Для этого на главной странице с настройками GTM нажмите на “Новый тег”.

Настройка целей «Яндекс.Метрики» в GTM - изображение №3

Для настройки тега нажмите на иконку карандаша.

Настройка целей «Яндекс.Метрики» в GTM - изображение №4

Выберите тип тега — “Пользовательский HTML”.

Настройка целей «Яндекс.Метрики» в GTM - изображение №5

Появится окно для ввода кода.

<scr ipt src="//mc.yandex.ru/metrika/watch.js" type="text/javascript"></scr ipt>

<scr ipt type="text/javascript">
	var yaCounterXXXXXX = new Ya.Metrika({
		id: XXXXXX[, <параметры инициализации>]
	});
</scr ipt>

Вставьте приведенный выше код в текстовое поле «HTML» (замените XXXXXX на номер вашего счетчика и укажите параметры инициализации) в конфигурации тега GTM и нажмите на кнопку «Сохранить».

Настройка целей «Яндекс.Метрики» в GTM - изображение №6

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

Настройка целей «Яндекс.Метрики» в GTM - изображение №7

Триггер, который нужен для срабатывания «Метрики», уже задан по умолчанию. Просто кликните по строчке.

Настройка целей «Яндекс.Метрики» в GTM - изображение №8

Сохраните изменения. Появится диалоговое окно. Присвойте тегу имя и нажмите на кнопку «Сохранить».

Настройка целей «Яндекс.Метрики» в GTM - изображение №9

После этого тег появится в списке на главной странице настроек. Убедитесь, что все работает, в “Предварительном просмотре” и нажмите на кнопку “Отправить”. На этом все — “Яндекс. Метрика” установлена на сайт.

Как видите, ничего сложного. Теперь нужно активировать переменные.

Этап 3. Активация переменных в GTM

Для настройки цели “Яндекс.Метрики” на нажатие кнопки в GTM (инструкция будет ниже) нужно активировать переменную Click Classes. Чтобы это сделать, действуйте так:

В главном меню GTM выберите пункт “Переменные”.

Настройка целей «Яндекс.Метрики» в GTM - изображение №10

Нажмите «Настроить».

Настройка целей «Яндекс.Метрики» в GTM - изображение №11

В подразделе «Клики» «Конфигурации встроенных переменных» активируйте чек-бокс «Click Classes» и закройте окно настройки.

Настройка целей «Яндекс.Метрики» в GTM - изображение №12

Переменная добавится в список.

Настройка целей «Яндекс.Метрики» в GTM - изображение №13
Обратите внимание! На этом шаге вы можете активировать сразу все переменные, чтобы потом не тратить на это время.

Этап 4. Настройка целей “Яндекс.Метрики” в GTM

Для примера рассмотрим настройку цели “Яндекс.Метрики” на нажатие кнопки в GTM.

Вначале нужно создать цель в «Метрике». Для этого откройте ее в браузере. Выберите пункт меню “Настройка”, перейдите в раздел “Цели” и нажмите на кнопку “Добавить Цель”.

Настройка целей «Яндекс.Метрики» в GTM - изображение №14

Появится окно настройки цели. Введите ее название, выберите «JavaScript-событие», придумайте уникальный идентификатор (на латинице) и нажмите на кнопку «Добавить цель».

Настройка целей «Яндекс.Метрики» в GTM - изображение №15

Цель появится в списке. Перейдите в GTM. Создайте тег. Тип — «Пользовательский HTML». В текстовое поле введите следующий HTML-код:

<scr ipt>
	yaCounterХХХХХХХХ.reachGoal('otpravit');
</scr ipt>

Вместо ХХХХХХХХ вставьте номер вашего счетчика “Яндекс.Метрики”. Должно получиться так:

Настройка целей «Яндекс.Метрики» в GTM - изображение №16

После сохранения данных добавьте триггер. Нажмите на кнопку «+».

Настройка целей «Яндекс.Метрики» в GTM - изображение №17

В появившемся окне настройки кликните иконку карандаша и выберите тип триггера — «Все элементы».

Настройка целей «Яндекс.Метрики» в GTM - изображение №18

Появится окно детальной настройки. Отметьте «Некоторые клики» и выберите условия, как показано ниже.

Настройка целей «Яндекс.Метрики» в GTM - изображение №19

Теперь нужно ввести значение переменной Click Classes, при котором триггер будет принимать значение true, что приведет к инициализации кода тега. Для этого необходимо узнать класс кнопки, нажатия на которую будут фиксироваться.

Перейдите на сайт, найдите элемент, кликните по нему правой клавишей мыши и в контекстном меню выберите “Просмотреть код элемента”.

Настройка целей «Яндекс.Метрики» в GTM - изображение №20

Откроется консоль браузера, в которой будет подсвечен код кнопки. Из него нужно извлечь класс элемента. Найдите class=”…”. Скопируйте код, размещенный между кавычками, вставьте его в незаполненное текстовое поле настройки триггера и нажмите на кнопку «Сохранить».

Настройка целей «Яндекс.Метрики» в GTM - изображение №21

Присвойте триггеру и тегу имена, сохраните изменения, удостоверьтесь в том, что все работает в режиме предпросмотра, и нажмите кнопку «Отправить» на главной странице GTM.

На этом все. Вы настроили цель «Яндекс. Метрики» в диспетчере тегов «Гугл».

В заключение

Как видите, ничего сложного. По такому же принципу происходит настройка всех целей «Яндекс.Метрики» в GTM.

  1. Создаем цель в «Метрике».
  2. При настройке тега вставляем в текстовое поле код формата
<scr ipt>
	yaCounterХХХХХХХХ.reachGoal('идентификатор_цели');
</scr ipt>.
  1. Настраиваем триггер.

Изучайте переменные и экспериментируйте с иными целями.

Вашему бизнесу нужны клиенты? Внедряем системы привлечения клиентов для вашей ниши
Подпишитесь на рассылку
В рассылке мы делаем подборку новостей по диджитал и пишем статьи про разработку
Похожие статьи
Вебвизор в «Яндексе» | Google, google.analytics, аналитика,
Аналитика
Вебвизор в «Яндексе»
13.08.2018 в 19:02
Настройка счетчика Google Analytics | Google, google.analytics, аналитика,
Аналитика
Настройка счетчика Google Analytics
30.07.2018 в 18:35
Настройка User ID в Google Analytics | Google, google.analytics, аналитика,
Аналитика
Настройка User ID в Google Analytics
16.07.2018 в 17:15
Настройка событий в Google Analytics | Google, google.analytics, аналитика,
Аналитика
Настройка событий в Google Analytics
02.07.2018 в 15:52
Показать ещё
Хотите узнать, как сделать сайт лучше и прибыльнее?
Наша глубокая аналитика вам в этом поможет
Оптимизм.ру Настрой на результат!