Google Tag Manager для Magento 2: Как настроить и использовать?

  •   
  •   21583
  •   5 мин
  •   68

Google Tag Manager (GTM) — это система управления тегами, позволяющая быстро и удобно обновлять теги и фрагменты кода на вашем сайте Magento 2 без необходимости изменять код сайта. Вместо того, чтобы напрямую добавлять код отслеживания Google Analytics, Facebook Pixel, Google Ads и других сервисов, вы добавляете их через GTM. Это значительно упрощает процесс управления маркетинговыми и аналитическими инструментами.

Преимущества использования GTM в Magento 2

  • Централизованное управление тегами: Все теги управляются из одного места, что упрощает их добавление, редактирование и удаление.
  • Быстрое развертывание: Обновления тегов публикуются мгновенно, без необходимости ждать релизов кода.
  • Уменьшение нагрузки на сайт: Асинхронная загрузка тегов предотвращает замедление загрузки страниц.
  • Улучшенная организация: Теги, триггеры и переменные организованы, что делает их более понятными и управляемыми.
  • Возможность тестирования: GTM предоставляет инструменты для тестирования и отладки тегов перед их публикацией.

Основные понятия GTM: теги, триггеры, переменные, слои данных

  • Теги: Фрагменты кода, которые выполняются на странице (например, Google Analytics, Facebook Pixel).
  • Триггеры: Условия, при которых теги срабатывают (например, просмотр страницы, клик по кнопке).
  • Переменные: Хранят данные, которые используются тегами и триггерами (например, URL страницы, ID продукта).
  • Слой данных (Data Layer): JSON-объект, который содержит информацию о действиях пользователя и состоянии страницы, доступную для GTM.

Настройка Google Tag Manager в Magento 2

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

  1. Перейдите на сайт Google Tag Manager.
  2. Войдите в свой аккаунт Google или создайте новый.
  3. Создайте новый аккаунт GTM, указав название компании и страну.
  4. Создайте новый контейнер GTM, выбрав «Веб-сайт» в качестве платформы.

Установка GTM кода в Magento 2 (через админ-панель и вручную)

Через админ-панель:

Многие расширения Magento 2 предлагают интеграцию с GTM. Если вы используете такое расширение, просто введите ID контейнера GTM в настройках расширения.

Вручную:

  1. Скопируйте код GTM из интерфейса GTM.
  2. Войдите в админ-панель Magento 2.
  3. Перейдите в Content > Design > Configuration.
  4. Выберите область применения (например, Default Website).
  5. Разверните раздел HTML Head.
  6. Вставьте первый фрагмент кода GTM в поле Scripts and Stylesheets.
  7. Разверните раздел HTML Body.
  8. Вставьте второй фрагмент кода GTM сразу после тега <body> . Добавьте следующий код в файл default_head_blocks.xml вашего шаблона (обычно находится в app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/):
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="after.body.start">
            <block class="Magento\Framework\View\Element\Template" name="gtm_body" template="Magento_Theme::gtm_body.phtml"/>
        </referenceContainer>
    </body>
</page>

Затем создайте файл gtm_body.phtml в app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/ со следующим содержимым:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Замените GTM-XXXXXXX на ваш ID контейнера GTM.

  1. Сохраните изменения и очистите кэш Magento.

Проверка правильности установки GTM кода

  • GTM Preview Mode: Используйте режим предварительного просмотра GTM, чтобы убедиться, что теги срабатывают правильно.
  • Google Tag Assistant: Установите расширение Google Tag Assistant для Chrome, чтобы проверить наличие GTM кода на странице.

Настройка основных тегов в GTM для Magento 2

Google Analytics 4 (GA4): отслеживание просмотров страниц, событий, электронной торговли

  1. Создайте новый тег в GTM.
  2. Выберите тип тега «Google Analytics: GA4 Configuration».
  3. Введите свой Measurement ID из GA4.
  4. Выберите триггер «All Pages» (или создайте свой триггер, если необходимо).
  5. Создайте тег «Google Analytics: GA4 Event» для отслеживания событий (например, клики по кнопкам).
  6. Настройте передачу данных электронной торговли, используя слой данных (Data Layer).

Facebook Pixel: отслеживание конверсий и ретаргетинг

  1. Создайте новый тег в GTM.
  2. Выберите тип тега «Facebook Pixel».
  3. Введите свой Pixel ID.
  4. Выберите триггер «All Pages» (или создайте свой триггер, если необходимо).
  5. Настройте передачу данных о конверсиях, используя слой данных (Data Layer) и стандартные события Facebook Pixel (например, AddToCart, Purchase).

Google Ads Conversion Tracking: отслеживание конверсий для рекламных кампаний

  1. Создайте новый тег в GTM.
  2. Выберите тип тега «Google Ads Conversion Tracking».
  3. Введите свой Conversion ID и Conversion Label из Google Ads.
  4. Выберите триггер, соответствующий конверсии (например, страница подтверждения заказа).
  5. Настройте передачу значения конверсии, используя слой данных (Data Layer).

Работа со слоем данных (Data Layer) в Magento 2 и GTM

Что такое Data Layer и как он работает

Data Layer – это объект JavaScript, который содержит информацию о странице и действиях пользователя. GTM может использовать эту информацию для настройки триггеров и передачи данных в теги. Data Layer позволяет отслеживать различные события и параметры, такие как просмотры страниц, добавления в корзину, покупки и т.д.

Реклама

Реализация Data Layer в Magento 2 (стандартные данные Magento)

Magento 2 предоставляет некоторый объем данных в слое данных по умолчанию. Вы можете просмотреть эти данные, открыв консоль разработчика в браузере и введя dataLayer.

Использование Data Layer для передачи расширенной информации (например, пользовательские данные, информация о продукте)

Для передачи расширенной информации необходимо добавить код в шаблоны Magento 2. Например, для передачи информации о продукте на странице продукта, добавьте следующий код в файл view.phtml (обычно находится в app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view/):

<?php
/**
 * @var \Magento\Catalog\Block\Product\View $block
 * @var \Magento\Catalog\Model\Product $product
 */
$product = $block->getProduct();
?>

<script type="text/javascript">
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'productDetail',
 'product': {
 'id': '<?php echo $product->getId(); ?>',
 'name': '<?php echo $product->getName(); ?>',
 'price': '<?php echo $product->getPrice(); ?>',
 'category': '<?php echo $product->getCategory()->getName(); ?>'
 }
 });
</script>

Затем в GTM можно создать переменные для извлечения данных из Data Layer (например, product.id, product.name).

Продвинутые техники использования GTM в Magento 2

Отслеживание пользовательских событий (например, клики по кнопкам, заполнение форм)

Для отслеживания кликов по кнопкам можно использовать триггер «Click — All Elements» или «Click — Just Links» и настроить фильтры на основе CSS-селекторов или ID элементов.

Для отслеживания заполнения форм можно использовать триггер «Form Submission» и настроить фильтры на основе ID формы.

Использование переменных для динамического отслеживания данных

GTM позволяет создавать различные типы переменных, такие как переменные Data Layer, переменные JavaScript, переменные CSS-селектора и т.д. Эти переменные можно использовать для динамического отслеживания данных и передачи их в теги.

Например, можно создать переменную Data Layer для извлечения ID продукта из Data Layer и передать его в тег Google Analytics.

Тестирование и отладка тегов в GTM

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

Также можно использовать консоль разработчика в браузере для отладки тегов и Data Layer.

Использование пользовательских HTML тегов и JavaScript переменных

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

Например, можно создать пользовательский HTML тег для отправки данных в стороннюю систему аналитики или создать JavaScript переменную для вычисления сложного значения на основе данных из Data Layer.

Пример пользовательской JavaScript переменной для извлечения домена из URL:

function() {
  var url = window.location.hostname;
  return url;
}

Используйте этот код в JavaScript переменной типа «Custom JavaScript» в GTM.

Добавить комментарий

Реклама
Как добавить стандартное отклонение к Box Plot в Matplotlib: Полное руководство и альтернативные подходы?
Box plot (или, по-русски, «ящик с усами») – мощный инструмент визуализации для представления распределения данных.
  •  1
  •   2025
Обзор и практическое применение меток для последней точки данных в Matplotlib: От основ до продвинутых техник
Matplotlib – мощная библиотека для визуализации данных в Python, предоставляющая широкие возможности для создания разнообразных графиков.
  •  2
  •   2025
Google Analytics GA3 на GA4: Полное Руководство по Переходу
Переход на Google Analytics 4 (GA4) — это не просто обновление, а фундаментальное изменение в подходе к веб-аналитике.
  •  2
  •   2025