на сайт нужно установить код счетчика mytarget через gtm какой тип тега будем использовать
Установка пикселя [email protected] на сайт с помощью Google Tag Manager
Второй материал из серии про установку пикселей соцсетей через Google Tag Manager. В нем специалист по контекстной рекламе Mello Андрей Моисеев объясняет, как настроить и установить пиксель для запуска ретаргетинга в myTarget.
Пиксель [email protected] для myTarget позволяет собрать аудиторию сайта, рекламной кампании в сторонней сети или системе — там, где нет возможности использовать полный код счетчика [email protected] Собрав аудиторию, мы можем использовать ее для ретаргетинга в myTarget.
В этом материале мы разберемся с установкой пикселя myTarget на сайт через Google Tag Manager. Всего будет три этапа:
Создание пикселя [email protected]
Для работы с пикселем:
1. В myTarget во вкладке «Список клиентов» выбираем нужного нам клиента.
Выбор клиента
2. На верхней панели выбираем «Аудитории», слева в списке находим «Пиксели [email protected]», заполняем поля («Имя» и «Счетчик») и нажимаем на кнопочку «Создать пиксель». После чего нам высветится окошко с кодом пикселя, закрываем его, переходим в [email protected] и логинимся там.
Создание пикселя
3. В верхней панели выбираем «Мои счетчики», в списке слева скролим вниз, находим пункт «Настройки счетчика» и выбираем «Цели».
Выбор целей
4. Находим нужный нам пиксель и нажимаем на значек «код».
Выбор пикселя
5. Копируем код и идем в GTM.
Настройка в Google Tag Manager
6. Переходим в «Теги» и жмем кнопку «Создать».
Создание тега
7. Для создания тега нам необходимо создать конфигурацию тега и триггер. Для начала создадим конфигурацию. Нажимаем на соответствующую рамку «Конфигурация тега». В выпадающем списке находим тип группы «Специальные» и выбираем «Пользовательский HTML». Данный тип тега позволит разместить HTML-код на странице сайта, например наш созданный пиксель.
Пользовательский HTML
8. Далее у нас появится окно для вставки кода. Нажимаем на текстовое поле и вставляем наш скопированный код пикселя. Для корректной работы необходимо установить порядок срабатывания тегов. Тег пикселя должен срабатывать после тега счетчика [email protected] Выставляем соответствующие настройки, как на скриншоте ниже. После чего нам предстоит создать триггер. Жмем на рамку «Триггеры».
Вставка JavaScript-код
9. Чтобы наш код срабатывал на всех страницах сайта, необходимо создать условие, при котором JS-код будет срабатывать при просмотре страницы. Соответственно, по умолчанию, выбираем триггер «All Pages», который позволяет выполнить нужную нам функцию. И сохраняем созданный нами тег.
Как настроить аналитику с помощью Google Tag Manager
Специалист по платному трафику eLama Дмитрий Ничипоров подготовил актуальную инструкцию по работе с Google Tag Manager, установке кодов Google Analytics, Метрики и Facebook Ads, а также по настройке событий через GTM.
Настройка веб-аналитики: почему это важно
Правильная настройка веб-аналитики в интернет-рекламе важна для оценки и повышения эффективности кампаний.
Проще говоря, благодаря правильно настроенной веб-аналитике мы:
Желательно подключить аналитику для всех рекламных систем, в которых вы запускаете кампании. Это нужно не только для того, чтобы получать наиболее полные и актуальные данные, но и для того, чтобы эффективно настраивать ремаркетинг.
Как настроить веб-аналитику
Есть два варианта настройки веб-аналитики.
Затем — настроить отправку событий, конверсии и цели. Чтобы настроить отправку событий в рекламные и аналитические системы, часто требуется знание JavaScript, CSS и принципов работы с библиотеками типа JQuery.
А если появятся новые события и цели или новый сайт, все эти действия придется проделать заново.
Второй — попроще : использовать Диспетчер тегов Google (Google Tag Manager, GTM). С ним не нужно постоянно менять код — достаточно один раз поставить контейнер с тегами на сайт. Если появятся новые события, их можно будет добавить внутри GTM. А если вы поменяете сайт, контейнер со всеми настройками можно будет просто перенести.
Что такое Google Tag Manager
Google Tag Manager — это система управления тегами.
Основные сущности внутри GTM — это контейнер, тег, триггер и переменная.
Контейнер — это хранилище тегов и триггеров. Содержит счетчики, которые срабатывают при определенных условиях и учитывают действия пользователей на сайте. Контейнер устанавливается на сайт один раз; после этого можно управлять счетчиками — менять настройки, удалять или добавлять новые счетчики, — не внося правок в код сайта.
Тег — это действие, которое выполняет GTM (активация счетчика Google Analytics или Яндекс.Метрики, отправка события по конверсии и другие).
Триггер — это событие, активирующее тег (просмотр пользователем некоторой страницы на сайте, клик по кнопке и другие).
Переменные позволяют запускать теги или триггеры (когда значение триггера совпадает с переменной) и фиксировать действия или изменения на странице.
Структура и иерархия GTM
Google Tag Manager подойдет, если:
Что еще можно делать с помощью GTM:
Как установить системы аналитики через GTM
Подготовительный этап. Как создать Google Tag Manager и поставить его на сайт
Чтобы создать аккаунт в Google Tag Manager, нужна учетная запись Google (проще говоря, почта на Gmail). После ее создания (или если она уже есть) переходим на tagmanager.google.com и нажимаем «Создать аккаунт».
Затем даем названия аккаунту и контейнеру. Выбираем целевую платформу: сайт, приложение или AMP-страница.
Нажимаем «Создать» и принимаем пользовательское соглашение.
Если все сделано правильно, появится всплывающее окно «Установить Google Менеджер тегов».
После этого нужно проверить, работает ли GTM на сайте. Можно использовать режим предварительного просмотра или расширение Google Tag Assistant.
На сайте должна подгрузиться iframe-форма.
После этого можно начать установку Google Analytics, Яндекс.Метрики, Facebook Pixel и других счетчиков.
Установка Google Analytics через Google Tag Manager
Установить Google Analytics проще всего: у него есть прямая интеграция с GTM.
В левом меню открываем раздел «Теги», нажимаем «Создать».
Откроется окно с двумя полями: «Конфигурация тега» (действие, которое будет выполняться) и «Триггеры» (условия).
В «Триггерах» выбираем вариант «All Pages» — счетчик Google Analytics будет активироваться каждый раз, когда пользователь просматривает любую страницу сайта.
В «Конфигурации тега» выбираем «Google Аналитика — Universal Analytics».
В поле «Тип отслеживания» автоматически проставится параметр «Просмотры страницы».
В поле «Настройки Google Analytics» нужно вставить идентификатор. В выпадающем меню выбираем «Новая переменная».
Идентификатор отслеживания можно найти в Google Analytics: «Администратор» — «Ресурс» — «Настройки ресурса».
В блоке «Основные настройки» будет указан «Идентификатор отслеживания».
Копируем его в GTM. Переменную называем так же, как идентификатор отслеживания, чтобы не запутаться.
Сохраняем тег. После этого он отобразится в рабочей области.
Чтобы изменения в контейнере появились на сайте, нужно нажать на кнопку «Отправить» в правом верхнем углу. Задаем «Название версии» и нажимаем «Опубликовать».
Дальше нужно проверить корректность работы тега: используем режим предпросмотра. Если все верно, тег отобразится в iframe-форме.
Также корректность работы можно проверить через Google Tag Assistant или Google Analytics (вкладка «Отчет в реальном времени»).
Установка Яндекс.Метрики через GTM
Создаем новый тег (раздел «Теги» в левом меню, кнопка «Создать»). Триггер задаем тот же, что и в случае с Google Analytics, — «All Pages». В поле «Конфигурация тега» выбираем: «Специальные» — «Пользовательский HTML».
В поле для ввода HTML вставляем код Яндекс.Метрики. Для этого заходим в аккаунт и выбираем счетчик. В левом меню нажимаем «Настройка». Внизу появится поле «Код счетчика».
Копируем HTML-код в соответствующее поле в Google Tag Manager и нажимаем «Сохранить». Тег появится в рабочей области. Его нужно будет «Отправить» и проверить корректность работы.
Находясь на сайте, открываем код (Ctrl+Shift+I) и ищем параметр PageView. Counter. После него стоит номер счетчика — проверьте, что он совпадает с номером внутри вашего аккаунта в самой Яндекс.Метрике.
Установка Facebook Pixel через GTM
Для начала нужно создать Facebook Pixel (у eLama есть пошаговая видеоинструкция по созданию и настройке пикселя Facebook). Для этого заходим в Ads Manager и в разделе Events Manager выбираем пункт «Пиксели».
Добавить пиксель Facebook в GTM можно двумя способами: с помощью партнерских интеграций или на сайт вручную.
При установке пикселя вручную алгоритм тот же, что и в случае с Яндекс.Метрикой: создаем тег, в конфигурациях выбираем «Специальные» — «Пользовательский HTML» и копируем код.
Если добавляем пиксель с помощью партнерских интеграций, достаточно в списке найти Google Tag Manager.
Затем будет нужно выбрать почту Gmail, к которой привязан GTM, сам аккаунт в GTM и контейнер и «Завершить настройку».
В рабочей области GTM должен появиться тег пикселя Facebook.
Проверить установку можно также в режиме предпросмотра (iframe-форма) или через расширение Facebook Pixel Helper (для Google Chrome).
О настройке пикселя «ВКонтакте» и счетчика myTarget в GTM читайте в других материалах:
Настройка событий
Выбор событий зависит от структуры сайта и того, как выстроена воронка взаимодействия с пользователем. Чаще всего нужно отследить:
Далее подробно разберем, как настроить событие для нажатия на кнопку.
Настройка событий в Google Analytics
Создаем новый тег. Однако, в отличие от предыдущих схем, в качестве триггера выбираем не «All Pages», а создаем новый триггер.
Кликаем по полю «Настройка триггера». В меню «Выберите тип триггера» выбираем «Клик» — «Все элементы».
Задаем «Условие активации триггера» — «Некоторые клики». В первом поле в выпадающем меню нажимаем «Выбрать встроенную переменную». В открывшемся меню выбираем Click Element.
Во втором поле выбираем условие «соответствует селектору CSS».
Где найти этот селектор? Идем на сайт и находим кнопку — элемент, при клике на который GTM должен передавать событие.
Нажимаем на нее правой кнопкой мыши, в меню выбираем «Посмотреть код».
В правой части экрана появится поле с кодом страницы сайта; код самой кнопки будет подсвечен. Нажимаем на это подсвеченное поле правой кнопкой мыши, выбираем «Copy» — «Copy selector».
Вставляем селектор в последнее поле в окне «Настройка триггера» в GTM.
Назовем триггер, например, «Клик на кнопку» и сохраним его.
Далее заполняем блок «Конфигурация тега». Выбираем «Google Аналитика — Universal Analytics», тип отслеживания — «Событие». В открывшемся меню нужно обязательно заполнить два поля — «Категория» и «Действие». Допустим, «Категория» будет button, а «Действие» — click.
Сам тег назовем, например, «GA — Клик на кнопку».
В «Настройках Google Analytics» выбираем идентификатор аккаунта в Google Analytics. Тогда при клике на кнопку в аналитическую систему будет отправляться событие с категорией button и действием click.
Зайдем в Google Analytics и создадим соответствующую цель («Администратор» — «Представление» — «Цели»).
В поле «Установка цели» выбираем «Собственная». Даем ей название (например, «Клик на кнопку»), указываем «Тип» — «Событие». Заполняем «Подробные сведения о цели»: «Категория» — button, «Действие» — click. Сохраняем конверсию в Google Analytics.
Идем в GTM и сохраняем тег «GA — Клик на кнопку». Публикуем, проверяем.
Настройка событий в Яндекс.Метрике
Сначала нужно создать цель в Яндекс.Метрике («Настройка» — «Цели» — «Добавить цель»). Даем ей название (например, «Клик на кнопку»). В поле «Тип условия» выбираем «JavaScript-событие», в поле «Идентификатор цели» вводим, например, button.
Переходим в Google Tag Manager и создаем тег с триггером «Клик на кнопку» и конфигурацией «Пользовательский HTML». Прописываем отправку события в яндекс.метрику:
где вместо единиц — идентификатор аккаунта в Яндекс.Метрике, вместо ‘Идентификатор события’ — идентификатор, который указан в описании вашей цели (в нашем случае — button).
Называем тег «Метрика — Клик на кнопку». Сохраняем, отправляем в итоговую версию контейнера, проверяем.
В этой статье мы не будем рассматривать настройку событий для Facebook Pixel: это отдельная обширная тема.
Блог аналитика
Зачастую, для привлечения трафика интернет-магазин использует сразу несколько ремаркетинговых систем, таких как Google Ads, пиксель Facebook, VK, myTarget и т. д.
Для работы динамического ретаргетинга в каждую систему вы должны настроить передачу данных с сайта по посещениям карточек товаров, добавлениям в корзину, завершениям оформления заказа и другим действиям.
Я вам расскажу, как это сделать, не привлекая каждый раз программиста. Для примера будем настраивать динамический ретаргетинг в myTarget.
Нам понадобиться диспетчер тегов Google Tag Manager (далее GTM) с уже настроенной передачей данных о расширенной электронной торговле в Google Analytics (далее GA). Если вы еще не настроили расширенную электронную торговлю, то с легкостью найдете в интернете множество статей на эту тему.
Зачем все это?
Возможно, у вас уже возник вопрос: «А зачем это нужно? Пусть программист разбирается …»
Да, программист все сможет настроить сам, но это чревато:
Именно этих проблем мы избежим с помощью GTM. Мы возьмем данные, переданные для GA, и отправим в нужные нам счетчики ремаркетинговых систем.
Углубимся немного в то, как GTM собирает данные, чтобы это реализовать.
dataLayer в GTM
Все данные о посещениях страниц, просмотренных товарах и любых действиях пользователя на сайте помещаются в коде GTM в переменную уровня данных с именем dataLayer.
Например, в карточке товара при настроенной расширенной электронной торговли переменная dataLayer содержит:
Как видите, в данном примере dataLayer включает в себя свойства товара, передаваемые в GTM: наименование товара (name), ID товара (id), цена (price) и т. д., а также информацию о действии пользователя: в нашем случае это просмотр карточки товара (detail). Подробнее про содержимое dataLayer смотрите в руководстве по GTM.
Именно из dataLayer мы будем вытаскивать данные о товарах и заказах, чтобы передать в myTarget.
Настраиваем ретаргетинг в myTarget
По документации myTarget для динамического ретаргетинга, необходимо реализовать передачу id товара и цену товара при просмотре карточки товара в его счетчик.
Для этого создадим в GTM две новые переменные, в которых будем по отдельности собирать ID товара и его цену. Затем добавим ссылки на эти переменные в код счетчика myTarget и укажем триггеры срабатывания счетчика.
Шаг 1. Создаем переменные в GTM
Для начала заходим в диспетчере тегов в раздел «Переменные» и создаем новую переменную (кнопка «Создать”).
Тип Переменная уровня данных означает, что мы обращаемся к содержимому dataLayer (вытаскиваем оттуда id товара).
В поле “Имя переменной уровня данных” пишем строку “ecommerce.detail.products.0.id” и нажимаем Сохранить“:
Итак, теперь в списке переменных у нас есть одна дополнительная переменная ProductID:
Например, для получения цены я буду использовать строчку “ecommerce.detail.products.0.price”.
Аналогично добавляю переменную с ценой и называю ее ProductPrice.
Шаг 2. Добавляем переменные в код счетчика
Теперь мы можем использовать переменные в коде ремаркетинга myTarget для передачи данных о просмотренных товарах.
Для этого перейдем в теги и добавим новый тег для myTarget. Код счетчика берем из инструкции по использованию myTarget и подставляем в него созданные переменные в нужных строках кода (см. ниже).
Обратите внимание, что при добавлении переменных нужно обязательно добавить две фигурные скобки — и перед, и после названия переменной:
<
<
Шаг 3. Добавляем триггер для myTarget
В качестве триггера выбираем тип Пользовательское событие и далее выполняем действия:
Сохраняем триггер и созданный тег.
Эти настройки означают, что наш код будет срабатывать только тогда, когда в GTM в dataLayer будут отправляться данные о детальном просмотре карточки товара. Таким образом, мы гарантированно будем передавать данные в myTarget, только если мы получили данные о товаре в GTM.
Отлично! Данные, передаваемые о товаре для GA, автоматически отправятся и в счетчик ремаркетинга myTarget.
Если товаров много…
Данные о просмотре карточки товара мы успешно передали. Но по требованиям myTarget мы, как минимум, должны передать и данные по сделанному заказу (ID товаров и сумма заказа). В заказе может быть больше одного товара, что усложняет задачу.
Посмотрим, как выглядит код dataLayer для сделанного заказа с несколькими товарами:
В данном случае в заказе два товара (внутри блока products). Мы должны собрать ID и сумму всех товаров.
Для этого создадим еще одну переменную уровня данных, где сохраним информацию о товарах в заказе. Затем напишем два небольших JavaScript обработчика этой переменной (для сбора ID и суммы заказа) и передадим результаты в новый счетчик ремаркетинга myTarget.
Шаг 1. Создаем переменную уровня данных
Возвращаемся в GTM в раздел «Переменные» и создаем новую переменную уровня данных — Allproducts_purchase. При этом в свойство «Имя переменной уровня данных» нужно подставить строку “ecommerce.purchase.products”.
Тем самым мы передали все данные о купленных товарах (из блока products) в одну переменную GTM. И теперь из нее нужно извлечь все нужные данные о товарах.
Шаг 2. Получаем сумму товаров
Создадим еще одну переменную — ProductsPrices_purchase, но уже выберем конфигурацию “Собственный код JavaScript”:
Запишем в поле “Собственный код JavaScript” следующий код:
Этот несложный код обращается к созданной ранее переменной “Allproducts_purchase”, собирает из нее все цены товаров и суммирует их. Сохраним эту переменную и двинемся дальше. К этим данным мы еще вернемся.
Шаг 3. Собираем ID товаров
Аналогичным образом нам нужно собрать все ID товаров в заказе, причем необходимо учесть формат передачи ID товаров в myTarget:
[ID1,ID2…]
Создаем еще одну переменную с конфигурацией “Собственный код JavaScript” и названием “ProductIDlist_purchase”. Добавляем в нее код и сохраняем:
Итак, мы сохранили ID всех товаров в переменную ProductIDlist_purchase и сумму заказа в переменную ProductsPrices_purchase. Нам остается передать все полученные данные в нужный тег и установить триггер.
Шаг 3. Отправляем данные в счетчик myTarget
Переходим в раздел «Теги», создаем новый тег и добавляем в него код ремаркетинга от myTarget для страницы покупки. В нужные строки кода включаем название переменных с нашими данными о товарах — <
Шаг 4. Добавляем триггер сделанного заказа
В качестве триггера также выбираем тип «Пользовательское событие» и далее выполняем действия:
Сохраняем триггер и созданный тег.
В этом триггере мы указали, что код должен срабатывать только тогда, когда GTM получает данные о сделанном заказе для Google Analytics.
Для выполнения минимальных требований myTarget остается добавить тег с кодом myTarget для страницы «Корзины».
Источник данных: счетчик Top.Mail.Ru
Вы можете показывать рекламу только тем пользователям, которые заходили к вам на сайт. Например, выделить аудиторию, которая добавляла товары в корзину, но не совершала покупку, и показывать рекламу этим людям.
Чтобы использовать Top.Mail.Ru как источник данных для рекламных кампаний:
Подключение существующего счетчика Top.Mail.Ru
Если у вас уже есть счетчик Top.Mail.Ru,
Запрос на добавление счетчика можно отправлять только из аккаунта рекламодателя.
На почту, которая привязана к счетчику, придёт письмо с валидационной ссылкой. Перейдите по ссылке из письма, и счетчик будет привязан к аккаунту в myTarget.
Создание нового счетчика Top.Mail.Ru
Создайте счетчик Top.Mail.Ru. Откройте вкладку «Аудитории» → «Счетчики Top@Mail.Ru» и нажмите «Создать счетчик».
Укажите данные для создания счетчика:
Если планируете использовать счетчик для динамического ремаркетинга, проставьте галочку «Использовать код для динамического ремаркетинга».
Включите опцию «Использовать код для синхронизации данных», чтобы счетчик собирал информацию о посетителях вашего сайта. Эти данные можно будет использовать в качестве источника данных.
На указанную почту придет письмо с подтверждением добавления счетчика к вашему аккаунту. Перейдите по ссылке в письме, чтобы завершить добавление счетчика.
Все счетчики отображаются на вкладке «Аудитории» → «Счетчики Top@Mail.Ru». Чтобы скопировать код счетчика, нажмите ссылку «Код» рядом с названием счетчика.
После того как счетчик накопит статистику (статус счетчика — «Работает»), его можно использовать в качестве источника данных. Если данные на счетчик не поступают, проверьте, что счетчик установлен на сайте правильно, или обратитесь к владельцу счетчика.
В таблице на странице «Счётчики Top@Mail.Ru» отображается охват — количество пользователей, охваченных счетчиком за полную календарную неделю.
В поле «Охват» могут быть значения:
Если вы собираетесь использовать счетчик для динамического ремаркетинга, пропишите в коде события, данные о которых нужно передавать в myTarget.
Если код счетчика уже установлен, то добавьте к нему специальный код для динамического ремаркетинга:
Добавьте в код обязательные события (основной источник данных):
Обязательно размещать код счетчика (обрамлен тегом ) перед кодом динамического ремаркетинга (обрамлен тегом ).
Пример размещения кодов счетчика и динамического ремаркетинга:
В коде счетчика вместо «ID счетчика» должен быть указан идентификатор счетчика, который вы выбрали при загрузке фида.
В коде динамического ремаркетинга вместо «VALUE» для параметров «productid«, «pagetype«, «list» и «totalvalue» должны быть заданы определённые значения. Они могут задаваться автоматически, например, с помощью некоего инструмента, формирующего код страниц вашего сайта.
Описание параметров динамического ремаркетинга
Используется для указания идентификатора продукта (продуктов), которых касается событие. Например, идентификатор продукта, которому посвящена отображаемая пользователю страница сайта.
Значение параметра обязательно должно соответствовать идентификатору продукта из фида (элемент » offer«, свойство » id«). Именно по этому идентификатору система понимает, какими продуктами интересовался пользователь, чтобы на их основе выбирать продукты из фида для отображения в рекламных объявлениях.
Пример: productid: ‘123456’
Если на странице представлено несколько товаров, например, на странице корзины ( pagetype: ‘cart’) или странице подтверждения покупки ( pagetype: ‘purchase’), то их идентификаторы нужно перечислить в массиве (в квадратный скобках через запятую).
Используется для указания типа страницы или раздела сайта, либо события/действия, выполненного пользователем на вашем сайте.
Значения, которые обязательно нужно передавать (без этих данных работа динамического ремаркетинга невозможна):
Используется для указания суммарной стоимости продуктов. Параметр должен содержать сумму цен всех продуктов, указанных в параметре productid — например, сумму цен всех продуктов из корзины. Если задействован только один продукт, то его текущую цену. Имеет смысл передавать этот параметр для pagetype со значениями product, cart и purchase.
Используется для указания идентификатора фида, к которому относятся продукты, указанные в параметре productid. Идентификатор присваивается фиду при его загрузке («Аудитории – Продуктовые фиды»).
Пример: list: ‘1’
Если в рамках одного сайта вы используете несколько файлов фидов, например, разные фиды на разные города, то они должны быть связаны с одним счетчиком Top.Mail.Ru, но иметь разные ID. Например, вы загрузили фид для Москвы и задали ему идентификатор 1, а также фид для Владивостока и задали ему идентификатор 2. Значит, при показе продукта посетителю из Москвы в параметре list должен быть указан ID 1, а посетителю из Владивостока должен быть указан ID 2.
Примеры использования кода динамического ремаркетинга (для сайта с одним фидом)
Страница продукта (событие/действие: просмотр информации о конкретном продукте).
Используйте код динамического ремаркетинга с указанием pagetype: ‘product’, при отображении пользователю продукта, которым он заинтересовался (целенаправленно смотрел информацию о конкретном продукте).
Если ваш сайт позволяет просматривать информацию о разных продуктах без перезагрузки страницы, то вы можете динамически обновлять информацию о продукте, которым интересуется посетитель — последовательно выполняйте вызовы кода динамического ремаркетинга с соответствующими значениями параметров productid и totalvalue.