Logo

Google Tag Manager: установка и настройка аналитики без слез

Василий Волошин

Владелец PPC.ROCKS, автор YouTube и Telegram каналов "Нескромный маркетолог". В маркетинге > 10 лет. Бюджет клиентов > 1 000 000 грн/мес. Опыт > 200 проектов. Рентабельность рекламы – 5 452,09%

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

Мы зарегистрируем Google Analytics, Google Tag Manager, установим его и сделаем базовые настройки. Также мы настроим отслеживания:

  • клик по элементу
  • клик по телефону
  • отправка формы
  • электронная торговля

Регистрация в Google Analytics

Перейдем на сайт ppc.rocks/gtm. Там мы будем настраивать все наши цели. Это аналог главной страницы. Мы будем отслеживать отправку формы, клик по текстовому полю телефона, клик по номеру телефона, сделанному ссылкой. Также я расскажу, как можно отслеживать электронную торговлю.

Перейдем к регистрации Google Analytics. Это тестовый аккаунт. Зарегистрируем Google Analytics для нашей страницы.

Нажимаем «Администратор» — «Создать аккаунт». Называем, допустим, test2.com. Нажимаем «Следующее». Называем также test2.com. Выбираем часовой пояс «Украина». Меняем валюту, в которой будет работать наш сайт, допустим, украинская гривна. Нажимаем «Показать дополнительные параметры».

Мы будем регистрировать Universal Analytics, так как он доступен на большинстве сайтов. Google Analytics четвертой версии сейчас недоступен на части сайтов, таких как Prom.

Нажимаем «Создание ресурса Universal Analytics» и ставим галочку, что мы ее создаем. Ставим галочку «Создать только ресурс Universal Analytics». Называем наш сайт, допустим, ppc.rocks. Нажимаем «Далее». Выбираем отрасль — это необязательное поле, но мы выберем «Другое». Выберем, какая у нас компания, эти данные доступны только для Google, то есть они никуда дальше не идут. Это для статистики Google. Нажимаем «Создать». Дальше появляется сообщение о том, что нужно принять условия, – нажимаем галочку и «Принимаю». После этого у нас высвечивается идентификатор отслеживания. Его необходимо вставить через Google Tag Manager в тэги.

Регистрация в Google Tag Manager

Зарегистрируем Google Tag Manager.

Переходим в Google Tag Manager — «Создать аккаунт». Дальше называем наш аккаунт, допустим, ppc.rocks2. В «Создание контейнера» копируем название ppc.rocks2. Выбираем страну — Украина. Выбираем, какая целевая платформа. Я буду настраивать для веб-сайта. Возможно, у вас для приложения необходимо выбрать.

Нажимаем «Создать». Дальше условия использования необходимо принять. Нажимаем «Я также согласен» и нажимаем «Да». После этого высвечивается два кода Google Tag Manager. Первый код необходимо вставить в блок <head> после открывающегося тега <head>. Второй код необходимо вставить в <body> после открывающегося тега <body>. Копируем код и переходим на наш сайт. Вставляем код. Вставляем второй код.

У меня тут два кода Google Tag Manager, не смотрите на это. У вас должен быть один. У меня это тестовый, потом я его уберу. Нажимаем «Сохранить». Также добавляем на все другие страницы Google Tag Manager. Вставляем вторую часть кода. Копируем также первую часть кода, нажимаем «Сохранить». Через FileZilla загружаю эти файлы. Наш Google Tag Manager загружен.

Google Tag Assistant

Теперь необходимо проверить, есть ли Google Tag Manager на нашем сайте. Для этого необходимо скачать Google Tag Assistant, чтобы отслеживать наши коды на сайте. Перехожу на сайт, обновляю страницу, нажимаю Сtr+F5, чтобы кэш очистился. Видно, что у нас добавился Google Tag Manager. Мы можем сверить идентификаторы Google Tag Manager. У нас добавился Google Tag Manager, R8 в конце.

Настройка Google Tag Manager

Для того чтобы добавить Google Analytics, необходимо создать тег Google Analytics. Но перед этим мы сделаем базовую настройку Google Tag Manager. Для этого необходимо просто включить «Переменные». Нажимаем «Переменные» — «Настроить» и включаем все переменные. Можно включить только те переменные, которые вы будете отслеживать. Я включу все, чтобы мы видели, какие переменные мы можем выключить или включить.

Дожидаемся полной загрузки включения переменных. В левом нижнем углу должна загрузка прекратиться. Все наши переменные загрузились, настроились. Дальше переходим в «Триггеры» и нажимаем «Создать триггер». Нажимаем «Настройка триггера» и выбираем «Клик» — «Все элементы». Дальше называем наш триггер «Клики».

Это делается для того, чтобы каждый клик на странице мы могли отслеживать. То есть если мы нажали на какой-то элемент, то этот элемент будет отслеживаться. Если это не сделать, то элементы не будут отслеживаться по умолчанию. А так мы будем знать, какой идентификатор либо класс у элемента, либо какой текст и тому подобное. Нажимаем «Сохранить».

Дальше необходимо создать тег Google Analytics. Нажимаем «Теги» — «Создать». Переходим в наш Google Analytics, копируем идентификатор отслеживания, переходим в Google Tag Manager. Нажимаем «Конфигурация тега». Выбираем Universal Analytics, «Просмотр страницы» и выбираем «Новая переменная». Создаем новую переменную с идентификатором нашего Google Analytics. Назовем переменную GA, если у вас, допустим, Google Аnalytics 4 версии, то называйте GA4. Нажимаем «Сохранить».

Триггеры активации берем «Все страницы». Называем наш тег GA. Нажимаем «Сохранить». После того, как мы сделали все триггеры, добавили теги, либо что-то изменяли в Google Tag Manager, мы нажимаем «Отправить». Тогда наши данные опубликуются. Нажимаем «Опубликовать» — «Пропустить». Вы можете называть версию, что вы изменяли либо добавляли в Google Tag Manager. Нажимаем «Рабочая область». Перейдем на наш сайт и посмотрим, установился ли наш тег Google Analytics. Обновляем страницу.

Видим, что у нас добавился Google Analytics. Наш Google Analytics на 91 заканчивается, дефис 1. Смотрите, по Tag Assistant: если какой-то код светится желтым либо красным, то эту ошибку нужно устранять. Если код в Tag Assistant светится зеленым либо синим, то зеленым — это ошибок нет, синим — это допустимые незначительные ошибки. Поэтому следите за тем, как у вас размещен код. Если у вас дубликат Google Analytics стоит, то чаще всего задваиваются данные и код отображается желтым цветом.

Поиск элементов для отслеживания

Перейдем в предварительный просмотр и найдем все элементы, которые мы хотим отслеживать.

Есть кнопка «Предварительный просмотр», нажимаем на нее и вводим адрес нашего сайта, нажимаем «Сonnect». После этого нас перебрасывает на наш сайт с приставкой gtm.debug. Переходим в предварительный просмотр и нажимаем «Сontinue». Переходим на наш сайт, прокручиваем страницу вниз и нажимаем на элемент номера телефона. То есть тот телефон, который написан текстом. Один номер телефона написан ссылкой. В левом нижнем углу — это ссылка tel и дальше двоеточие и номер телефона. Она написана через дефис, чтобы мы отслеживали и тот, и тот элемент по отдельности. Нажмем на наш номер телефона текстом. Переходим в debug и смотрим — наш клик появился. Мы можем перейти на эту вторую вкладку и увидим, что есть Click Text и номер телефона. Дальше переходим на наш сайт, нажимаем также ссылку. Мы переходим в предварительный просмотр и смотрим, где у нас клик был. Видим, что у нас Click URL, tel: и номер телефона.

Посмотрим, что у нас получается, если отправить форму. Допустим, напишем какой-то тестовый номер телефона и нажимаем «Отправить». Переходим в предварительный просмотр и видим, что у нас Form Submit. У нас форма отправилась, и ID у неё — «application 1». Эти данные нам уже показывают, что мы можем настроить клик по номеру телефона, клик по ссылке номера телефона и отправление формы. Если у вас форма отправляется, перебрасывает на другую страницу и на ней расположен Google Tag Manager и Google Analytics, то вы можете отслеживать посещения на этой странице как отправку формы. Но часто бывает, что форма отправляется без получения какой-то другой страницы. Поэтому мы будем немного сложнее вариант делать, чем просто посещение страницы.

Отправка формы

Переходим в Google Tag Manager, нажимаем «Теги». Нажимаем «Создать тег», выбираем «Конфигурация тега» — Universal Analytics. Тип отслеживания выбираем «События». Категорию пишем, допустим, клик по номеру телефона без ссылки, то есть мы пишем «tel», действия — «click». Выбираем нашу переменную Google Analytics — «Триггеры», добавляем триггер. Если у нас нет триггера, то мы его создаём. Нажимаем «+», «Настройка триггера», «Клик» — «Все элементы». Выбираем некоторые элементы. У нашего элемента есть click text. Выбираем его. Нажимаем «Равно» и копируем наш номер телефона.

Вот первый клик у нас был. Копируем и вставляем в поле. Убираем кавычки. Называем «Номер». Нажимаем «Сохранить». Тут называем тег «Клик по телефону». Нажимаем «Сохранить». Создаем триггер «Клик по номеру телефона ссылкой». Нажимаем «Создать». Также «Конфигурация тега». Выбираем Universal Analytics. Выбираем тип отслеживания «События». Допустим, это будет link. «Действие» — «click». Также выбираем настройку нашего Universal Analytics и выбираем триггеры.

Мгновенно реагируйте на выявленный интерес покупателя с eSputnik

У нас триггера активации нет. Мы его создаём. Нажимаем «Настройки триггера». Теперь выбираем «Клик» — «Только ссылки» — «Некоторые ссылки». Выбираем «Сlick URL». «Содержит» меняем на «Соответствует регулярному выражению». Дальше пишем комбинацию ^tel:*. Это комбинация соответствия тому, что если у нас ссылка начинается tel, дальше двоеточие и последует какой-то другой символ за двоеточием, то этот триггер сработает. Называем наш триггер «Номер ссылкой». Нажимаем «Сохранить». Называем наш тег «Клик по номеру (ссылка)». Нажимаем «Сохранить».

И наш третий триггер — это отправка формы. Нажимаем «Создать» — «Конфигурация тега» — Universal Analytics. Выбираем «Просмотр страниц» заменить на «События». Пишем «Form». «Действия» — «send». Отправка. Выбираем нашу переменную GA. Триггер активации добавляем. У нас также нет отправки формы как триггера. Выбираем «Отправка формы» — «Некоторые формы». У нашей формы есть «form ID». «Содержит» меняем на «Равно». Копируем наш идентификатор формы. «Form submit» нажимаем и выбираем идентификатор формы. Вставляем, удаляем кавычки, пишем «Форма». Нажимаем «Сохранить». Называем наш тег «Отправка формы». Нажимаем «Сохранить».

У нас уже настроены в Google Tag Manager события, которые будут служить для отслеживания конверсий Google Analytics.

Создание транзакции

И последнее: нам нужно сделать событие — нашу транзакцию. Нажимаем «Создать» — «Конфигурация тега» — Universal analytics и меняем «Просмотр страницы» на «Транзакция». Выбираем «Настройка переменной» — GA. Дальше теги выбираем. Мы настроим так, чтобы у нас на странице «Спасибо за покупку» срабатывал код электронной торговли. Нажимаем плюсик — «Настройка триггера» — «Просмотр страниц» — «Некоторые страницы». Дальше выбираем нашу страницу. Page URL содержит либо «Равно», либо «Регулярное выражение».

Допустим, какую-то информацию вводим, нажимаем «Отправить». Нас перебрасывает на application.php. Копируем эту страницу. Мы должны указать эту страницу в качестве того, чтобы если эта страница загрузилась с тем кодом, с которым дано техническое задание программисту, сработал код электронной торговли. Называем триггер «Ecomm». Нажимаем «Сохранить». И называем тег «Еcomm». Нажимаем «Сохранить».

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

Настройка конверсии и Universal Analytics

Наши теги опубликованы, мы можем в Google Analytics настраивать конверсии. Для этого необходимо перейти в Google Analytics. Нажимаем «Шаг назад». Также настроим и сам Universal Analytics. Начнем с целей.

Нажимаем «Добавить цель» — «Собственная» — «Далее». Называем нашу цель «Клик по номеру». Выбираем «События» — «Далее». Открываем наш Google Tag Manager, выбираем теги и «Клик по номеру». Открываем тег и смотрим, что мы написали в категории, — tel. Действие — click. Копируем эту информацию, потому что бывают неочевидные ошибки, особенно l и I — они очень похожи, и поэтому ошибиться можно в одной букве и искать потом ошибку. Поэтому лучше всего копировать. Нажимаем «Сохранить».

Нажимаем «Добавить цель». Также выбираем «Собственная» — «Далее». Называем нашу цель «Клик по номеру (ссылка)». Выберем «События» — «Далее». Открываем Google Tag Manager, наши теги. Выбираем параметры отслеживания, click копируем, вставляем в «Действие». Нажимаем «Сохранить».

Дальше нажимаем «Добавить цель» — «Собственная» — «Далее». Называем цель «Отправка формы». Копируем с Google Tag Manager категорию. Называем «Отправка формы», выбираем «События» — «Далее». Вставляем в категорию форму, которую мы скопировали из Google Tag Manager. Переходим в Google Tag Manager и копируем наше действие «send». Нажимаем «Отправить». И также всегда дублируем нашу транзакцию в конверсиях.

Нажимаем «Добавить цель». Выбираем «Собственная» — «Далее». Пишем «Спасибо». Выбираем «Целевая страница» — «Далее». Переходим на наш сайт. Делаем тестовую отправку формы. Копируем. Входим в Google Analytics, меняем «Равно» на «Регулярное выражение» и вставляем application.php. Нажимаем «Отправить». Часто бывает, что программист делал доработки и слетела электронная торговля. Мы это делаем для того, чтобы отслеживать, были ли заказы в принципе. Если пользователь попал на страницу «Спасибо за заказ», то, вероятнее всего, он заказал что-то. Если у нас по транзакции все пусто, то есть транзакции прекратились, то, естественно, тут нужно копать, что делалось на сайте, что программист делал, есть ли код на сайте и тому подобное.

Проверка работы целей

Давайте проверим, работают ли наши цели. Переходим в «Режим реального времени» — «Конверсии». Закрываем окно. Переходим наш сайт, обновляем страницу. У нас должны появиться посещения. Нажимаем «Обзор». Вот видно посещение. Переходим «События» — «События за 30 минут». Сейчас посмотрим, мы выгружали эти события или нет. Нажимаем «Отправить» — «Опубликовать» — «Далее».

Идем на наш сайт. Нажимаем на номер телефона текстом. У нас в Google Analytics должно сработать событие «tel click» и сработать конверсия «Клик по номеру телефона». Вот у нас конверсия сработала — клик по номеру телефона. Теперь переходим также на наш сайт. Делаем клик по номеру телефона ссылкой. Переходим в Google Analytics, у нас должно отобразиться, что клик по номеру телефона ссылкой тоже сработал. Теперь нам необходимо перейти на сайт и отправить форму. Нажимаем «Отправить». У нас должна сработать и первая, и вторая конверсия. И «Спасибо», и «Отправка формы». Таким образом мы настраиваем конверсии.

Приступим к дальнейшей настройке Google Analytics.

Переходим в «Администратор» — «Настройки представления». Если у нас, допустим, валюта другая, не совпадающая с валютой сайта, то мы меняем валюту на ту, в которой у нас работает сайт. Если у нас интернет-магазин, то он работает в основном в гривне, в рублях либо в долларах.

Дальше выбираем «Отслеживание поиска по сайту». Если у вас есть поиск по сайту, то он чаще всего с динамическими параметрами. Это бывают параметры q, либо с, либо search term. То есть вы если хотите отслеживать поиск по сайту, то настраиваете параметр и нажимаем «Сохранить». Дальше переходим в «Настройки представления» и включаем «Электронную торговлю», нажимаем «Отправить».

Техническое задание программисту

После включения электронной торговли и настройки в Google Tag Manager необходимо отправить техническое задание программисту.

Мы настраиваем на странице «Спасибо». Программист должен разместить этот код с динамическими параметрами, ID транзакции должен быть. Дальше название магазина. Это такие параметры, которые вы можете внести по умолчанию и дальше их не трогать. То есть интернет-магазин вы можете один раз завести, и программист больше ничего не делает. Идентификатор транзакции, цена покупки. Если у вас один товар, то его артикул. Также название товара, категорию товара, цену товара и количество товаров. Если у вас более одного товара транзакции, то вы суммируете transaction total, то есть цену покупки. И также тут добавляется не один товар, а, допустим, два разных товара.

Самое главное в настройке этого кода — этот код должен стоять выше, чем Google Tag Manager либо Analytics. Иначе он не сработает. Часто программисты просто его размещают где-то внизу в body или могут вообще за html разместить. Поэтому всегда добивайтесь того, чтобы они разместили код еcommerce до Google Tag Manager либо Google Analytics.

Перейдем к дальнейшей настройке Google Аnalytics.

Нажимаем «Шаг назад». Дальше нажимаем «Настройки ресурса». Тут мы включаем «Демографические данные», чтобы в отчеты попадало, какие пользователи у нас на сайте. Использовать «Улучшенную атрибуцию ссылок». Также часто галочка «Добавление показателя пользователя» не включена. Ее нужно включить. Если у вас есть доступ к Search Console, то также связываете Google Analytics с Search Console. Это нужно для того, чтобы вы видели в Analytics те данные, которые поступают в Search Console. То есть какие запросы пользователи вводят, чтобы попасть на ваш сайт, какие страницы посещают чаще всего и тому подобное. Это удобно посмотреть в Google Analytics. Нажимаем «Назад» — «Отслеживание» — «Сбор данных» и включаем «Сбор данных». Нажимаем «Начать» — «Продолжить» — «Активировать». Нажимаем «Готово». У нас сбор данных включен. Это делается для того, чтобы собиралась аудитория ремаркетинга. Тем пользователям, которые посещали сайт, можете дальше показать рекламу и возвращать тех, которые не заказали услугу либо товар. Нажимаем «Сохранить». В «Хранениях данных» нажимаем «Хранение данных о пользователях без срока действия» и нажимаем «Сохранить».

Источники перехода

Если у нас присутствует платежная система, то есть оплаты идут, допустим, через LiqPay, в «Источниках перехода» можем добавить исключения и добавить домен liqpay.ua.

Введем liqpay.ua. Также может быть какой-то другой домен, допустим, какая-то другая платежная система, типа PayPal.com и тому подобное. Это делается для того, чтобы цепочка при заказе товара не обрывалась. То есть пользователь заходит на сайт на одну страницу, допустим, с рекламы. Дальше он приходит и заказывает товар. И после заказа товара переходит на страницу платежной системы. Эта страница не принадлежит вашему сайту. После оплаты он попадает на страницу «Спасибо за заказ». И тут происходит то, что у вас данные по аналитике обрываются. То есть ваш пользователь перешел с платного трафика, но будет отображен как реферальный трафик с платёжной системы. Это делается по умолчанию, чтобы у вас не было обрыва сессии пользователя.

Определение аудитории

Дальше в «Определение аудитории» нажимаем «Аудитории». По умолчанию создается аудитория «Все пользователи». Нажимаем «Далее», выбираем «Целевые аккаунты». Наш аккаунт — Universal Analytics, нажимаем «Включить». Назад на страницу аудитории нажимаем. Дальше нажимаем «Аудитория», выбираем пользователя. Даже можем создать пользователей, которые не заказали, допустим, какую-то услугу.

Я могу настроить пользователей, которые не отправили форму, но были, допустим, более 10 секунд на сайте. Нажимаем «Создать» — «Условия», дальше выбираем «Длительность сеанса». Длительность сеанса, допустим, более 10 секунд. Эти пользователя провели на сайте более 10 секунд, но не отправили заявку. И на этих пользователей мы можем настроить ремаркетинг и показывать нашу рекламу. Это активные пользователи, они провели на сайте более 10 секунд. Лучше, конечно, на тех пользователей, которые провели более минуты и не отправили заявки. Нажимаем «Применить». Называем «Аудитория без заявки». Нажимаем «Далее», выбираем, где мы будем размещать — Universal Analytics — и «Опубликовать». Назад на страницу аудитории. Мы создали две аудитории — все пользователи и без заявки.

Дальше мы можем связать Universal Analytics с Google Рекламой. Но на этом аккаунте не зарегистрирован аккаунт Google Рекламы, поэтому я связать не могу. Но я рекомендую связать Universal Analytics с Google Рекламой через рекламный кабинет Google Adds по той причине, что часто переключатель включен на моменте автопометки ссылок. Если автопометка ссылок не включена, то у вас весь трафик, даже если он размеченный, будет падать в Google Organic. Если мы настраиваем Google Рекламу, то, естественно, это затрудняет аналитику. И там аналитика практически невозможна.

Можно также добавить в Universal Analytics пользователей, которым вы хотите дать доступ. «Добавить пользователя» — добавить пользователя с какими-то правами, нажимаем «Отправить».

Также можем настраивать фильтры для отображения полного адреса страниц. Бывают такие моменты, что сайт копируют и выкладывают где-то в интернете под другим адресом. То есть вам не приходят заявки, а по Analytics числятся заказы. И для того чтобы найти, кто это сделал, и с этим бороться, настраиваются фильтры полного адреса страниц. То есть по умолчанию все страницы с относительным адресом. Допустим, страница входа. Выберем сегодняшнюю дату и увидим, что целевая страница — gtm. А если вы настроили фильтры, то у вас будет отображен полный адрес сайта. То есть будет pps.rocs/gtm. Так вы можете найти того человека, который скопировал ваш сайт.

Ответы на вопросы

Как понять, что это клик именно из конкретного элемента, страницы и этого блока, а не суммарное количество кликов по всем номерам по всему сайту?

Можно добавить дополнительное условие, что страница содержит такое-то название, либо такой page URL. Тогда вы будете точно знать, что именно на этой странице именно этот элемент сработал. Если у вас несколько форм, то вы можете на каждой форме отслеживания сделать. То есть какая форма рабочая, а какую можно убрать. Если у вас, допустим, три одинаковых формы на странице, то вы можете по идентификатору формы узнать либо по expose формы. Expose — это адрес формы на странице.

Если 100 событий на 1 странице, зачем заводить цели в GA? Просто посмотреть в отчете события будет правильно или нет?

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

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

Что дает включение отчета для расширенной электронной торговли?

Вы можете настроить расширенную электронную торговлю. Для чего это нужно? Если вы хотите отслеживать, добавил ли пользователь товар в корзину, удалил ли товар из корзины, добавил в избранное, посмотрел какое-то количество товаров и тому подобные данные, вы можете включить расширенную электронную торговлю. Но для нее техническое задание выглядит немного сложнее, поэтому я указал обычную электронную торговлю, которую программисты внедряют. Расширенную электронную торговлю программисты часто не внедряют. На 99% этой простой электронной торговли хватает для интернет-магазинов.

А как самостоятельно проверить, установлен на сайте или нет код обычного отслеживания ecommerce?

На странице «Спасибо за заказ» нужно нажать комбинацию Сtrl+U, и у вас будет исходный код. После того как вы увидели исходный код, вы можете нажать Сtrl+F и найти этот параметр transaction ID. Если этот атрибут присутствует, то вы увидите в коде, что этот код относится к электронной торговли. Если его нет, то кода электронной торговли нет. Но бывают такие случаи, что программисты устанавливает код электронной торговли с помощью скриптов.

Special Request Inline