Просто о DataLayer для Диспетчер тегов Google

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (7 оценок, среднее: 5,00 из 5)
Загрузка...

DataLayer – одна из ключевых концепций в мире Диспетчера тегов Google. Он обеспечивает максимальную гибкость, мобильность и простоту реализации. Помните, что GTM лучше всего работает при развертывании рядом с уровнем данных.

Сначала уровень данных Диспетчера тегов Google может показаться одним из тех таинственных понятий, которые никто не понимает (говоря «никто», я имею в виду не-разработчиков, таких как вы и я). Но это не так сложно, как кажется. Понимание и использование уровня данных является ключом к разблокированию потенциала GTM.

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

КАК РАБОТАЕТ DATA LAYER МЕНЕДЖЕРА ТЕГОВ GOOGLE?

С технической точки зрения, уровень данных – это объект или переменная JavaScript, которая хранит и отправляет информацию с вашего сайта в Диспетчер тегов Google (позже данные передаются другим инструментам, таким как Google Analytics). Другими словами, это похоже на виртуальный уровень вашего сайта, который содержит различные точки данных.

Диспетчер тегов Google Google также может переносить данные в слой данных, а затем читать его оттуда. Вот как работают GTM и Data Layer в двух словах:

Схема работы dataLayer на сайте

После того как вы разместите фрагмент JavaScript в контейнере GTM в исходном коде вашего веб-сайта, Data Layer будет автоматически создан. Вам не нужно добавлять что-либо дополнительно. Вот пример фрагмента контейнера GTM.

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

ФРАГМЕНТ СЛОЯ ДАННЫХ ПРОТИВ СОБЫТИЯ DATALAYER.PUSH

Есть два способа, как данные могут быть перенесены на уровень данных:

  1. Добавив фрагмент dataLayer над фрагментом контейнера GTM.
  2. Или путем нажатия данных с вызовом API dataLayer.push. В чем разница, спросите вы?

Первый метод  может быть реализован только если у вас есть доступ к исходному коду вашего веб – сайта и у вас есть некоторые навыки кодирования. Для не-разработчика это может быть слишком сложно.

Тем не менее, эта опция действительно полезна, если вы хотите использовать любые пользовательские данные сразу после загрузки страницы. Пример – данные транзакции или продукта. Предположим, вы хотите внедрить отслеживание электронной торговли Google Analytics. В этом случае ваши разработчики должны добавить фрагмент dataLayer над контейнером отслеживания GTM со следующими параметрами: transactionID, transactionTotal и т. д. (здесь вы можете прочитать полное руководство). После того, как эта информация будет добавлена ​​в dataLayer, Диспетчер тегов Google может получить ее и перейти в Google Analytics.

Второй метод (dataLayer.push) позволяет вам вводить дополнительные данные, когда на вашем веб-сайте происходят определенные события. Вот несколько примеров:

  1. У вас есть форма подписки на рассылку новостей (которую нельзя легко отслеживать с помощью автоматических слушателей формы GTM). Вы должны попросить своего разработчика веб-сайта нажать событие dataLayer, как только новый подписчик введет его/ее электронную почту на ваш сайт. Код этого события должен выглядеть так:
    Если вы хотите, вы можете попросить у вашего разработчика дополнительную информацию (например, расположение формы (поскольку на одной странице может быть несколько форм)).
  2.  Когда посетитель добавляет продукт в свою корзину, может быть запущено событие dataLayer (содержащее информацию о продукте).

КАК ТЕГИ GTM ИСПОЛЬЗУЮТ ИНФОРМАЦИЮ/КОНТЕНТ DATALAYER?

Теги используют информацию (сохраненную в слое данных) двумя способами:

  1. Собирать определенные фрагменты данных;
  2. Чтобы оценить более продвинутые правила активации (вы можете использовать события dataLayer в качестве триггеров).

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

Во-вторых, теги могут использовать информацию уровня данных, чтобы решить, следует ли ее запускать. Помните мой предыдущий пример, когда событие dataLayer активируется, когда новый подписчик входит в свой адрес электронной почты? Это отличный триггер, который может запускать тег события Google Analytics.

КАК Я могу ПОЛУЧИТЬ ИНФОРМАЦИЮ ИЗ DATALAYER И ПОДКЛЮЧИТЬ ЕЕ К ДРУГИМ ИНСТРУМЕНТАМ АНАЛИТИКИ?

Представим себе, что у меня есть веб-сайт, и все зарегистрированные пользователи разделены на две группы:

  • Клиенты оформившие подписку;
  • Пользователи без подписки.

Я хочу сегментировать этих пользователей и все их события/просмотры страниц в аналитике Google по их тарифному плану. Я уже просил моих разработчиков добавлять статическую информацию в dataLayer при загрузке страницы. Фрагмент DataLayer выглядит следующим образом:

Код (между тегами <script> и </script>) – это наша информация о статическом уровне данных. Мы будем использовать его позже.

Очень важно, чтобы фрагмент DataLayer помещался над кодом контейнера Менеджера тегов Google в код вашего веб-сайта. Во-первых, вам нужно отправить данные в dataLayer, затем эти данные будут загружены Диспетчером тегов Google. Если фрагмент размещен после кода контейнера GTM, данные DataLayer не будут получены GTM.

1.  СОЗДАЙТЕ ПЕРЕМЕННУЮ DATALAYER В ДИСПЕТЧЕРЕ ТЕГОВ GOOGLE

Во-первых, вам нужно создать переменную dataLayer в учетной записи GTM. Таким образом, диспетчер тегов распознает параметр. Открыть переменные > Прокрутите вниз до пользовательских переменных и нажмите «Создать» .

Добавление новой переменной dataLayer в GTM

  • Все заголовки переменных уровня данных в Менеджере тегов Google начинаются с «dlv» (проще все держать в порядке).
  • Выберите тип – переменная уровня данных
  • Установите pricingPlan как имя переменной слоя данных, потому что эта переменная была добавлена ​​в фрагмент dataLayer вашим разработчиком.
  • Нажмите «Сохранить» .

2. ВКЛЮЧить РЕЖИМ ПРЕДВАРИТЕЛЬНОГО ПРОСМОТРА И ОТЛАДКИ В ДИСПЕТЧЕРЕ ТЕГОВ GOOGLE

Давайте проверим, поймает ли Google Tag Manager ценовую переменную Plan .

  • На панели GTM введите режим предварительного просмотра и отладки (нажав  кнопку « Предварительный просмотр» )

Кнопки опубликовать, предварительный просмотр в GTM

  • Когда режим отладки включен, вы должны увидеть оранжевую панель уведомлений:

Отображение предварительного просмотра в GTM

  • Перейдите на ваш сайт (или обновите страницу, если вы уже на ней).
  • В нижней части экрана должна появиться консоль отладки GTM.

Включенный режим отладки в GTM

  • Нажмите «Переменные» и найдите «Ценовой план». Проверьте его значение. Если параметр pricePlan  не определен, вам следует дважды проверить, было ли вы введено правильное имя переменной слоя данных в панели администратора GTM (кстати, оно чувствительно к регистру). В моем случае  переменная pricingPlan определена правильно, потому что я получаю значение Free.

3. СОЗДАЙТЕ ПОЛЬЗОВАТЕЛЬСКИЙ ПАРАМЕТР В GOOGLE ANALYTICS

pricingPlan – это настраиваемый параметр, который был определен вами (или вашим разработчиком), поэтому Google Analytics не поймает его по умолчанию. Для того, чтобы сообщить об этом новом параметре Google Analytics, необходимо создать персонализированный pricing plan.

  • Войдите в свою учетную запись Google Analytics.
  • Откройте учетную запись своего веб-сайта и нажмите «Администратор». Вы должны увидеть что-то вроде этого.

Режим администратора в Google Analytics

  • Прокрутите вниз и в разделе «Свойства» выберите «Пользовательские определения» > «Пользовательский параметр»

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

  • Нажмите Создать пользовательский параметр
  • Введите имя pricePlan, выберите «Пользователь» в качестве области действия и нажмите «Создать». Область пользователя применит этот настраиваемый параметр ко всем последующим событиям этого конкретного пользователя.

Добавление нового пользовательского параметра в Google Analytics

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

JavaScript пользовательского параметра в Google Analytics

  • Посмотрите на вторую строку кода, и вы увидите dimension3 . Номер 3 является индексом цены. Имейте это в виду.

4. Перенос данных из pricePlan  В GOOGLE ANALYTICS

  • Вернитесь в свою учетную запись Диспетчера тегов Google.
  • Откройте тег просмотра страницы Google Analytics. Если у вас его нет, давайте его создадим.
  • Перейдите в теги и нажмите «Создать»:

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

  • Введите имя для тега – Page View GA (на самом деле вы можете назвать его, как хотите)
  • Нажмите « Конфигурация тега» .

Конфигурация тега в GTM

  • Выберите тип тега – Universal Analytics

Выбор тегов в GTM

  • Если вы не знаете, какую версию Google Analytics используете, спросите своего разработчика. Обычно это Universal Analytics.
  • Теперь пришло время настроить тег. Введите идентификатор отслеживания Google (UA-XXXXXXX). Я не рекомендую вводить здесь вручную идентификатор. Было бы лучше, если бы вы создали переменную с настройками Google Analytics.
  • Тип отслеживания – Просмотр страницы
  • Установите галочку – Включить переопределение настроек в этом теге
  • Нажмите «Дополнительные настройки» > «Специальные параметры параметры».
  • Введите 3 в поле Индекс (это индекс, который вы получили на шаге 3)
  • Введите {{dlv – pricingPlan}} переменную dataLayer в поле Значение параметра

Заполнение пользовательского параметра в GTM

  • В  разделе Triggering  выберите «Все страницы».
  • Таким образом, при каждом просмотре страницы вы отправите значение переменной pricingPlan в качестве пользовательского измерения № 3.

Вот как вы можете передавать дополнительные данные из уровня данных Диспетчера тегов Google в Google Analytics.

ИСПОЛЬЗОВАНИЕ ДАННЫХ datalayer В КАЧЕСТВЕ ТРИГГЕРОВ

Как уже упоминалось ранее, вы также можете использовать Data Layer для более продвинутых правил тегов. Например, вы можете запустить тег ремаркетинга Adwords только в том случае, если пользователь находится в pricingPlan – Free. Давайте подробнее рассмотрим этот пример.

  • Откройте панель администратора GTM.
  • Перейдите в теги и нажмите «Создать».

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

  • Введите имя – Adwords remarketing tag
  • Выберите тип тега – ремаркетинг Adwords
  • Введите идентификатор конверсии и метку конверсии
  • Оставьте все остальные настройки по умолчанию и переходите к триггеру.
  • В разделе Выбор триггера щелкните значок « Плюс» – добавление нового триггера в правом верхнем углу и введите имя – я предлагаю «Pageview – Users with free plan». Выберите тип триггера – «Просмотр страницы». Для того чтобы этот триггер проверялся каждый раз, когда страница загружается.
  • Вы не хотите, чтобы этот тег срабатывал на каждой странице. В разделе «Активации триггера» выбирите «Некоторые просмотры страниц» и введите следующее правило: dlv – pricingPlan равно Free. Это означает, что тег ремаркетинга Adwords будет срабатывать только в том случае, если для параметра PriceLlan Data Layer точно указано значение Free. Пользователи с оплаченным тарифом не будут запускать это правило.

Добавление триггера pricePlan в GTM

ИСПОЛЬЗОВАНИЕ СОБЫТИЙ УРОВНЯ ДАННЫХ В КАЧЕСТВЕ ТРИГГЕРОВ

Другим распространенным примером триггеров на основе данных является использование событий. Помните, что примеры dataLayer.push упоминаются в начале этого сообщения? Вот краткое напоминание:

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

Событие subscriber в режиме отладки GTM

Теперь давайте настроим это событие как триггер для тега событий Google Analytics.

  • Перейдите в «Триггеры» и нажмите «Создать».
  • Введите имя. Я бы предлогаю назвать его Custom – new email subscriber
  • Выберите событие – пользовательское событие (все события Data Layer рассматриваются как пользовательские события в GTM).
  • Активация на – new_subscriber. Вам нужно ввести точное название события, которое вы видите в консоли предварительного просмотра и отладки.
  • Вернемся к нашему примеру dataLayer.push. Вот код:
  • Было бы неплохо, если бы мы также передали данные formLocation в Google Analytics? GTM не словит этот параметр по умолчанию, поэтому нам нужно создать другую переменную. Перейдите в Переменные > Пользовательские переменные и нажмите «Создать».
  • Я предлагаю назвать его dlv – formPosition .
  • Выберите тип – Переменная уровня данных. Имя переменной – formPosition (именно так вызывается параметр в предыдущем примере кода). Оставьте все остальные настройки как есть и нажмите «Создать переменную».

Давайте создадим тег события Google Analytics, когда новый подписчик отправит свой адрес электронной почты.

  • Перейдите к тегам и нажмите «Создать».
  • Выберите тип тегов – Universal Analytics
  • Установить параметр идентификатора отслеживания
  • Тип трека – Событие
  • Категория – Form Submit (это означает, что все события (связанные с этим триггером) будут иметь одну и ту же категорию
  • Действие – New subscriber
  • Ярлык – {{dlv – formPosition}}. Это переменная, которую мы только что создали. Значение этого параметра может измениться в зависимости от позиции вашей формы. Если на одной странице есть 3 разных формы, и все они запускают одно и то же событие new_subscriber Data Layer, но с другим значением formPosition , Диспетчер тегов Google передаст это значение как ярлык события GA. Это очень полезно, если вы хотите понять, какие формы работают лучше.
  • Переходите к тригерам.
  • В триггерах выбираем созданный ранее – Custom – new email subscriber.
  • Нажмите «Созранить»

Следующие (и окончательные) шаги:

  • Проверьте все новые теги в консоли предварительного просмотра GTM и отладки (если они правильно срабатывают).
  • Проверьте свои отчеты в режиме реального времени в учетной записи Google Analytics (нормально ли работают события new_subscriber).
  • Установите Google Tag Assistant (в браузере Chrome), чтобы убедиться, что ваш тег ремаркетинга срабатывает правильно.

 

ВЫВОД

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

Уровень данных Диспетчера тегов Google невероятно полезен, когда речь идет о пользовательских данных и триггерах. Если вы чувствуете, что это понятие трудно освоить, я предлагаю начать с нескольких событий, а затем увеличить. Со временем вам станет проще.

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

comments powered by HyperComments

Об авторе

Антон Курусь

Создатель этого блога. Люблю узнавать новое и развиваться в интересующих меня областях.
Хочешь сбежать от повседневности — не останавливайся в развитии.

Просмотреть все сообщения