Sibprompost.ru

Стройка и ремонт
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Установка Google Analytics и Яндекс.Метрика через GTM

После регистрации и установки контейнера Google Tag Manager на сайт произведем установку счетчиков веб-аналитики Google Analytics и Яндекс.Метрика.

Установка кода Google Analytics через GTM

Получив идентификатор отслеживания в Google Analytics (UA-XXXXXXXXX-X), создадим переменную для экономии времени и избежании ошибок в дальнейшем.

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

В Google Tag Manager используются переменные двух типов: встроенные и пользовательские. Подробнее о переменных будет разобрано в отдельной статье. А пока разберем создание пользовательской переменной. Для этого переходим в Переменные — Создать.

Создание пользовательской переменной

Выбираем тип переменной – «Настройки Google Analytics». Эта переменная позволяет задавать настройки Google Analytics для использования с разными тегами.

Тип переменной — Настройки Google Analytics

Вводим название переменной, идентификатор отслеживания (код Google Analytics) и нажимаем «Сохранить».

Идентификатор отслеживания и Название переменной

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

Пользовательская переменная GA ID

Можно поступить по-другому — вместо типа «Настройки Google Analytics» выбрать переменную типа «Константа», и там указать код Google Analytics.

Переменная типа «Константа»

Переходим в меню «Теги», создаем новый тег.

Создание нового тега Google Analytics

Конфигурация тега – Universal Analytics, поскольку библиотека классического Google Analytics (ga.js) сильно устарела и больше не развивается. Однако есть достаточное количество сайтов, на которых по-прежнему установлен старый код. На смену ему уже пришли analytics.js и gtag.js.

Рекомендуемый тип тега — Universal Analytics

  • Тип отслеживания – Просмотр страницы;
  • НастройкиGoogleAnalytics – Выбираем нашу переменную GA ID (автоматически заключается в двойные фигурные скобки, как шаблон);

Если вы используете пользовательскую переменную «Константа», тогда вам необходимо поставить галочку «Включить переопределение настроек в этом теге», и в поле «Идентификатор отслеживания» указать переменную, которую мы создали на шаге выше.

Переопределение настроек в теге

  • Триггер / Условие активации тега – All Pages (на всех страницах).

Триггер активации — All Pages (на всех страницах сайта)

Вводим название тега и сохраняем его. На этом настройка кода отслеживания Google Analytics через Google Tag Manager на сайт завершена.

Проверим корректность настройки кода отслеживания GA традиционным способом через сам Google Analytics без использования предварительного просмотра в отладчике. Для этого в правом верхнем углу нажимаем «Отправить» — «Опубликовать» и «Далее». Новая версия контейнера опубликована!

Теперь просто перейдем в интерфейс Google Analytics и в отчетах «В режиме реального времени» увидим наш заход. Для наглядности пометим свой переход с помощью utm-меток. Можно перейти на различные разделы и посмотреть, фиксируются ли переходы по всем страницам сайта или нет.

Проверка установки кода Google Analytics в режиме реального времени

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

Установка кода Яндекс.Метрика через GTM

Перед установкой кода ЯМ необходимо создать счетчик в аккаунте Яндекса и получить код отслеживания. Аналогично GA создаем новый тег. Только вместо рекомендуемого типа тега выбираем специальный – «Пользовательский HTML».

Тип тега — Пользовательский HTML

Копируем код отслеживания из интерфейса Яндекс.Метрика и вставляем его в поле HTML. Не забываем про триггер — условие активации тега – All Pages (на всех страницах). Нажимаем «Сохранить».

Читайте так же:
Можно ли ставить духовой шкаф под счетчиком

Копирование кода из Я.Метрика в Пользовательский HTML Google Tag Manager

Мы с вами получили два тега и два кода счетчика веб-аналитики.

Теги двух кодов счетчиков аналитики

Чтобы данные передавались в Яндекс.Метрика, осталось только опубликовать новую версию контейнера на сайт. Действия прежние: в правом верхнем углу нажимаем «Отправить» — «Опубликовать» и «Далее». Новая версия контейнера опубликована!

Самый простой способ проверить корректность настройки счетчика ЯМ – это обновить статус самого счетчика в списке всех счетчиков учетной записи.

Счетчик Яндекс.Метрика корректно установлен

Если вместо желтого или красного значка появился зеленый, значит он корректно установлен.

Есть еще один способ проверки установки кода счетчика – это добавление к адресу страницы параметра _ym_debug со значением 1. В моем случае это http://watersports.ru/?_ym_debug=1

Далее необходимо вызвать консоль разработчика (в браузере Google Chrome кнопка «F12») и перейти на вкладку Console. Если код установлен правильно, в консоли вы увидите номер вашего счетчика и данные, которые отправляет код.

Данные о просмотре страниц передаются

Более подробную информацию читайте в официальной справке Яндекса.

Урок 44. Настройка Google Tag Manager — что это за зверь и как с ним работать?

Приветствую, дорогие друзья!

Помните мы с вами настроили счетчик Метрики, затем счетчик Google Analytics, лезли в код сайта, чтобы разместить их? Совершенно незнающим HTML людям, это доставляло большие трудности. Ведь сразу-то и не поймешь, где находится тег или . Для этого нужные определенные знания. По этой причине, большинство владельцев сайтов поручают установку счетчиков вебмастерам или программистам, да еще и платят за это деньги. Правда небольшие, но все-таки деньги. А еще нужно составить ТЗ (техническое задание), что отнимает некоторое время.

Но умельцы из Google решили эту проблему, создав один очень хороший сервис. Называется Google Tag Manager. Суть этого инструмента — упростить взаимоотношения между человеком, не соображающим в вебмастерстве, и кодом сайта. То есть, вам не придется лезть в код, достаточно использовать этот сервис.

Настройка Google Tag Manager займет у вас несколько минут. Но в будущем данный инструмент возместит то время, которые вы потратили на его настройку. Кроме настройки, я расскажу вам, как установить счетчик Метрики, Analytics и Adwords на сайт, при этом не ползая в его внутренностях.

Начало работы с Google Tag Manager

Для начала работы перейдите по ссылке: www.google.com/intl/ru/tagmanager/

Я думаю, что у большинства людей, читающих этот урок, есть аккаунты в Google. Можете сразу нажать на «Войти в аккаунт» в правом верхнем углу. Те, у кого нет аккаунтов, зарегистрируйтесь.

Ну а затем, нужно создать аккаунт, непосредственно, в самом Tag Manager. Для этого нужно заполнить небольшую форму:

Назовите аккаунт и нажмите «Далее». На следующем шагу нужно указать настройки контейнера, а именно адрес сайта и место, где будет использовать контейнер. Так как мы работаем с сайтом, то выбираем «Веб-сайт»:

И нажимаем на кнопочку «Создать». Затем, Google предлагает принять соглашение. Естественно мы его примем:

Сразу после того, как мы создали аккаунт, появляется окошечко с кодом Google Tag Manager. Его нужно установить после открывающего тега :

Скопируйте его и установить на всех страницы сайта. Вот пример того, куда нужно установить код:

Если вам непонятно, то придется прибегнуть к услугам вебмастера. Но, поверьте мне, после этого обращаться к вебмастерам по пустяшным делам вы будете редко.

Читайте так же:
Счетчик с параллельным переносом схема

Терминология Google Tag Manager

Для того, чтобы разъяснить многие моменты и в то же время разобрать все самое необходимое для работы с Tag Manager, я решил дать небольшой список основных терминов. Итак:

  • Контейнер — это тот самый JavaScript-код, который нужно вставить на все страницы. В него будут входить все те кода, которые мы установим с помощью Диспетчера тегов;
  • Тег — это, непосредственно, сам код счетчика Google Analytics или Метрики;
  • Триггер — это условие, при выполнении, которого активируется тег;

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

Настройка Google Tag Manager у многих начинается с установки счетчика Analytics. Мы не исключение. Итак:

  1. Для того, чтобы установить счетчик в контейнер, в левом меню найдите пункт «Теги»: И нажмите на кнопку «Создать»;
  2. Затем выберите пункт «Конфигурация тега»:
  3. Выберите тип тега Google Analytics. Так как на моем сайте установлен код Universal Analytics, я выберу именно его:
  4. Теперь нам необходимо указать индентификатор счетчика Analytics. Взять его можно, непосредственно, в самом сервисе аналитики во вкладке «Главная страница»: Скопируйте его и вставьте сюда:
  5. Добавляем триггер. Для этого под тегом, с которым только что работали, нажмите на «Триггеры». Выберите триггер «All pages»:
  6. Задайте имя тегу и сохраните:

Нехитрым способом мы установили счетчик Google Analytics. Как видите, это несложно.

Установка счетчика Метрики

Установить счетчик Метрики еще проще. Так же создаем тег и при выборе типа тега выбираем «Пользовательски HTML»:

Затем просто вставляем код Метрики в поле HTML:

Назначаем тот же триггер «All Pages», даем название и сохраняем. Вот и все, теперь у нас в одном контейнере находится два счетчика:

Сегодня вы узнали как разгрузить страницы своего сайта от лишнего кода. Можете удалять кода счетчиков и оставить только код Google Tag Manager.

Как видите, настройка Google Tag Manager занимает всего пару минут.

Ну а на этом все, дорогие друзья. До скорых встреч!

Не забывайте подписываться на обновления блога.

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

Введение

В этой статье я расскажу вам, как начать работу в GTM и с его помощью установить код Analytics.

Google Tag Manager, или Диспетчер тегов — это бесплатный инструмент от Google для управления тегами и кодами систем веб-аналитики и других приложений. Разместив GTM на сайте, специалист будет настраивать аналитические системы в интерфейсе Tag Manager. Вот основные преимущества работы с GTM:

  1. Экономия времени специалистов на редактирование кода сайта. Для установки и обновления кодов систем веб-аналитики не нужно привлекать разработчиков и готовить для них техническое задание. Cпециалист по рекламе может в интерфейсе GTM добавлять, активировать и отключать нужные системы сбора данных самостоятельно.
  2. Простота. Настраивать новые теги или вносить изменения в существующие довольно просто. Кроме того, большая часть функций для отслеживания пользовательских действий автоматизирована, их настройка будет состоять их нескольких шагов.
  3. Ускорение работы сайта. Благодаря GTM медленно загружающиеся теги не влияют на загрузку страниц и работу других тегов.

Содержание:

Создание аккаунта

Переходим на сайт GTM и авторизуемся в нужном аккаунте Google. Здесь нужно указать название аккаунта и выбрать регион. На этом этапе сложностей не должно возникнуть.

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

Соглашаемся с условиями использования Диспетчера тегов Google.

Читайте так же:
Pro 55r счетчик банкнот

Установка кода GTM на сайт

Далее появляется окно с кодом нашего GTM. Здесь написано, куда нужно вставить фрагменты кода.

Передайте эти фрагменты кода разработчикам или установите его самостоятельно, если умеете обращаться с кодом сайта.

Установка Google Analytics

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

Выбираем настройки Google Analytics в блоке с утилитами.

Указываем идентификатор отслеживания Google Analytics (он прописан в Analytics на уровне ресурса).

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

Затем переходим во вкладку «Теги» и создаем новый. В конфигурации тегов выбираем Google Аналитика: Universal Analytics


Здесь оставляем тип отслеживания «Просмотр страницы» и выбираем в настройках Google Analytics только что созданную переменную.

Чуть ниже в триггерах выбираем All Pages. Не забываем указать название нашего тега и сохраняем.

Теперь можем опубликовать внесенные изменения. Жмем на кнопку «Отправить» в верхнем правом углу, затем на «Опубликовать».

Указываем название и описание (по желанию).

Создание аккаунта Яндекс Метрики

Переходим на сайт Яндекс Метрики и создаем новый счетчик, предварительно зайдя с аккаунта, на котором будет идти реклама.

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

Установка счетчика Метрики через GTM

Cистема предоставляет код счетчика. Копируем его и идем в GTM.

Процедура установки кода стандартная.

  1. Переходим в «Теги».
  2. Жмем на кнопку «Создать».
  3. Во вкладке «Конфигурация тега» выбираем «Пользовательский HTML».
  4. Вставляем скопированный код счетчика.
  5. Устанавливаем триггер «All Pages» на все страницы сайта.
  6. Сохраняем и публикуем.

Яндекс Метрика через Google Tag Manager

Решил по-быстрому начеркать, как установить счетчик Яндекс Метрики через Google Tag Manager.

Если вы пропустили прошлые серии про GTM, то вот. Сначала прочитайте, а потом возвращайтесь.

Единственный код, который вам надо вставить в шаблон сайт — это код GTM

Первый и последний раз

Все остальное: счетчики, консультанты, коллбэк-хантеры, пиксели — теперь все это можно устанавливать через одно место. И имя ему — GTM!

UPD: Код, который надо устанавливать в определенном месте, например, код кнопок репоста, все же придется вставлять по старинке вручную. Sorry.

Начнём

Заходим в Google Tag Manager. Надеюсь, рабочий Гугл-аккаунт у вас есть. Жмем “Создать аккаунт”.

Заполняем начальные поля.

Соглашаемся с условиями использования, проставляем все галочки.

Дальше GTM сгенерирует и предложить разместить код на сайте, чтобы все заработало. Вот это и будет тот самым последний и единственный код, который вам надо добавить. А все остальное уже силами «Гугл Таг Менеджера».

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

Готово! Видим основную рабочую панель перед собой (дашборд, если по-молодежному). В самом начале пути нас интересуют только три пункта слева:

  1. Теги
  2. Триггеры
  3. Переменные

Кратко пробежимся по основным понятиям своими словами и максимально доступно. Свою карьеру я начинал еще в начале 2000-х программистом и сисадмином, и мне часто приходилось на пальцах объяснять дамам из бухгалтерии основы компьютерной грамотности и устройство ПК. Так что терпения и таланта объяснять на пальцах у меня не занимать. Хе-хе. Приступим.

Читайте так же:
Счетчик dual с импульсным выходом

Теги — это действие, это глагол. Тег отвечает на вопрос «Что делать?».

Тег — это основная единица GTM, это код, которым вы дополняете возможности вашего сайта. Именно его будут видеть и запускать браузеры и боты. Вы, к сожалению (счастью?), нет. Все что вы увидите, когда воспользуетесь возможностью просмотра исходного кода (F12 на большинстве браузеров на Windows), это только код Google Tag Manager.

Таким образом, фиксируем одну из фишек GTM — никто не увидит, что вы разместили в исходный код и какие события отслеживаете.

Триггеры

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

Переменные

Переменные — это объекты, которые связывают действие и время. Это объекты, которые связывают теги и исходный код сайта. Переменные отвечают на вопрос «Что?», «С чем?», «Какая именно?». Переменные — это имена объектам и действиям, их может быть и будет несколько.

В Google Tag Manager много встроенных переменных. Не хочу сейчас заниматься их разбором, чтобы не забивать голову раньше времени, ибо мы потеряем суть. Мой метод — постигать новый опыт исключительно на практических рабочих моментах.

Сейчас просто примите это. Одна из любимых переменных, которая нам понадобится еще много раз — это пользовательская переменная. Это необъятные возможности по части расширения сайта и фиксирования любых событий. Разберем сложные рецепты в следующий раз, а сейчас нас интересует, как добавить Яндекс Метрику на сайт силами GTM.

Google Tag Manager не знает (якобы) про существование счетчика веб-статистики от Яндекса. Поэтому будем добавлять его в ручном режиме. Никаких предустановок. Начинам сначала и добавим новый тег. Выбираем слева «Теги» — «Создать».

Сразу назовем будущий тег, чтобы не путаться. Щелкнем по полю “триггеры”, чтобы выбрать, когда должен работать тег, а именно на всех страницах. Не забудьте сохранить, нажав кнопку «Добавить».

Осталось добавить код самой Яндекс Метрики в GTM. Жмем на оставшееся поле «Конфигурация тега». Видим встроенные теги. По большей части это продукты самой Google, а если промотать вниз, то и популярные западные сервисы, кои у нас не так сильно в почете.

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

Добавляем код счетчика Яндекс Метрики. Если вы не знаете откуда его берут, спрашивайте в комментариях, не стесняйтесь. Другие настройки не трогаем. Сохраняем.

Наш тег сформирован и настроен. Осталось его опубликовать, чтобы он заработал. Жмем «Отправить».

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

Если все сделано правильно, спустя пару часов проверьте свою статистику в Яндекс Метрике — данные должны собираться.

Но мы же профессионалы, поэтому воспользуемся предварительным просмотром (Debug-утилита прямо в самом Google Tag Manager). Заходим в основной дашборд и жмем «Предварительный просмотр». То что режим предварительного просмотра активирован показывает яркое оранжевое окно. Не заметить сложно.

Далее идем на сайт, для которого вы добавляли Яндекс Метрику и вуаля! Если все работает, то в появившейся панели Google Tag Manager, мы увидим ваш новый тег в списке тегов GTM этой страницы.

Не забудьте выключить предварительный просмотр! А то панель GTM на вашем сайте будет вас преследовать.

Читайте так же:
Если сработал счетчик knox

В следующей серии добавим отслеживание целей сайта на самые распространенные события в Яндекс Метрике (через GTM).

Яндекс.Метрика в GTM

С появлением Google Tag Manager стало намного проще устанавливать на сайт множество необходимых маркетологам тегов. Равно как упростилась и реализация отслеживания различных типов взаимодействия пользователей с контентом сайта. Многие из вас уже убедились в том, что диспетчер тегов Google весьма плотно интегрирован с Google Analytics и позволяет с помощью нехитрых манипуляций передавать различные данные в эту систему. Однако его функционал не ограничен только аналитиксом, и данные без особого труда можно отправлять и в другие системы веб-аналитики. Например, настроив событие на успешное заполнение формы в Analytics, легко перенести эти же настройки на другую систему, например Яндекс.Метрику. Сегодня мы поговорим о том, как отследить различные действия посетителей на сайте в Метрике с помощью GTM. Для начала нам необходимо установить код Яндекс.Метрики на все страницы сайта с помощью пользовательского тега HTML в Google Tag Manager. О том, как это сделать, я писала в статье “Учимся работать в GTM” (пункт “Установка Яндекс.Метрики, ремаркетинга FB, VK и других пользовательских тегов в GTM”).

Настройка целей в Яндекс.Метрике посредством диспетчера тегов Google

2.Добавить триггер активации. В качестве триггера активации добавляем событие успешной отправки формы. Подробно настройку триггеров для кликов/ccылок, форм и других взаимодействий я описывала в статье “Учимся работать в GTM”. 3.Создать цель в Яндекс.Метрике.

В качестве типа цели указываем “JavaScript событие”.

4.Проверить корректность работы цели. Для того, чтобы проверить, работает ли настроенная цель, можно добавить к URL страницы сайта параметр _ym_debug со значением 1.

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

После выполнения настройки данные по целям в Яндекс.Метрике доступны в отчете “Конверсии”, в стандартных и пользовательских отчетах, которые построены по визитам. Также цели могут использоваться в Яндекс.Директе и Яндекс.Аудиториях. Справочные материалы по отслеживанию целей в Яндекс.Метрике.

Настройка отправки целей с передачей пользовательских параметров

Проверить поступление данных можно, также воспользовавшись консолью

и непосредственно в отчете “Параметры визитов”.

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

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

нужно применить конкатенацию — провести объединение строковых значений и значений переменных. В данном случае нам необходимо указать значения переменных <> и <> и логически связать их в одно предложение. Конкатенация строковых значений в JavaScript осуществляется при помощи оператора “+”.

Передача параметров визитов в произвольный момент времени

2.В качестве триггера используем пользовательское событие “Scroll to”, детально описанное тут. Все! Радуемся дополнительным данным в интерфейсе Яндекс.Метрики=)

Отмечу, что при настройке передачи параметров визитов методом params тоже можно представлять информацию в удобном для вас виде (например, с помощью иерархической структуры данных или конкатенации значений переменных и текстового описания, которые я описывала ранее). Справочные материалы по параметрам визитов в Яндекс.Метрике.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector