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

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

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

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

Итак, погляжу, как это можно сделать.

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

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

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

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

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

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

2. Установка контейнера Google Tag Manager для сайт

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

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

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

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

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

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

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

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

3.1.1. Клики

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

Click Classes. Получает впуск. Ant. выход к уровню данных и считывает ключ 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. Получает впуск. Ant. выход к уровню данных и считывает ключ 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. Получает впуск. Ant. выход к уровню данных и считывает ключ gtm.visibleTime, который задается триггерами «Видимость элементов». Результатом бросьте числовое значение, которое показывает, как долго отобранный элемент был виден при срабатывании триггера.

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

4. Агрегат счетчика Яндекс.Метрики с помощью Google Tag Manager

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

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

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

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

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

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

4.7. Выкладывайте тегу понятное и значимое название:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: www.seonews.ru