Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
16 Января 2019 в 15:34

Инструкция: настраиваем цели Яндекс.Метрики через Google Tag Manager

14 21944
Александр Хвалов
Руководитель SEO-отдела АлаичЪ и Ко

Так как сейчас SEO – это немного больше, чем просто привлечение трафика, а многие клиенты просят предоставлять статистику по достижению целей, рассмотрим вариант их настройки в Яндекс.Метрике с помощью Google Tag Manager.

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

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

Итак, посмотрим, как это можно сделать.

  1. Регистрация аккаунта проекта в Google Tag Manager

1.1. Переходим по ссылке https://tagmanager.google.com/ и авторизуемся в клиентской учетной записи Google.

1.2. Создаем новый аккаунт. Будем рассматривать настройку на примере сайта http://www.goodwill-stroi.ru.

Настройка целей Яндекс.Метрики через Google Tag Manager

1.3. Указываем название аккаунта, которое должно совпадать с названием домена сайта, страну проекта и ждем кнопку «Далее».

Настройка целей Яндекс.Метрики через Google Tag Manager

1.4. Указываем название контейнера, а также выбираем, где будет использоваться ваш контейнер. В нашем случае это «Веб-сайт»:

Настройка целей Яндекс.Метрики через Google Tag Manager

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

Настройка целей Яндекс.Метрики через Google Tag Manager

  1. Установка контейнера Google Tag Manager на сайт

2.1. После принятия пользовательского соглашения вы получите код GTM для установки в код своего сайта:

Настройка целей Яндекс.Метрики через Google Tag Manager

2.2. Установите первую часть кода в head, а вторую сразу после открывающего тега body:

Настройка целей Яндекс.Метрики через Google Tag Manager

Скорее всего, установка кода GTM на сайт – это весь процесс работы с кодом, который вам понадобится.

2.3. Проверим корректность установки кода Google Tag Manager. Для этого установим расширение Tag Assistant (by Google) для Google Chrome.

2.4. Перейдите на любую страницу сайта и нажмите на значок расширения:

Настройка целей Яндекс.Метрики через Google Tag Manager

Если он будет зеленого цвета, код GTM установлен корректно.

  1. Активация переменных в GTM для отслеживания действий посетителей на сайте

3.1. Типы переменных, которые вы можете использовать для настройки своих целей.

3.1.1. Клики

Click Element. Получает доступ к уровню данных и считывает ключ gtm.element, который задается триггерами «Клик». Результатом будет ссылка на элемент DOM, где произошел клик.

Click Classes. Получает доступ к уровню данных и считывает ключ gtm.elementClasses, который задается триггерами «Клик». Результатом будет строковое значение атрибута classes в элементе DOM, по которому был выполнен клик.

Click ID. Получает доступ к уровню данных и считывает ключ gtm.elementId, который задается триггерами «Клик». Результатом будет строковое значение атрибута id в элементе DOM, по которому был выполнен клик.

Click Target. Получает доступ к уровню данных и считывает ключ gtm.elementTarget, который задается триггерами «Клик».

Click URL. Получает доступ к уровню данных и считывает ключ gtm.elementUrl, который задается триггерами «Клик».

Click Text. Получает доступ к уровню данных и считывает ключ gtm.elementText, который задается триггерами «Клик».

3.1.2. Ошибки

Error Message. Получает доступ к уровню данных и считывает ключ gtm.errorMessage, который задается триггерами «Ошибка JavaScript». Результатом будет строка с сообщением об ошибке.

Error URL. Получает доступ к уровню данных и считывает ключ gtm.errorUrl, который задается триггерами «Ошибка JavaScript». Результатом будет строка, содержащая URL, где произошла ошибка.

Error Line. Получает доступ к уровню данных и считывает ключ gtm.errorLine, который задается триггерами «Ошибка JavaScript». Результатом будет номер строки в файле, в которой содержится ошибка.

Debug Mode. Возвращает значение true, если контейнер работает в режиме предварительного просмотра.

3.1.3. Формы

Form Classes. Получает доступ к уровню данных и считывает ключ gtm.elementClasses, который задается триггерами «Отправка формы». Результатом будет строковое значение атрибута classes формы.

Form Element. Получает доступ к уровню данных и считывает ключ gtm.element, который задается триггерами «Отправка формы». Результатом будет ссылка на элемент DOM формы.

Form ID. Получает доступ к уровню данных и считывает ключ gtm.elementId, который задается триггерами «Отправка формы». Результатом будет строковое значение атрибута id формы.

Form Target. Получает доступ к уровню данных и считывает ключ gtm.elementTarget, который задается триггерами «Отправка формы».

Form Text. Получает доступ к уровню данных и считывает ключ gtm.elementText, который задается триггерами «Отправка формы».

Form URL. Получает доступ к уровню данных и считывает ключ gtm.elementUrl, который задается триггерами «Отправка формы».

3.1.4. История

History Source. Получает доступ к уровню данных и считывает ключ gtm.historyChangeSource, который задается триггерами «Изменение в истории».

New History Fragment. Получает доступ к уровню данных и считывает ключ gtm.newUrlFragment, который задается триггерами «Изменение в истории». Результатом будет строковое значение хеша URL страницы после события истории.

New History State. Получает доступ к уровню данных и считывает ключ gtm.newHistoryState, который задается триггерами «Изменение в истории». Результатом будет объект состояния, переданный страницей в историю для запуска события истории.

Old History Fragment. Получает доступ к уровню данных и считывает ключ gtm.oldUrlFragment, который задается триггерами «Изменение в истории». Результатом будет строковое значение хеша URL страницы до события истории.

Old History State. Получает доступ к уровню данных и считывает ключ gtm.oldHistoryState, который задается триггерами «Изменение в истории». Результатом будет объект состояния, активный до того, как произошло событие истории.

3.1.5. Страницы

Page Hostname. Указывает имя хоста в текущем URL.

Page Path. Указывает путь в текущем URL.

Page URL. Указывает полный URL текущей страницы.

Referrer. Указывает полный URL перехода к текущей странице.

3.1.6. Прокрутка

Scroll Depth Threshold. Получает доступ к уровню данных и считывает ключ gtm.scrollThreshold, который задается триггерами «Глубина прокрутки». Результатом будет числовое значение, которое показывает глубину прокрутки, запустившую триггер. Для значений в процентах это число от 0 до 100. Для значений в пикселях это количество пикселей, установленное в качестве порога.

Scroll Depth Units. Получает доступ к уровню данных и считывает ключ gtm.scrollUnits, который задается триггерами «Глубина прокрутки». Результатом будет параметр, который показывает выбранные единицы измерения для порогового значения, запустившего триггер, – либо «пиксели», либо «проценты».

Scroll Direction. Получает доступ к уровню данных и считывает ключ gtm.scrollDirection, который задается триггерами «Глубина прокрутки». Результатом будет параметр, который показывает направление прокрутки при срабатывании триггера – либо «вертикальное», либо «горизонтальное».

3.1.7. Утилиты

Container ID. Предоставляет общедоступный идентификатор контейнера (например, GTM-XKCD11).

Container Version. Указывает номер версии контейнера в виде строкового значения.

Environment Name. Возвращает указанное пользователем название текущей среды, если запрос контейнера выполнен из функции «Поделиться ссылкой для просмотра» или из фрагмента кода среды. Для встроенных сред возвращается значение «Реальная», «Последняя» или «Редактирование». В остальных случаях возвращается пустая строка.

Event. Получает доступ к уровню данных и считывает ключ event, который представляет собой имя текущего события dataLayer (например, gtm.js, gtm.dom, gtm.load или указанное пользователем).

HTML ID. Позволяет пользовательским тегам HTML сигнализировать, успешно ли они были выполнены. Используется, если задан порядок активации тегов.

Random Number. Возвращает случайное число.

3.1.8. Видео

Video Current Time. Получает доступ к уровню данных и считывает ключ gtm.videoCurrentTime, который представляет собой время произошедшего в видео события в секундах, выраженное целым числом.

Video Duration. Получает доступ к уровню данных и считывает ключ gtm.videoDuration, который представляет собой общую длительность видео в секундах, выраженную целым числом.

Video Percent. Получает доступ к уровню данных и считывает ключ gtm.VideoPercent, который представляет собой процент видео, воспроизведенного на момент события, выраженный целым числом от 0 до 100.

Video Provider. Получает доступ к уровню данных и считывает ключ gtm.videoProvider, который задается триггерами «Видео YouTube». Результатом будет название поставщика видео (YouTube).

Video Status. Получает доступ к уровню данных и считывает ключ gtm.videoStatus, который представляет собой статус видео в момент регистрации события, например, «воспроизведение», «пауза».

Video Title. Получает доступ к уровню данных и считывает ключ gtm.videoTitle, который задается триггерами «Видео YouTube». Результатом будет название видео.

Video URL. Получает доступ к уровню данных и считывает ключ gtm.videoUrl, который задается триггерами «Видео YouTube». Результатом будет URL видео, например, https://www.youtube.com/watch?v=gvHcXIF0rTU.

Video Visible. Получает доступ к уровню данных и считывает ключ gtm.videoVisible, который задается триггерами «Видео YouTube». Если видео отображается в области просмотра, результатом будет значение true, если же в другой области (например, в нижней части страницы, на фоновой вкладке) – false.

3.1.9. Видимость

Percent Visible. Получает доступ к уровню данных и считывает ключ gtm.visibleRatio, который задается триггерами «Видимость элементов». Результатом будет числовое значение (0–100), которое показывает, какой процент выбранного элемента был виден при срабатывании триггера.

On-Screen Duration. Получает доступ к уровню данных и считывает ключ gtm.visibleTime, который задается триггерами «Видимость элементов». Результатом будет числовое значение, которое показывает, как долго выбранный элемент был виден при срабатывании триггера.

3.2. Включить переменные в Google Tag Manager можно следующим образом:

Настройка целей Яндекс.Метрики через Google Tag Manager

  1. Установка счетчика Яндекс.Метрики с помощью Google Tag Manager

4.1. Перейдите на вкладку «Теги»:

Настройка целей Яндекс.Метрики через Google Tag Manager

4.2. Нажмите на кнопку «Создать» и в открывшемся окне нажмите на кнопку выбора типа тега:

Настройка целей Яндекс.Метрики через Google Tag Manager

4.3. В GTM нет типа тега Яндекс.Метрики по умолчанию, поэтому мы будем использовать тип «Пользовательский HTML»:

Настройка целей Яндекс.Метрики через Google Tag Manager

4.4. Вставьте код Яндекс.Метрики в соответствующее поле:

Настройка целей Яндекс.Метрики через Google Tag Manager

4.5. Нажмите на кнопку выбора условия (триггера) активации тега Яндекс.Метрики:

Настройка целей Яндекс.Метрики через Google Tag Manager

4.6. Так как метрика должна активироваться на всех страницах при их просмотре, мы выбираем соответствующий триггер:

Настройка целей Яндекс.Метрики через Google Tag Manager

4.7. Дайте тегу понятное и значимое название:

Настройка целей Яндекс.Метрики через Google Tag Manager

4.8. Чтобы применить внесенные изменения, вам необходимо опубликовать обновленный контейнер с помощью кнопки «Отправить»:

Настройка целей Яндекс.Метрики через Google Tag Manager

4.9. Укажите название и описание новой версии контейнера:

Настройка целей Яндекс.Метрики через Google Tag Manager

  1. Создание целей и их передача в Яндекс.Метрику

5.1. Созданием цели является создание тега в GTM. Создавать через GTM стоит только цели типа JavaScript-событие. Простые цели, связанные с посещением страниц, лучше создавать непосредственно в настройках счетчика Яндекс.Метрики.

5.2. Попробуем настроить цель на отправку формы «Заказать звонок» в шапке сайта:

Настройка целей Яндекс.Метрики через Google Tag Manager

5.3. Создаем цель в Метрике типа JavaScript-событие и даем уникальное наименование идентификатору цели:

Настройка целей Яндекс.Метрики через Google Tag Manager

5.4. Создадим тег в GTM, который будет передавать идентификаторы цели в Яндекс.Метрику. Для этого вновь выберем Пользовательский html и напишем в нем небольшой скрипт, который отправит нужные нам данные:

Настройка целей Яндекс.Метрики через Google Tag Manager

Обязательно укажите свой номер счетчика Метрики и идентификатор своей цели.

5.5. При сохранении тега GTM предложит вам сразу его связать с триггером активации. Соглашаемся.

Настройка целей Яндекс.Метрики через Google Tag Manager

5.6. Найдем какой-нибудь уникальный идентификатор, который будем использовать в качестве триггера активации нашего тега отслеживания формы.

5.7. Переходим в режим «Предварительного просмотра»:

Настройка целей Яндекс.Метрики через Google Tag Manager

5.8. Заходим на сайт и отправляем форму, чтобы понять, какие значения она может передавать в GTM:

Настройка целей Яндекс.Метрики через Google Tag Manager

5.9. Мы видим, что сможем отследить форму по пользовательскому событию, которое совпадает с form_data_1.

5.10. Создаем триггер активации тега с кодом Яндекс.Метрики «Пользовательское событие» с именем события form_data_1:

Настройка целей Яндекс.Метрики через Google Tag Manager

Настройка целей Яндекс.Метрики через Google Tag Manager

5.11. Опубликуем изменения в GTM и проверим корректность работы цели с помощью «Предварительного просмотра» достигнув цели:

Настройка целей Яндекс.Метрики через Google Tag Manager

5.12. Проверим, передалась ли цель в Яндекс.Метрику. Для этого посмотрим стандартный отчет «Конверсии»:

Настройка целей Яндекс.Метрики через Google Tag Manager

5.13. Если цель отработала корректно, аналогичным образом необходимо будет настроить отслеживание всех форм сайта.

  1. Отслеживание глубины просмотра страницы

6.1. Создадим в Яндекс.Метрике цели для глубины просмотра страницы на уровнях 25, 50, 75 и 100%. Вы можете создать любые удобные вам значения.

Настройка целей Яндекс.Метрики через Google Tag Manager

6.2. Создадим новый тег и уже известным нам скриптом будем передавать данные в Метрику:

Настройка целей Яндекс.Метрики через Google Tag Manager

6.3. При сохранении тега создадим новый триггер из числа стандартных – Глубина прокрутки. В триггере отмечаем «Глубина вертикальной прокрутки», «Проценты» и выбираем количество процентов, на которое пользователь должен пролистать страницу, чтобы данные передавались в Метрику.

Настройка целей Яндекс.Метрики через Google Tag Manager

6.4. Для проверки корректности настройки цели перейдем в «Предварительный просмотр»:

Настройка целей Яндекс.Метрики через Google Tag Manager

6.5. Зайдите на сайт. Внизу страницы будет панель, в которой можно протестировать настроенные цели:

Настройка целей Яндекс.Метрики через Google Tag Manager

Как можно увидеть, при загрузке страницы у нас активировался тег Яндекс.Метрики.

6.6. Если мы пролистаем страницу на 25% вниз, то увидим, что у нас активировался тег просмотра страницы на 25%:

Настройка целей Яндекс.Метрики через Google Tag Manager

6.7. В случае корректной работы цели необходимо опубликовать изменения в настройках GTM. Как это сделать, мы рассмотрели выше.

(Голосов: 12, Рейтинг: 4.58)
14 комментариев
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
  • Roman Gorkunenko
    1
    комментарий
    0
    читателей
    Roman Gorkunenko
    6 месяцев назад
    Здравствуйте. Подскажите, пожалуйста, можно с айпи метрики вытащить среднюю стоимость клика по утм меткам? В метрике есть такой шаблон tags_u_t_m, но он не совместим с меткой директа, у них разные префиксы.
    -
    0
    +
    Ответить
  • Дмитрий Купчинский
    3
    комментария
    0
    читателей
    Дмитрий Купчинский
    6 месяцев назад
    То-есть прямой доступ к коду не нужен?
    -
    0
    +
    Ответить
  • Максим Марціненко
    1
    комментарий
    0
    читателей
    Максим Марціненко
    6 месяцев назад
    Похоже статья устарела еще не успев выйти: yandex.ru/support/metrika/objects/reachgoal.html#reachgoal

    Чтобы использовать эти методы, установите новую версию кода Метрики:
    она доступна в настройках с 6.12.2018.
    С устаревшей версией кода счётчика следует использовать старый набор методов.

    У вас приведены и устаревшая версия счетчика и старый набор методов, а что делать если я только сейчас зарегистрировал счетчик Метрики и у меня новый счетчик и новые метод...
    Похоже статья устарела еще не успев выйти: yandex.ru/support/metrika/objects/reachgoal.html#reachgoal

    Чтобы использовать эти методы, установите новую версию кода Метрики:
    она доступна в настройках с 6.12.2018.
    С устаревшей версией кода счётчика следует использовать старый набор методов.

    У вас приведены и устаревшая версия счетчика и старый набор методов, а что делать если я только сейчас зарегистрировал счетчик Метрики и у меня новый счетчик и новые методы?

    Пробовал скопировать при этом поменяв метод - ничего не работает!
    -
    1
    +
    Ответить
    • Александр Хвалов
      6
      комментариев
      0
      читателей
      Здравствуйте, Максим!

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

      1. Обновляет код в GTM: prnt.sc/md2rol
      2. Проверяем достижение цели в режиме предварительного просмотра: prntscr.com/md2scg
      3. Проверяем передачу достижения цели в консоли браузера через режим отладки Метрики: prnt.sc/md2sp9
      4. Ну и для чистоты эксперимента проверим, что информация о дост...
      Здравствуйте, Максим!

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

      1. Обновляет код в GTM: prnt.sc/md2rol
      2. Проверяем достижение цели в режиме предварительного просмотра: prntscr.com/md2scg
      3. Проверяем передачу достижения цели в консоли браузера через режим отладки Метрики: prnt.sc/md2sp9
      4. Ну и для чистоты эксперимента проверим, что информация о достижении целей действительно попала в метрику: prntscr.com/md2txa
      -
      3
      +
      Ответить
  • Илья Комраков
    1
    комментарий
    0
    читателей
    Илья Комраков
    6 месяцев назад
    Можно сделать один универсальный код счетчика и отправки события Метрики с переменным id-шником.
    Тригер в статье "form_data_1" это частный случай, часто тригеры нужно добавлять самим, в зависимости от CMS.
    -
    1
    +
    Ответить
  • Ксения Колесникова
    1
    комментарий
    0
    читателей
    Ксения Колесникова
    6 месяцев назад
    А откуда брать скрипты? Они есть в готовом виде? Комм: «Создадим тег в GTM, который будет передавать идентификаторы цели в Яндекс.Метрику. Для этого вновь выберем Пользовательский html и напишем в нем небольшой скрипт, который отправит нужные нам данные.».
    -
    1
    +
    Ответить
    • Александр Хвалов
      6
      комментариев
      0
      читателей
      Ксения, к сожалению, скриптов в готовом виде нет. Делаются они зачастую по описанию способа передачи цели в счетчик. Например, вот по этому: yandex.ru/support/metrika/objects/reachgoal.html

      Практически для всех вариантов целей типа «Событие» подойдет пример, который я привел в статье.

      Если будет какой-то нестандартный вариант, можно рассмотреть его отдельно.
      -
      3
      +
      Ответить
  • почта почта
    1
    комментарий
    0
    читателей
    почта почта
    6 месяцев назад
    Сколько не вытался работать с Гугл Тэг Менеджером, так ничего и не получилось. Да, в код лезть не нужно, но он настолько сложный, что мне легче как раз лезть в код и устанавливать туда непосредственно скрипты, а в качестве отслеживания событий использовать яндекс цели. При всей любви к гуглу этот их сервис ОЧЕНЬ геморный в понимании. Там нужен склад ума прогера. А если есть такой склад ума, то и это таг менеджер тем более нафиг не нужен. В статье я уже начал офигивать начиная с этой строки: &...
    Сколько не вытался работать с Гугл Тэг Менеджером, так ничего и не получилось. Да, в код лезть не нужно, но он настолько сложный, что мне легче как раз лезть в код и устанавливать туда непосредственно скрипты, а в качестве отслеживания событий использовать яндекс цели. При всей любви к гуглу этот их сервис ОЧЕНЬ геморный в понимании. Там нужен склад ума прогера. А если есть такой склад ума, то и это таг менеджер тем более нафиг не нужен. В статье я уже начал офигивать начиная с этой строки: "Click Element. Получает доступ к уровню данных и считывает ключ gtm.element, который задается триггерами «Клик». Результатом будет ссылка на элемент DOM, где произошел клик." АУУУ! Гугл. Для кого это? Прогеры и без тебя в коде разберутся. А не прогеры, так же предпочтут чистый код, просто потому что для восприятия это легче, чем эти все триггеры и DOMы
    -
    1
    +
    Ответить
    • Александр Хвалов
      6
      комментариев
      0
      читателей
      Почта почта, все сильно зависит от того, сколько целей нужно установить, а также в скольких местах шаблона.

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

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

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

      Но выбор удобного инструмента, безусловно, остается за каждым конкретным специалистом.
      -
      3
      +
      Ответить
  • Гость
    1
    комментарий
    0
    читателей
    Гость
    6 месяцев назад
    Не понятно как настроить пользовательское событие. И откуда взялась эта запись form_data_1
    -
    13
    +
    Ответить
    • Александр Хвалов
      6
      комментариев
      0
      читателей
      Александр Хвалов
      Гость
      6 месяцев назад
      Добрый день, Гость!

      Если вопрос в том, как понять, какой идентификатор привязать к отслеживанию цели,  то самый простой способ - в режиме "Предварительного просмотра" выполнить отправку формы и посмотреть, передается ли какое-то уникальное значение при отправке. Опытные пользователи могут просто смотреть уникальные идентификаторы в исходном коде.

      Чаще всего на форме может висеть уникальный id или class. В нашем случае он тоже есть, но, к сожалению...
      Добрый день, Гость!

      Если вопрос в том, как понять, какой идентификатор привязать к отслеживанию цели,  то самый простой способ - в режиме "Предварительного просмотра" выполнить отправку формы и посмотреть, передается ли какое-то уникальное значение при отправке. Опытные пользователи могут просто смотреть уникальные идентификаторы в исходном коде.

      Чаще всего на форме может висеть уникальный id или class. В нашем случае он тоже есть, но, к сожалению, не передается, поэтому мы стали отслеживать пользовательское событие, которое подтягивалось в GTM.
      -
      0
      +
      Ответить

Отправьте отзыв!