"Прощай, топ 10!" или 30+ технических ошибок сайта, которые мешают продвижению в поисковых системах - 21 ноября в 13:00 по мск Присоединиться
Яндекс.Директ, Яндекс Маркет, Google Adwords, Google Merchant, Ремаркетинг
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!

Google Tag Manager (GTM)  представляет собой удобный инструмент, который существенно упрощает ежедневную работу интернет-маркетологов и владельцев сайтов. Диспетчер файлов в своей стандартной версии имеет внушительный набор кодов аналитических систем, метрик, рекламных площадок, кодов отслеживания целевых действий и еще массу других полезных возможностей. GTM позволяет отказаться от услуг веб-разработчиков и самостоятельно вносить изменения в исходный код сайта. Однако сохраняется ряд задач, настройка правильного отслеживания которых должна выполняться не привязываясь к DOM-структуре. Для таких задач необходимо использовать особый элемент или конструкцию, именуемую уровнем данных или dataLayer.

Уровень данных в tag manager

DataLayer представляет собой массив JavaScript, который делает возможной передачу различных сведений в диспетчер тегов. К примеру, передаваться могут различные события и переменные. Войдя в личный кабинет менеджера тегов, становятся возможными настройка разнообразных триггеров и расширение информации, которая передается в Google Analytics (GA) о посетителях сайта.

Вид уровня данных

Пример уровня данных выглядит следующим образом:

Здесь мы видим, что dataLayer – это массив, содержимым которого является объект, а свойства объекта выражены переменными. Именно в переменные мы вкладываем интересующие нас значения. Например, при загрузке страницы личного блога я передаю в уровне данных тип текущей страницы и имя автора статьи. А вот в переменной «pageCategory» я уже передаю значение «blog», а в author пишу «Natalya».

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

Если необходимо, всегда можно изменить наименование массива уровня данных. С этой целью в коде, который инициализирует GTM (выделен в рамку на скрине, отмеченный цифрой 1), в строке нужно сменить название «dataLayer» на любое желаемое. Пример конечного вида кода изображен на скрине, отмеченном цифрой 2

Метод push

DataLayer push в Google Tag Manager позволяет передавать дополнительные значения. Конструкция при этом  может находится после кода инициализации. Push метод также будет полезен для добавления новых элементов.

Конструкция имеет следующий вид:

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

Event в уровне данных

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

К примеру, пользователь нажимает на кнопку для заказа обратного звонка. В таком случае применяется следующая комбинация:

Если подобных кнопок несколько, в футере и хедере, конструкцию легко дополнить уточняющими элементами. Тогда конструкция приобретает следующий вид:

Переменные уровня данных в диспетчере тегов

Основной задачей dataLayer в Google Tag Manager является  создание триггеров и переменных. Рассмотрим более подробно, как с помощью dataLayer можно создать переменную в GTM.

Итак, начинаем с добавления новой пользовательской переменной. В разделе «Тип» выбираем «Переменная уровня данных». И теперь указываем наименование переменной, которая уже указана в dataLayer. У нас таким именем является variableName. И вот у нас есть переменная.

События в GTM с помощью уровня данных

Чтобы создать событие в диспетчере тегов, нужно добавить новый триггер. Устанавливаем его тип как «Пользовательское событие».

В разделе «Имя» вписываем наименование события, фигурирующее в уровне данных. В нашем примере это «eventName». На этом все.

Проверяем содержимое DataLayer

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

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

Согласно стандартным настройкам, GTM отправляет на уровень данных такие значения, как:

  • gtm.js – отправляется тогда, когда диспетчер готов к работе;
  • gtm.dom – отправляется тогда, когда модель DOM готова к использованию;
  • gtm.load – отправляется тогда, когда окно загружено.

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

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

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

Здесь мы видим, что событие ordercall добавляется в dataLayer в случае успешной отправки формы. Открываем личный кабинет диспетчера тегов и создаем триггер пользовательского события. Триггер заданного типа позволит отправлять сведения в аналитические системы, например в GA.

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

Рассмотрим несколько примеров, как применяется dataLayer и для чего он нужен.

  1. Отслеживание электронной торговли. Если у вас интернет-магазин, осуществляющий e-commerce, при ее установке вам не обойтись без уровня данных. В этом случае размещаем код, представленный на скрине ниже, на странице для оформления заказа.

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

 

  1. Отправка идентификатора товара, который просматривал пользователь. Это выполняется с целью эффективного  динамического ремаркетинга. Возможности ремаркетинга позволяют демонстрировать рекламу пользователям, которые ранее посетили ресурс. Ремаркетинг динамического типа является более результативным, так как позволяет показывать объявления конкретного товара/услуги, которыми ранее интересовался посетитель.

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

  1. Еще один распространенный пример применения dataLayer – передача сведений о посетителе. К ним относятся тип пользователя (зарегистрированный или нет), Client ID, User и так далее.

Важные моменты

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

  1. При обсуждении вопросов диспетчера тегов удобнее использовать термин «уровень данных» вместо dataLayer. Это объясняется тем, что вместо англоязычного dataLayer могут применяться различные наименования переменных, а вот русскоязычное значение термина при любых условиях остается неизменным и соответствует сути термина. Не редко можно встретить настройки GTM, где по умолчанию уровень данных имеет другое название, отличное от dataLayer.

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

Сконцентрируйтесь на строчке под номером 2, именно здесь можно задать имя переменной dataLayer.  Если уровень данных называется «dataLayer», он содержит в себе следующие сведения:

Изменив наименование переменной уровня данных, мы получим следующий код:

Изменение имени не приводит к изменению содержимого массива уровня данных. Вот доказательство:

  1. Имя переменной dataLayer можно менять только на допустимое значение.
  2. DataLayer – это объект JavaScript или массив JavaScript, что объясняет его конструкцию, указанную ниже.

  1. Конструкция push()  создана для добавления значений в массив.

 

Теперь потренируемся определять и описывать уровень данных. При использовании диспетчера тегов часто возникает вопрос об отправке сведений из системы работы с сайтом в GA, Яндекс.Метрику и другие системы аналитики. Наиболее актуальна ситуация фиксации транзакции. В некоторых ситуациях код, который описывает выполняемую транзакцию или другое событие в dataLayer, располагается до кода контейнера диспетчера тегов, в других ситуациях – после кода GTM.

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

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

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

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

Открываем отладчик и видим следующее:

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

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

Если провести этот же тест для dataLayer, который расположен после кода менеджера тегов, можно увидеть, что конструкция push()  функционирует корректно, а вот первый вариант даст ошибку. И это нас подводит к следующему моменту. Который важно помнить.

  1. Чтобы определить dataLayer до кода диспетчера тегов, нужно применять конструкцию следующего типа:

Если же вы используете переменную dataLayer после кода менеджера тегов, нужна конструкция следующего типа:

Подводим итоги

Итак, dataLayer или уровень данных (как мы выяснили, правильнее использовать второй вариант), представляет собой важный инструмент для настройки отправки сведений в аналитические системы и прочие сервисы. Чтобы корректно формулировать задачи и искать неисправности при отслеживании тех или иных целевых действий, необходимо понимать, как устроен уровень данных и как его использовать. В  материале мы осветили ответы на эти и другие вопросы. Также мы разобрали пять важных моментов, которые всегда нужно помнить при работе с уровнем данных в диспетчере тегов.

Яндекс.Директ. Яндекс Маркет. Google Adwords. Google Merchant. Ремаркетинг

– Широкая семантика.
– Высокий CTR.
– Тщательная минусовка.
– Только целевые заходы.

Контекстная реклама: Яндекс.Директ, Google Adwords - работаем прозрачно
Найдем целевую аудиторию для любого бизнеса, и покажем рекламные объявления только потенциальным клиентам. Выполняем условия договора в 97% случаев
Подпишись на обновления блога

Мы работаем не только в Моcкве, но и в других городах России: