Как отслеживать видео с помощью Google Analytics и Google Tag Manager

Если вы размещаете на сайте видео c Ютуб и хотите отслеживать взаимодействие пользователя с роликом, то этот материал поможет разобраться с настройкой основных метрик вовлеченности. Статья будет полезна маркетологам и веб-аналитикам.

Видеоконтент уже много лет стремительно набирает популярность. Сегодня видеоролики стали настоящим драйвером продаж в интернет и играют важнейшую роль в продвижении товаров, услуг и бренда. По итогам 2019 года бюджет на онлайн-видео в Рунете приблизился к 15 млрд руб. А темпы роста показывают 20-30% ежегодно.

Объем рекламы по типу контента в 2019 году

Качественный анализ взаимодействия пользователей с видео позволяет правильно выстроить будущую стратегию продвижения и ответить на ключевой вопрос: Удалось ли получить желаемый бизнес-эффект от онлайн-видео.

К сожалению, по умолчанию, получить данные по видео прямиком в Google Analytics не получится. Часть взаимодействий на сайте попросту не отслеживаются. Однако унывать рано — на помощь маркетологу в решение нестандартных задач приходит Google Tag Manager.

В Google Tag Manager можно отслеживать различные взаимодействия с видео, а именно:

  1. Запуск и завершение просмотра ролика;
  2. Приостановку, перемотку, буферизацию;
  3. Прогресс просмотра в процентах;
  4. Продолжительность просмотра в секундах;
  5. Видимость видео в окне браузера.

Важно! В этой статье описан метод отслеживания роликов из YouTube. Если вы встраиваете видео другого проигрывателя, вам нужно использовать кастомные скрипты.

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

Чтобы настроить отслеживание событий, мы создадим тег и триггер в Google Tag Manager. Но сначала подключим и настроим несколько переменных.

Шаг №1. Настройка стандартных переменных

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

  1. Перейдите в аккаунт Google Tag Manager и выберите нужный контейнер;
  2. В левом меню выберите Переменные и нажмите кнопку Настроить;
  3. В появившемся списке установите флажок напротив каждой переменной в блоке Видео.

Настройка встроенных переменных

Google Tag Manager добавил 8 переменных уровня данных:

  1. Video Provider — название платформы видео (YouTube);
  2. Video Status — статус видео в момент регистрации события. Может быть: Start, Complete, Pause, Seek, Buffering, Progress;
  3. Video URL — URL-адрес, ссылку на видео YouTube (https://www.youtube.com/watch?v=…);
  4. Video Title — название видео из заголовка;
  5. Video Duration — общая продолжительность видео (в секундах);
  6. Video Current Time — текущее время видео (в секундах), в которое произошло событие;
  7. Video Percent — значение воспроизведенного видео (в процентах) на момент, когда сработало событие;
  8. Video Visible — значение видимости видео в окне браузера. Если видео отображается в области просмотра, результатом будет значение true, если же в другой области (например, в нижней части страницы, на фоновой вкладке) – false.

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

Шаг №2. Создание триггера

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

  1. Перейдите в раздел Триггеры в левой части главного меню;
  2. Нажмите кнопку Новый;
  3. Выберите из списка тип триггера Видео Youtube в блоке Взаимодействия пользователей;

Создание нового триггера Видео

Пройдемся по настройкам, так как они являются ключевым элементов в работе сценария:

  • Начало (Start) – пользователь запустил просмотр видео;
  • Завершение (Complete) – пользователь досмотрел видео до конца;
  • Приостановка, перемотка, буферизация (Pause, Seeking, Buffering) – пользователь останавливает, перематывает видео или когда происходит буферизация;
  • Ход просмотра (Progress) – пользователь проходит процентный (25%, 50%, 75%) или временный порог в секундах (30, 60, 120, 360 и т.д). Целые числа указываются через запятую, как на скриншоте ниже.

Настройка триггера Видео Youtube

Что отслеживать, зависит только от задач — если нужно регистрировать факт запуска видео пользователем, то установите галочку на Начало. Если важно отслеживать факт досмотра видео до конца — то выберите Завершение.

Если хотите узнать сколько по времени пользователи взаимодействовали с видео, то выберите Ход просмотра и укажите процентные значения — 25%, 50%, 75% или значения в секундах, что будет соответствовать продолжительности просмотра ролика.

Триггер сработает и в случае перемотки — если установить маркер на конец ролика, то в аналитику уйдет информация, что пользователь просмотрел 75%, например.

В блоке Условия активации триггера задаются различные правила срабатывания. Можно указать отслеживание видео только в конкретных разделах (на примере выше мы отслеживаем видео в разделе «О компании»).

Для того, чтобы в Google Analytics передавать как можно больше информации одним тегом, создадим пользовательскую переменную.

Шаг №3. Создание пользовательской переменной

Возвращаемся в раздел с переменными и создаем новую пользовательскую переменную с типом Таблица поиска.

Настройка переменной Таблица поиска

Принцип работы Таблицы поиска

  1. Задаем входную переменную — {{Video Status}};
  2. Далее идет проверка по таблице поиска и входным данным;
  3. Если переменная {{Video Status}} принимает одно из значений из таблицы (start, pause, progress и т.д.), то входная переменная {{Video Status}} примет значение из поля Результат. В этих полях указываем названия по своему усмотрению;
  4. Если значение переменной {{Video Status}} не найдено среди таблицы поиска, то будет использовано значение по умолчанию. В нашем примере — {{Video Status}}.

Примечание: напротив значения progress рекомендую прописать конструкцию: Просмотрел {{Video Percent}}%. Так мы передадим показатель процентного порога в понятном читаемом виде.

Шаг №4. Создание и настройка тега

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

  1. В левом меню переходим в раздел Теги;
  2. В правом верхнем углу нажимаем на кнопку Новый;
  3. Из представленного меню выбираем тип тега Google Analytics — Universal Analytics.

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

Теперь настраиваем передачу события в Google Analytics.

  1. В выпадающем списке выберите «Событие»;
  2. В поле Категория введите «Youtube» (или что-то подобное);
  3. В поле Действие щелкните значок, чтобы выбрать переменную, созданную на третьем шаге. В нашем случае это пользовательская переменная {{video_action}}.
  4. В поле Ярлык нажмите на иконку и выберите подключенные ранее переменные {{Video Title}} и {{Video URL}} для передачи названия и ссылки на видео YouTube.

Настройка тега Google Analytics

Готово! Теперь, когда все настройки на стороне GTM завершены, самое время опубликовать и отправить изменения на сайт.

Шаг №5. Отслеживание событий в Google Analytics

Корректность передачи события можно проследить в Google Analytics с помощью стандартного отчета В реальном времени -> События. Перейдите на страницу с видео и запустите ролик.

Фиксируются новые события?

События в отчете Реального времени

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

Шаг №6. Настройка целей в Google Analytics

Цели нам помогут строить более обогащенные отчеты и создавать пользовательские сегменты в Analytics.

  1. Перейдите в раздел Администратор вашего Google Analytics;
  2. Выберите подходящее представление и перейдите в раздел Цели.

Добавление цели в Google Analytics

Далее добавляем новую цель.

  1. Нажмите на кнопку Кнопка новая цель
  2. На первом шаге выберите Собственная цель;
  3. На втором — укажите название цели и выберите тип Событие;
  4. На последнем шаге указываем Категорию и Действие события (значения берем из условий шага №4 в настройках тега GTM).

Настройка цели для Ютуб

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

Отчет по выполненным целям

В отчете URL целей можно посмотреть на каких страницах сайта пользователи выполнили цели.

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

Остались вопросы?

Как видите, сложного ничего нет. Отслеживание просмотров не потребует много времени. Надеюсь, мне удалось подробно и понятно описать процесс передачи статистики в Google Analytics. Однако, если что-то из статьи показалось сложным, то пишите вопросы ниже, попробуем разобраться вместе.

Как настроить передачу виртуальной страницы в Яндекс.Метрика и Google Analytics с помощью Google Tag Manager

Статья научит передавать данные по микроконверсиям в системы Google Analytics и Яндекс.Метрика с использованием виртуальных страниц. Материал расширит знания о применениях Google Tag Manager и будет полезен для интернет-маркетологов и начинающих веб-аналитиков.

Для каких целей используют виртуальную страницу?

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

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

  • взаимодействие с кнопками и формами;
  • заполнение полей в длинных формах;
  • взаимодействие с квиз-механиками и табами;
  • отправку данных и заявок;
  • отслеживание страниц с технологией AJAX;
  • построение различных последовательностей.

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

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

Пример несложной квиз-механики на сайте
Пример реализации quiz-механик на странице

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

Стандартные методы передачи события

Настроить передачу виртуальной страницы в Google Analytics можно стандартным JavaScript кодом — просто «вешаем» на каждую кнопку следующую конструкцию, которая отправит просмотр виртуальной страницы по клику на кнопку:

ga('send', 'pageview', /virtual/page);

здесь: send, pageview – стандартные команды библиотеки analytics.js;
/virtual/page – путь виртуальной страницы, заданный вручную.

Для передачи события в Метрику использовать потребуется такую строчку кода:

yaCounterXXXXXXXX.hit('/virtual/page');

здесь: XXXXXXXX — номер вашего счетчика в Метрике;
/virtual/page — виртуальный адрес страницы, заданный вручную.

Код должен добавляться к элементу и инициировать отправку просмотра страницы /virtual/page при клике на элемент.

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

Пример выше сложен в реализации. Поэтому предлагаю перейти к рассмотрению более гибкого и простого способа — использую Google Tag Manager. Вам не придется копаться в коде страницы и настраивать сложные конструкции. Освоить работу GTM под силу каждому интернет-маркетолог или начинающему веб-аналитику.

Передача виртуальной страницы в Google Analytics

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

Настройка триггера

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

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

Выбор сценария на странице
Quiz-механика в рассматриваемом примере

Выполняем первые настройки на стороне Google Tag Manager.

  1. Перейдите в аккаунт Google Tag Manager и авторизируйтесь;
  2. Выберите контейнер и перейдите в Рабочую область;
  3. В меню слева выберите пункт Переменные;
  4. Нажмите кнопку Настроить;
  5. В конфигураторе настройки стандартных переменных включаем переменные в блоке Клики (если они до сих пор еще не активны).

Подключение стандартных переменных

  1. Теперь переходим в раздел Триггеры;
  2. Нажмите на кнопку Создать;
  3. Из списка доступных триггеров выберите Клик – Все элементы;
  4. В условиях активации триггера указываем правило Click Text – равно – ДЛЯ МЕНЕДЖЕРА;
  5. Указываем название для триггера и сохраняем триггер.

Создание триггера по клику на элемент

Важно! Название кнопки должно являться уникальным значением и не использоваться на других элементах на сайте. В противном случае потребуется «привязаться» к уникальному значению class или id.

Настройка тега

Как мы уже поняли, триггер сообщает, когда и при каких условиях должно происходить срабатывание тега. Тег говорит Google Tag Manager, что именно нужно делать.

Для отправки события в Google Analytics мы можем воспользоваться стандартным тегом Google Аналитика — Universal Analytics.

  1. Переходим в раздел Теги;
  2. Нажимаем на кнопку Создать;
  3. Придумываем понятное название для тега, например UA – Click – Manager;
  4. Выбираем из списка Google Аналитика – Universal Analytics;
  5. В настройках тега включаем галочку Включить переопределение настроек в этом теге;
  6. Указываем идентификатор отслеживания Google Analytics;
  7. Раскрываем вкладку Дополнительные настройки > Поля, которые необходимо задать;
  8. Добавляем новое +Поле и задаем условие Название поля — page и Значение /page/home/manager.

Создание нового тега GA

Здесь page — будет являться признаком передаваемого события, т.е виртуальной страницей, а /page/home/manager — виртуальный адрес нашей страницы, который заполняется в свободном формате. Этот адрес будет передаваться в системы веб-аналитики, по нему мы и настроем наши события на следующем шаге.

Для завершения настройки нам осталось связать тег с ранее созданным триггером. По итогу получиться должно следующее.

Конечная настройка тега для Google Analytics

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

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

Настройка цели в Google Analytics

Теперь на стороне Google Analytics необходимо проследить поступление виртуальной страницы и настроить цель.

В Аналитикс есть стандартный отчет В режиме реального времени, которые мгновенно отследит взаимодействие с кнопкой. Откройте отчет и перейдите в один из внутренних отчетов Контент. В этот отчет попадают все активные страницы на данную минуту.

Отслеживание контента в режиме реального времени

Теперь выполните взаимодействие с вашим элементом — переключите вкладки внутри таба. Если все настроено корректно, то в списке страниц появится адрес передаваемой виртуальной страницы.

Важно! Убедитесь, что Представление в Google Analytics не фильтрует трафик по вашему IP-адресу. Иначе вы не увидите своих действий в отчете.

Теперь создадим новую Цель в Google Analytics.

  1. Перейдите во вкладку Администрирование;
  2. В нужном Представление выберите вкладку Цели;
  3. Нажмите на кнопку +Цель;
  4. На первом шаге «Установка цели» выберите Собственная цель;
  5. На шаге «Описание цели» укажите название цели и выберите тип события Целевая страницы;
  6. На третьем шаге «Подробные сведения о цели» указываем условие Равно > /page/home/manager;
  7. Сохраняем цель.

Добавление цели в Google Analytics

С этого момента данные будут накапливаться в системе. Вы всегда можете открыть отчет Поведение > Контент сайта > Все страницы и посмотреть совершенные действия за требуемый период времени, а последовательность действий просмотреть в отчете Конверсии > Цели > Визуализация последовательностей.

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

Передача виртуальной страницы в Яндекс.Метрику

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

  1. Возвращаемся в Менеджер тегов и открываем раздел Теги;
  2. Нажимаем на кнопку Создать;
  3. Придумываем название для тега, например YM – Click – Manager;
  4. В списке выбираем тег с типом Пользовательский HTML;
  5. Добавляем в поле специальный JavaScript код, который будет передавать данные о просмотре страницы в Метрику.
<script type="text/javascript">
      yaCounterXXXXXXXX.hit('/page/home/manager')
</script>

Здесь, XXXXXXXX — код счетчика Метрики в отчеты которого передается событие, а /page/home/manager — адрес виртуальной страницы

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

Настройка тега Яндекс.Метрики

Сохраняем и опубликовываем на сервер настройки.

Настройка цели в Яндекс.Метрика

На следующем шаге переходим в Яндекс.Метрику и в разделе Настройки открываем вкладку Цели. Здесь нам необходимо добавить новую цель типа Посещение страницы и указать URL-адрес виртуальной страницы с условием url: содержит. В нашем примере используем адрес – /page/home/manager.

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

К сожалению, в Яндекс.Метрика вы не сможете проследить в режиме реального времени корректность передачи данных виртуальной страницы. Первые данные можно увидеть только в стандартном отчете Конверсии — статистика подтянется в отчет лишь через 3-5 минут, не раньше.

Отчет по совершенным конверсиям в Яндекс.Метрика

На этом наш рассказ окончен.

Мы подробно рассмотрели по шагам принципы настройки виртуальной страницы с помощью GTM и передачу данных в системы Яндекс.Метрика и Гугл Аналитикс.

Если у вас остались какие-то вопросы, то задавайте обязательно в комментариях ниже или пишите на почту info@konstantinbulgakov.com.

Как установить пиксель и настроить ретаргетинг в Facebook с помощью Google Tag Manager

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

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

Цель этого материала — представить этапы работы с Facebook в формате простых и последовательных шагов, которые помогут сэкономить время и быстрее разобраться в настройках пикселя и настроить сегменты аудиторий ретаргетинга.

Создание и установка пикселя

Пиксель Facebook — это фрагмент JavaScript кода, который позволяет отслеживать посетителей сайта, измерять результативность, оптимизировать рекламу и создавать аудитории для рекламных кампаний.

Пример кода пикселя:

<!-- Facebook Pixel Code -->
<script>
 !function(f,b,e,v,n,t,s)
 {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
 n.callMethod.apply(n,arguments):n.queue.push(arguments)};
 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
 n.queue=[];t=b.createElement(e);t.async=!0;
 t.src=v;s=b.getElementsByTagName(e)[0];
 s.parentNode.insertBefore(t,s)}(window, document,'script',
 'https://connect.facebook.net/en_US/fbevents.js');
 fbq('init', '1864293041984268');
 fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=1864293041984268&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Пиксель позволяет:

  1. Убедиться, что вашу рекламу видят нужные люди, которые посетили конкретную страницу или выполнили определенное действие на сайте.
  2. Увеличить продажи, автоматически настроив ставки, чтобы охватить людей, которые с наибольшей вероятностью выполнят нужное действие (например, совершат покупку).
  3. Измерить результативность рекламы. Отслеживайте события, которые происходят в результате просмотра рекламы, чтобы лучше понимать, как она влияет на поведение людей.

Установка пикселя ничем не отличается от установки счетчика Яндекс.Метрики или кода отслеживания Google Analytics. Если у вас есть доступ к коду сайта, вы можете сами добавить пиксель Facebook перед закрывающим тегом </head>.

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

Для начала создадим пиксель отслеживания в рекламном аккаунте Facebook.

  1. Откройте рекламный аккаунт и выпадающем окне в блоке Events Manager выберите Пиксели.

Пиксели в Рекламном аккаунте Facebook

Теперь выполните последовательность действий:

  1. Нажмите Создать пиксель;
  2. Укажите название пикселя и нажмите Продолжить;
  3. Введите URL сайта и нажмите Продолжить.

Отлично! После создания пикселя Facebook вы можете разместить полученный код на своем сайте. Теперь самое время воспользоваться Google Tag Manager и выполнить следующие несложные настройки:

  1. Перейдите в аккаунт Google Tag Manager и авторизируйтесь;
  2. Выберите контейнер и перейдите в рабочую область;
  3. В меню слева выберите пункт Теги;
  4. Нажмите на кнопку Создать;
  5. Из списка доступных тегов выберите тег типа Пользовательский HTML;
  6. В пустое поле вставьте код пикселя полученного на предыдущем шаге;
  7. В нижнем блоке настроек тега добавьте стандартный триггер — All pages, который будет активировать пиксель на всех страницах сайта;
  8. Придумайте понятное название для нового тега, например FB — PIXEL и сохраните настройки.

В итоге должно получиться следующее:

Настройка конфигурации тега

Как проверить работу пикселя

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

Если все настроено корректно, то вы увидите такое сообщение:

Статус работы пикселя

Поздравляю! Первый этап выполнили, теперь нужно настроить события, которые помогут создать аудитории ретаргетинга.

Типы событий в Facebook

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

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

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

Ниже приведен пример кода сайта со стандартными или специально настроенными событиями:

Структура кода Facebook

Иерархия здесь имеет три уровня вложенности:

  • Первый уровень: Код на странице вашего сайта.
  • Второй уровень: Базовый код пикселя Facebook добавленный на страницу.
  • Третий уровень: Код стандартного или специально настроенного события. На скриншоте показано событие добавления товара в корзину, которое является стандартным.

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

Чтобы отследить посещение страницы с благодарностью за подписку https://site.ru/thanks, нам достаточно добавить несложный код на нужную страницу:

<script>
   fbq('track', 'ViewContent');
</script>

Код можно разместить вручную на страницу (как показано на предыдущем шаге на скриншоте) или воспользоваться инструментом Google Tag Manager, активируя работу тега при просмотре страницы  /thanks.

Фейсбук будет получать событие ViewContent с URL адреса /thanks, что и будет являться сигналом к тому, что событие на странице было успешно выполнено.

Надеюсь, что это понятно.

С полным списком кодов отслеживания для стандартных событий познакомьтесь по ссылке.

Настройка события с помощью GTM

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

Для примера — у нас есть сайт на конструкторе Tilda. Нужное настроить отправку события отправки лида с контактной формы. Т.е другими словами — пользователь заполняет popup на сайте со своими персональными данными и отправляет информацию.

Всплывающая форма на сайте при отправке данных пользователя передает специальный параметр формы в Уровень данных (dataLayer) — submit_form187454852. В данном случае мы сможем привязать отправку формы именно к передачи этого параметра.

Запомним параметр и возвращаемся в Google Tag Manager.

  1. Переходим в раздел Триггеры и создаем новый;
  2. Выбираем триггер с типом Пользовательское событие;
  3. В настройках триггера указываем строчку submit_form187454852 в поле Имя события;
  4. Указываем название для триггера и сохраняем.

Настройка триггера Пользовательское событие

Далее создаем новый тег.

  1. Переходим в раздел Теги и создаем новый;
  2. Добавляем тег с типом Пользовательский HTML;
  3. В пустое поле добавляем код отслеживания для такого события:
<script>
   fbq('track', 'Lead');
</script>

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

Создание тега передачи события о лидах

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

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

Ads Manager — это инструмент Facebook, с помощью которого вы можете создавать рекламу и управлять аудиториями. Можно просматривать статистику собранную пикселем и вносить изменения в настройки кампаний.

Чтобы открыть Ads Manager, перейдите по ссылке https://www.facebook.com/ads/manager.

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

  1. Перейдите в Ads Manager;
  2. В выпадающем меню выберите Все инструменты;
  3. В блоке Ресурсы выберите Аудитории.

Аудитории в Ads Manager

  1. На странице нажмите кнопку Создать аудитории и выберите Индивидуализированная аудитория.
  2. Используйте собственные источники — Сайт. Позволит использовать данные, которые были собранные пикселем именно с сайта.
  3. Задайте правила и условия для новой аудитории — правила бывают стандартные и для событий пикселя. Добавьте в раздел нужные вам правила.
  4. Добавьте разделы правила, включающие и исключающие людей. Для каждой аудитории можно настроить до 5 разделов правил.
  5. Укажите понятное название для пользовательской аудитории и сохраните настройки.

Добавление аудитории

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

Остались вопросы?

Задавать ваши вопросы прямо на этой странице — в специальной форме ниже. Или просто пишите комментарии на адрес почты info@konstantinbulgakov.com.

Как отключить показ рекламы на компьютерах в Яндекс.Директ и Google Ads

В статье рассказывается о методах отключения показов контекстной рекламы для пользователей с десктопов на платформах Яндекс.Директ и Google Реклама. Информация пригодится специалистам по контексту и маркетологам.

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

Уверен, что в настройках своих рекламных кампаний вы часто ограничиваете показы рекламных объявлений для мобильного трафика. И зачастую это обосновано:

  • Плохая верстка адаптивных страниц;
  • Долгая загрузка и отрисовка контента;
  • Нецелевой трафик льющийся из мобильных приложений;
  • Низкий процент конверсий в продажу (тесно переплетается с предыдущими тремя пунктами).

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

В этом материале мы отключим трафик с ПК в рекламных кампаниях Google Реклама и Яндекс.Директ.

Отключение показов в Яндекс.Директ

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

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

1. Зададим в настройках геотаргетинга понижающую корректировку ставок -90% для нашего региона показов.

Корректировка ставок по региону

2. Затем в корректировках повысим ставку для мобильных устройств на 1000%.

Корректировка ставок для мобильных устройств

Мы отключили показы по нашему региону для всех пользователей (в том числе с ПК), а в блоке с корректировкой увеличили ставку на 1000% для мобильного трафика.

Чтобы стало понятнее, разберем математику на примере.

Расчет цены клика для мобильных устройств=(100-90)*1000%

Если ставка 100 рублей, то понижение по региону на -90% превратит её в 10 рублей. И повышение этой ставки на 1000% вернет её к значению в 100 рублей, но теперь уже только для мобильной аудитории.

Отключение показов в Google Ads

С Google Ads ситуация проще. Функционал системы настолько продуман, что не нужно действовать костыльными методами и изобретать велосипед. Достаточно на уровне кампании или группы объявлений скорректировать ставки для различных типов устройств.

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

Для полного отключения задаем условие Уменьшить на -100%.

Отключение показов рекламы на ТВ

По такому же принципу можно отключить показы на планшетах или на смарт ТВ.

Корректировка по устройствам в Google Ads

Важно! Вы можете не только отключать показы, указывая понижающую корректировку -100%, но и повышать ставку для устройств, которые имеют высокий коэффициент конверсий.

Узнать какие устройства лучше конвертируются в заказы и обращения не сложно. Достаточно обратиться к стандартному отчету системы веб-аналитики.

Разберем типовой случай на примере Яндекс.Метрики и сформируем отчет по устройствам. Определим устройства трафик с которого приносит не только больше конверсий, но и лучше конвертируется в целевые действия.

  1. Переходим в аккаунт Яндекс.Метрики;
  2. Открываем отчет по устройствам Отчеты — Технологии — Устройства;
  3. Из списка доступных целей выбираем цель и получаем отчет для анализа.

Отчет по конверсии с устройств в Метрике

В моем примере видно, что трафик с ПК (0,92%) почти вдвое конвертируется лучшем, чем со Смартфоном (0,54%) и Планшетов (0,51%).

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

Остались вопросы?

Оставляйте комментарии в форме ниже или пишите вопросы на адрес электронной почты info@konstantinbulgakov.com.

Как установить Google Tag Manager: инструкция и возможности инструмента

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

Ребята, эта статья зрела! Мне поступает много писем, в которых вы задаете базовые вопросы по работе с GTM. Поэтому я решил собрать все в одном месте и предоставить ответы коротко и по делу.

Что такое Google Tag Manager

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

Google Tag Manager помогает объединить коды отслеживания, скрипты, пиксели различных сервисов в рамках единого интерфейса. Не придется заходить отдельно в Facebook или Google Otimaze чтобы обновить код на сайте, все можно сделать в одном месте.

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

Как работает передача данных через Google Tag Manager

Однако, на мой взгляд, основная ценность Менеджера тегов совсем в другом —  отслеживание и передача данных, которые нет возможности увидеть напрямую в Google Analytics или Яндекс.Метрике, а именно:

  1. Отслеживание взаимодействия с отдельными элементами страницы (слайдеры, поля и кнопки, социальные взаимодействия, табы и списки, изображения, фильтры и т.д);
  2. Отправка форм;
  3. Клики по ссылке или элементу;
  4. Просмотр контента;
  5. Глубина скроллинга страницы;
  6. Взаимодействия с видеоконтентом;
  7. Настройка онлайн-консультантов и других виджетов;
  8. Взаимодействие с картами;
  9. Отслеживание всплывающих окон;
  10. Отправка события по таймеру;
  11. Копирование контента — текста или email;
  12. Скачивание PDF, DOCX, PPTX, XLSX;
  13. Настройка подмены контента на сайте, используя различные правила и условия.

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

Чем Google Tag Manager поможет маркетологу

Google Tag Manager серьезно развязывает руки интернет-маркетологу.

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

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

А если требуется настроить подмену контента по какому-либо параметру на сайте, то здесь маркетолог выигрывает однозначно. Настроив GTM для выполнения своих задач вы сбережете от 20 до 50 часов рабочего времени программисту.

Google Tag Manager можно с легкостью интегрировать с различными CMS и конструкторами.

Для WordPress самый простой способ, на мой взгляд, добавить javascript код прямо в тему сайта. Можно обойтись без ковыряния в коде — просто установите и настройте плагин Google Tag Manager for WordPress. По такому же принципу происходит настройка для сайтов на Битрикс.

Для Тильды все еще проще. Вы можете настроить Google Tag Manager прямо в настройках сайта в разделе Аналитика & SEO, вставив Google Tag Manager ID в специальное поле и сохранив изменения.

Настройка GTM в Тильде

Важно! После изменений обязательно опубликуйте все страницы сайта повторно. Необходимо, чтобы Тильда прописала код Google Tag Manager на каждой странице.

Какие навыки нужны для работы с Google Tag Manager

Согласно Google, «Менеджер тегов помогает сделать управление тегами простым, легким и надежным, позволяя маркетологам и вебмастерам размещать теги сайтов в одном месте».

Google говорит, что это «простой» инструмент, который любой маркетолог может использовать без участия со стороны веб-разработчика.

Да, все действительно так. Однако Google Tag Manager не «прост» в использовании без каких-либо технических знаний или обучения. Вы должны иметь некоторые технические знания, чтобы понять, как настроить теги, триггеры и переменные.

Для примера, если вы настраиваете копирование элемента на странице, то вам просто не обойтись без базовых знаний в HTML и CSS, так как для нужного элемента потребуется определить уникальный CSS-селектор.

А иногда даже самостоятельно доработать HTML тег, указать нужные для отслеживания атрибуты и доработать код разметки.

Для настройки отслеживания событий в Менеджере тегов Google, вам понадобятся некоторые знания о том, что такое «события», как работает Google Analytics, какие данные вы можете отслеживать с событиями, как выглядят отчеты в Google Analytics и как создаются категории, действия и ярлыки.

Как устроен Google Tag Manager

Менеджер тегов Google состоит из трех основных частей:

  1. Теги: фрагменты JavaScript или отслеживания пикселей;
  2. Триггеры: сообщают GTM, когда и при каких условиях следует запустить тег;
  3. Переменные: специальные параметры с изменяющимися значениями, которые применяются в тегах и триггерах. В триггерах они служат в качестве условий активации в фильтрах, а в тегах — для получения динамических значений в заданных параметра.

О каждом из перечисленных элементов поговорим подробнее ниже.

Что такое теги?

Теги — это фрагменты кода или пиксели отслеживания различных сторонних веб-сервисов.

Тег говорит Google Tag Manager, что нужно делать.

Примеры общих тегов:

  • Универсальный код отслеживания Google Analytics;
  • Код ремаркетинга Google Ads;
  • Код отслеживания конверсий Google Ads;
  • Код отслеживания Яндекс.Метрики;
  • Пиксели ВКонтакте и Facebook;
  • Код проверки гипотез Google Optimize.

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

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

Что такое триггеры?

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

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

Что такое переменные?

Переменные — это дополнительная информация, которая может понадобиться GTM для обработке тега и триггера.

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

  • Клики по кнопке или любому элементу на странице;
  • Доступность и видимость элемента на экране;
  • Подмена контента на странице с учетом источника трафика или действия пользователя;
  • Просмотр YouTube видео и т.д.

Однако, если вам требуется расширить функционал, то можно создавать собственные переменные. Самая простая переменная, которую вы можете создать в GTM, является идентификационный номер отслеживания Google Analytics UA.

Создание переменной c идентификатором отслеживания Google Analytics

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

Как настроить аккаунт в Google Tag Manager

Для начала следует убедиться, что в исходном коде сайта еще не установлен код GTM. Если его пока нет, то самое время установить.

Предлагаю коротко разобрать основные настройки и создать аккаунт и первый контейнер.

  1. Перейдите в Google Tag Manager и используйте для авторизации ваши данные в Google;
  2. В верхнем правом углу нажмите на кнопку Создать аккаунт;
  3. В появившейся форме укажите название нового аккаунта (например, можно использовать название компании или проекта);
  4. Выберите страну, например Россия;
  5. В настройках создания контейнера укажите имя контейнера (любое, например домен сайта);
  6. В настройках целевой платформы выберите Веб-сайт;
  7. Для мобильных приложений используйте Firebase SDK для Android и iOS.
  8. Нажмите кнопку Создать.

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

При первой загрузке контейнера вы увидите приглашение добавить фрагмент кода на сайт или начать работу с Менеджером тегов в рамках SDK для выбранной платформы. Вы можете установить фрагмент кода сразу или нажать ОК, чтобы сделать это после настройки контейнера.

Как добавить контейнер в существующий аккаунт

  1. В Менеджере тегов нажмите Аккаунты а затем Ещё рядом с названием нужного аккаунта;
  2. Выберите Создать контейнер;
  3. Выберите тип ресурса и нажмите Создать.

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

Установка контейнера

  1. В Менеджере тегов откройте раздел Рабочая область;
  2. Вверху страницы вы увидите идентификатор контейнера в формате GTM-XXXXXX;
  3. Нажмите на идентификатор;
  4. Скопируйте и вставьте фрагменты кода на свой сайт;
  5. Разместите верхний фрагмент кода (начинающийся со <script>) в разделе <head> веб-страницы. Желательно сделать это как можно ближе к открывающему тегу <head>, но после деклараций dataLayer;
  6. Разместите нижний фрагмент кода (начинающийся с <noscript>) сразу после тега <body>.

Готово! Теперь давайте на двух примерах попробуем разобраться с основными принципами работы GTM — настроим передачу целей в Google Analytics и Яндекс.Метрика.

Установка кода отслеживания Google Analytics

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

  1. Войдите в аккаунт Менеджера тегов и перейдите в раздел Теги.
  2. Нажмите красную кнопку Создать и задайте название для нового тега. Например, Отслеживание Google Analytics.
  3. Нажмите Конфигурация тега и выберите тип тега Google Аналитика — Universal Analytics.
  4. В поле Идентификатор отслеживания укажите номер Кода отслеживания Google Analytics в формате UA-XXXXXXXX-X.
  5. Поле Тип отслеживания оставляем Просмотр страницы.

Установка кода отслеживания Google Analytics на все страницы сайта с помощью GTM

Теперь переходим к настройке триггера.

  1. Нажмите ниже на блок триггеры и выберите триггер, который будет активировать созданный тег Google Analytics.
  2. Единственный триггер доступным нам по умолчанию — All Pages (Все страницы).
  3. Выберите его и нажмите Сохранить в верхней правой части экрана.

Настройка триггера Все страницы

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

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

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

Зайдите в свой аккаунт Google Tag Manager и выберите нужный контейнер.

  1. Перейдите в раздел Теги и создайте новый тег;
  2. Выберите тип тега — Пользовательский HTML;
  3. В пустую область вставьте код отслеживания Яндекс.Метрики;
  4. В нижнем блоке Триггеры выберите доступный триггер All Pages (Все страницы).;
  5. Укажите понятное название для нового тега;
  6. Нажмите Сохранить.

Получится такая настройка.

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

Триггер активирует работу тега GTM с кодом счетчика и данные о посещениях пользователей с сайта передаются в Метрику.

Выводы

На этом все, друзья.

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

Мы разобрали несколько простых примеров, которые позволили вам применить полученную информацию сразу на своих проектах.

Я надеюсь вам удалось прокачать ваши знания и расширить представление об Google Tag Manager. Оставляйте комментарии ниже, читателям будет интересно узнать о вашем опыте.

Ну и конечно, не забывайте делиться ссылкой на материал с коллегами)

Помогла статья?

Если остались вопросы, то пишите на адрес электронной почты info@konstantinbulgakov.com. Будем разбираться!