Продвижение сайтов
+7 (495) 225-54-72
8 (800) 333-54-72
Блог , который улыбается круглый год


Продвижение сайтов от профессионалов, а это — наш блог.

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

Роман Клевцов

Роман Клевцов, 4 июня 2018 , 30083

В этой статье мы расскажем о настройке целей «Яндекс.Метрики» в 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В заключение

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

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

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

Подпишитесь! Самое интересное из мира Digital.