Как установить счетчики Google Analytics и ки через Google Tag Manager

Как установить счетчики Google Analytics и Яндекс.Метрики через Google Tag Manager

Для чего устанавливать счетчики Google Analytics и Яндекс.Метрики на сайт? Чтобы получать всю статистику по вашему ресурсу. В статье пошагово раскрываем оптимальный способ установки счетчиков.

Существует два способа установки данных счетчиков:

Первый. Непосредственно установка отдельных кодов Яндекс Метрики и Google Analytics на все страницы вашего сайта.

Второй. Установка этих же кодов через контейнер Google Tag Manager.

Рекомендуем устанавливать все счетчики через контейнер Google Tag Manager, так как потом он вам понадобится для настройки целей и событий.

Рассказываем, как это сделать.

It's owl good!

Как узнать установлен ли Google Analytics и правильно ли он установлен.

После того, как вы установили код Google Analytics на свой сайт, рекомендуется проверить, на всех ли страницах он установлен.
Есть несколько этапов (способов) проверки.

1. Проверка установки счетчика в интерфейсе GA

Нужно проверить вкладку с информацией о статусе отслеживания.

Для этого заходим в настройки ресурса: Администратор — Настройки ресурса — Код отслеживания. Если все ОК, видим предупреждение, что данные поступают.

2. Наличие кода в коде страницы

Нужно открыть страницу в браузере в режиме просмотра HTML кода и найти сочетание ga.js или analytics.js
в коде в зависимости от версии Google Analytics.

Код классического Google Analytics Код Universal Analytics

3. Плагин для Google Chrome Tag Assistant

На панели в Гугл Хром кликаем по значку Tag Assistant и видим состояние кода GA, наличие ошибок и.т.д.

Плагин для Google Chrome Tag Assistant

4. Плагин Ghostery

— расширение для основных браузеров FireFox, Chrome, Opera, Safari и для мобильных устройств на Андроиде и iOs. Скачать плагин можно по ссылке. Ghostery обнаруживает так называемые веб-жучки — отслеживающие объекты, скрипты рекламных сетей, веб-издателей и т. д., которые обнаруживает в HML коде страниц сайтов. Кроме обнаружения, этот плагин позволяет и заблокировать эти объекты, чем вы можете воспользоваться для защиты ваших личных данных.
Установив Ghostery, для каждого сайта вы сможете увидеть, какие коды на нем установлены, в том числе Google Analytics

Плагин Ghostery

5. Внешние онлайн-сервисы проверки кода Google Analytics

. Однако предыдущие способы не дадут вам ответ, на всех ли страницах стоит код отслеживания GA, насколько корректно он установлен. Вручную это сделать сложно при большом числе страниц на сайте.
www.sitescanga.com — не работает
www.gatective.com — Сервис бесплатный, но есть ограничения по кол-ву проверяемых УРЛ до 2000 страниц. Механизм очень прост: нужно ввести адрес сайта, который вы хотите проверить и адрес email, на который придет отчет о проверке (его нужно будет подтвердить). Сейчас «заказ» на проверку принимает, email подтверждаешь, далее — молчок, вероятно, подустал.

http://www.gachecker.com/ хороший, бесплатный, правда, не знаю, есть ли на него лимит. Он позволяет проверить
классический Google Analytics, Google Universal Analytics, Google Tag Manager, Google Adwords, Google DoubleClick и выгрузить результат в CSV.

6. Проверка установки Google Analytics в реальном времени

Заходим в стандартные отчеты Google Analytics — «В режиме реального времени», заходим на страницу сайта.
Если код установлен корректно, мы видим, что на сайте в данный момент есть пользователи.

Проверка Google Analytics в реальном времени

Установка счетчика Google Analytics

После создания счетчика у вас откроется окно “Сведения о веб-потоке”. В этом окне вам нужно проверить, активирована ли улучшенная статистика (если нет – активируем). После этого переходим к инструкции по добавлению тегов.

Установить счетчик можно 2-мя способами:

• Напрямую вставить код на сайт;
• С помощью Google Tag Manager.

Рассмотрим оба способа.

Установка счетчика Google Аналитики напрямую

Для установки кода напрямую вам необходимо выполнить несколько простых шагов:

1. Скопировать код счетчика.
2. Зайти в код сайта через админку или FTP.
3. Вставить код счетчика в тег <head>.

Если у вас возникли сложности, начиная со второго пункта, то передайте эту работу вашему вебмастеру/программисту (человеку, который занимается сайтом). Размещение кода займет не более 5 минут.

Установка счетчика Google Аналитики через GTM

Для использования этого способа у вас на сайте уже должен быть установлен Google Tag Manager.

Вкратце расскажу, как установить GTM на сайт. Переходим в Менеджер тегов Google, и кликаем на кнопку “Создать аккаунт”. Если у вас уже есть аккаунт, пропустите этот шаг.

Далее необходимо указать название аккаунта (можете назвать как захотите), выбрать страну. В модуле “Создание контейнера” указываем название сайта (URL), и выбираем целевую платформу “Веб-сайт”, кликаем на “Создать”.

Теперь необходимо скопировать 2 фрагмента кода и разместить их на вашем сайте согласно инструкции. Первый код размещаем в теге <head>, а второй в теге <body>.

На этом установка GTM на сайт завершена. Переходим к установке счетчиков аналитики.

Для установки счетчика переходим в наш аккаунт GTM.

Открываем вкладку “Теги” в левом меню.

Кликаем на кнопку “Создать”.

Сейчас мы создадим тег (выполняемое действие) и триггер (условие, при котором действие будет выполнено).

В качестве тега будет активация кода счетчика, другими словами запуск счетчика в работу, а в качестве триггера открытие любой страницы, чтобы счетчик работал на всех страницах.

Сперва укажем название тега, чтобы понимать за то он отвечает. Далее кликаем на область окна “Конфигурация тега”.

Тут мы выбираем тип тега “Google Аналитика: конфигурация GA4”.

В открывшемся окне необходимо ввести идентификатор потока данных.

У многих новичков возникнет вопрос: что это и где его взять? Рассказываю.

Идентификатор потока данных – это элемент кода отслеживания, по которому Google Analytics определяет, где установлен счетчик, а также собирает данные.

Узнать ваш идентификатор можно в настройках Google Аналитики. Для этого перейдите на сайт Google Аналитики, в левой колонке кликните на “Администратор”, во второй колонке (“Ресурс”) кликните на “Потоки данных”, далее выберите ваш сайт, и в правом верхнем углу вы увидите идентификатор, который нужно скопировать и вставить в GTM.

После установки идентификатора кликаем на область “Триггеры”.

Тут выбираем стандартный триггер “All Pages”, чтобы счетчик работал на всех страницах.

И нажимаем “Сохранить”.

Для активации тега на сайте необходимо отправить изменения на сайт. Для этого кликаем на кнопку “Отправить” в правом верхнем углу.

На этом установка счетчика Google Аналитики 4 через GTM завершена! Установка счетчика UA выполняется по такому же принципу.

Как установить счетчики на сайт

В Яндекс.Метрике

3. Создайте счетчик.

«Имя счетчика» — в этой графе лучше всего указывать название сайта, поскольку при создании будущих счетчиков для других сайтов вы можете легко запутаться, какой аккаунт к какому сайту относится;

«Адрес сайта» — добавьте URL вашего сайта;

«Часовой пояс» — указывайте тот часовой пояс, в котором находятся ваши пользователи. Если вы работаете на Бали, а продаете товары в Москве, указывайте Москву, чтобы не потерять конверсии;

«Вебвизор, карта скроллинга, аналитика форм» — включите, чтобы пользоваться крутыми фишками Яндекса;

нажмите «Создать счетчик».

Если сайт самописный, можно вставить код по инструкции Яндекса.

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

В Google Analytics

1. Если у вас еще нет аккаунта в Google, создайте его.

3. Введите данные о сайте, создайте счетчик.

«Название аккаунта» — лучше добавьте в виде адреса сайта;

«Название сайта» — лучше добавьте URL;

«URL сайта» — введите адрес сайта, обязательно укажите http или https;

«Отрасль» — выберите приблизительно;

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

Если вы еще не перешли на https, сделайте это перед тем, как установить счетчик: протокол https влияет на показы, повышает рейтинг сайта.

Если вы создаете Google Analytics для сайта с кириллическим URL, воспользуйтесь конвертером в Punycode или просто скопируйте URL: к сожалению, Google Analytics пока не воспринимает URL на кириллице.

Если на одном аккаунте много счетчиков, название аккаунта лучше писать на английском или на русском, а URL оставить в Punycode.

4. Внедрите счетчик на сайт. Инструкции по установке от разных платформ:

Также можно поставить счетчик самостоятельно или с помощью Google Tag Manager.

Настройка представления в Google Analytics

Перед тем, как добавить код счетчика на сайт, стоит настроить ПРЕДСТАВЛЕНИЕ. Google Analytics позволяет создать несколько представлений на одном ресурсе. Внутри аккаунта можно добавить еще один ресурс, например, какое-то приложение.

Перейдите в НАСТРОЙКИ ПРЕДСТАВЛЕНИЯ. Оставим ВСЕ ДАННЫЕ ПО ВЕБ-САЙТУ. Справа на странице нажмите кнопку СКОПИРОВАТЬ ПРЕДСТАВЛЕНИЕ, придумайте ему название, например, РАБОЧЕЕ и нажмите КОПИРОВАТЬ ПРЕДСТАВЛЕНИЕ. Теперь у вас есть 2 представления.

перейдите в НАСТРОЙКИ рабочего представления, заполните параметры URL и часовой пояс, валюту. Включите ФИЛЬТРАЦИЮ РОБОТОВ. Такой фильтр можно включать только в РАБОЧЕМ ПРЕДСТАВЛЕНИИ, а не по ВСЕ ДАННЫЕ ПО ВЕБ-САЙТУ, чтобы не потерять некоторые данные.

Также можно включить ОТСЛЕЖИВАНИЕ ПОИСКА ПО САЙТУ и внести ПАРАМЕТРЫ ЗАПРОСА. Он берется в адресной строке вашего сайта после знака / и до ключевого слова. Скопируйте эти символы и вставьте в строку ПАРАМЕРТЫ ЗАПРОСА.

Внизу страницы нажмите на кнопку СОХРАНИТЬ.

Слева в панели инструментов ПРЕДСТАВЛЕНИЯ можно добавить некоторые функции:

— добавить пользователей, которые получат доступ к этому представлению через УПРАВЛЕНИЕ ПОЛЬЗОВАТЕЛЯМИ

— ГРУППЫ КОНТЕНТА позволят выделить представление по нескольким авторам контента

— ФИЛЬТРЫ помогут создать условия, например, чтобы в данном представлении были данные только с определенного поддомена.

— НАСТРОЙКИ КАНАЛА. Группу каналов выбираем по умолчанию. Единственное, что я советую — это перевести их названия на русский язык, для удобства. Например, если вы выберите Direct, то увидите, что это прямой траффик, так его и назовем. Organic Search — Бесплатный поиск, и т.д. Это рекомендую сделать до того, как вы внесете код на свой сайт. Нажмите СОХРАНИТЬ.

Если вы хотите выделить определенный источник траффика, то перейдите в ЧАСТНЫЕ ГРУППЫ КАНАЛОВ и создайте свою собственную группу, например, выделить отдельно Яндекс.Директ в отчетах. В ОПРЕДЕЛЕНИЕ ПРАВИЛ по которым будет показываться Яндекс.Директ выберите ИСТОЧНИК (utm_source) в выплывшем списке, который должен содержать UTM метки, например, yandexdirect. Для того чтобы выделить, что этот траффик платный, выберите КАНАЛ (utm_medium) cpc. Нажмите ГОТОВО.

alt=»Электронная торговля» width=»300″ height=»79″ />НАСТРОЙКА ЭЛЕКТРОННОЙ ТОРГОВЛИ — позволяет в отчетах Google Analytics видеть транзакции, то есть какой товар купили, за какую цену и т.д. на вашем сайте. Для этого необходимо нажать кнопку ВКЛ. Также включите ОТЧЕТЫ ПО СОПУТСТВУЮЩИМ ТОВАРАМ и включить НАСТРОЙКИ РАСШИРЕННОЙ ЭЛЕКТРОННОЙ ТОРГОВЛИ. Нажмите внизу кнопку ОТПРАВИТЬ. Не забудьте установить дополнительный плагин на ваш сайт интернет-магазина, который будет передавать данные о заказе в отчеты счетчика Google Analytics.

[alert pink»]Для того, чтобы работали отчеты электронной торговли внутри Google Analytics нужно: 1. Включить «Электронную торговлю» в настройках представления и 2. Установить дополнительный модуль или плагин на ваш интернет магазин (или обратиться к программистам, чтобы передавались данные из базы данных). Без настроек передачи данных (без плагина или модуля) электронная торговля работать не будет.[/alert]

Также есть ПОЛЬЗОВАТЕЛЬСКИЕ ИНСТРУМЕНТЫ И ОБЪЕКТЫ, где вы можете выделить какие-то сегменты, аннотации, модели атрибуции, оповещения и т.д.

Добавление дополнительных целей

Если штатных событий вам недостаточно, вы можете использовать новый механизм и для отправки своих собственных целей. Обращаем внимание, что этот метод работает только для виджетов, установленных на вашем сайте. Для отслеживания поведения пользователей на страницах TimePad данный метод работать не будет.

Для настройки вам потребуется повеситься на какие-либо события внутри виджета и использовать предоставляемую виджетом функцию notifyTrackers , которая отправит событие на все подключенные счётчики. В примере кода ниже показывается как добавить отправку цели на событие нажатия на ввод промокода:

Не забудьте заменить АЙДИ_ИЗ_ВАШЕГО_КОДА , АЙДИ_СОБЫТИЯ , АДРЕС_ВАШЕГО_СОБЫТИЯ и счётчики на свои. Также обратите внимание, что в примере все объекты из window проверяются на существование перед взаимодействием.

Получить дополнительную информацию из заказа

Внутри handleTWFRenderReady переменная this будет указывать на объект виджета, так что из this.model можно выловить практически любую желаемую информацию.

Например, сумму заказа можно получить, просуммировав sum у элементов массива this.model.order.regevents — например, так:

Для отладки вы можете в любой момент написать в консоли браузера TWF2.getWidget().model , чтобы посмотреть, что в ней содержится. Но в коде TWF2.getWidget() использовать не советуем: этот метод небезопасен из-за асинхронной работы виджета.

Для этого я использую два варианта развития событий. В первом случае Вам даже не понадобиться доступ в аккаунт Google Analytics ?

Итак, предположим, что вы настроили отслеживание конверсий и решили проверить, а все ли я правильно сделал.

Проверять цели будем на примере сайта ecomoika.by. Здесь стоит цель на отправку формы: в аналитик улетает событие, когда пользователь успешно отправляет свои контакты.

#1 С помощью Google Tag Assistant

Google Tag Assistant — это расширения для браузера на платформе хром. Я пользуюсь Яндекс браузером, он поддерживает этот плагин. Заходите в интернет-магазин дополнений браузера хром, вбивайте в поиск tag assistant и устанавливайте бесплатно.

После установки расширения, зайдите на испытуемый сайт. Значок дополнения появится справа от адресной строки. Тэг менеджер будет неактивен и выглядеть примерно так (я нажал на значок):

Как видите, он сам подсказывает (по-английски): нажми Enable!

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

• если счетчик не найден — тег асистент поменяет цвет на красный и мы не сможем проверить настройку целей;
• если счетчик найден в шапке сайта (в рамках хедера <head></head>) — тег асистент примет зеленый цвет и мы сможем проверить цели;
• если счетчик найден на сайте, но не в шапке сайта — тег не поменяет цвет и мы сможем работать без проблем.

Просто расположение счетчика в хедере — это рекомендация от Google. Для работы Tag Asistant достаточно, чтобы счетчик Google Analytics просто был на сайте. Как видите, в моем случае счетчик находится в шапке и все четко:

Нажимайте на название счетчика и вы увидите, какую информацию просканировал и получил тег асистент. Как видите, это тайтл и урл страницы, метадата, куки и прочая инфа технического характера:

Посмотрели? Теперь сворачиваем тег асистент (жмем на его значок) начинаем проверять отправку цели. В моем случае я тестирую, улетает ли событие в Аналитикс при отправке формы с сайта. Поэтому я делаю тестовую отправку формы — оставляю заявку через форму поп-ап:

Отлично! Я заполнил и отправил форму, получил секундное уведомление дескать «Форма отправлена. Спасибо» и теперь снова жму на тег асистен. И что я вижу? В диспетчере тегов отобразился новый ивент!

Жму на него (на слово Events) и вижу подробную информацию, а именно: категория действия, действие, тайтл страницы с событием. Именно эта информация и улетает в Google Analytics.

Если бы цель была настроена некорректно, диспетчер тегов не увидел бы ничего. Таким образом, событие улетает в аналитику и значит цель настроена правильно.

Кстати, ранее я уже подробно рассказывал про настройку целей в Google Analytics. В этой статье я предполагаю, что вы уже умеете это делать. Иначе зачем проверять, верно?

#2 С помощью отчета Google Analytics «В режиме реального времени»

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

Как видите, здесь все интуитивно понятно. Отчет показывает, что происходит на сайте в режиме онлайн. В нашем случае интересны разделы «События» и «Конверсии». Проверить цель в Google Analytics с помощью этого отчета совсем просто:

• совершаем действие-цель на сайте;
• отправляемся в раздел события или конверсии (я думаю, вы работаете с событиями, а не виртуальными страницами) и смотрим, прилетело или нет.

В моем случае я отправляюсь в аккаунт гугл аналитикс ecomoika.by. Здесь важный момент: я делаю это с неким запозданием, потому что пишу данную статью. Поэтому вкладка «События» у меня выглядит вот так:

А вкладка «Конверсии» вот так:

Где же цель? Ведь тег асистент ее видел!

Верно, но я пишу статью и не успел перейти в гугл аналитикс прямо сейчас. Я делаю это после пяти абзацев текста и скриншотов. Поэтому жму вкладку «Обращения к цели (за последние 30 мин.)» и вижу вот что:

Как видите, отчет «В режиме реального времени» сохраняет инфу 30 минут, поэтому с целями на сайте все в порядке. Если вы будете проверять срабатывание целей с помощью данного отчета, то если отправите цель и быстренько перейдете на вкладку с этим отчетом — увидите, как появляется цель…

Резюме

Я проверяю цели в Google Analytics с помощью двух инструментов: диспетчера тегов и отчета «В режиме реального времени». Первый не требует доступа в аккаунт гугл Аналитикс и вообще лишних действий.