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

Для показа максимальной универсальности, на примере я настроил события view_item и add_to_cart не для магазина, а в каталоге свадебных фотографов.

Удобнее, чем отслеживание целей по URL:-)

С чем работаем.

Пример карточки профиля специалиста: fotkay.ru/member/122#tab-about
member — регулярный путь URL у карточки каталога. Он будет условием для тригера.
122 — переменная ID карточки. Я извлеку её из ссылки с помощью JS кода и передам в datalayer вместе с остальной информацией о товаре.

Что откуда будем брать:

Name и Category находятся в видимой части страницы. Их получим с помощью селектора CSS.

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

Получаем значения из селектора CSS.

Селектор — путь до элемента кода. С его помощью получим значения из видимой части страницы. На примере я получу name.

Наведите на центр целевого элемента мышью → нажмите правую кнопку → В открывшемся меню выберите «Посмотреть код».

Открылось окно разработчика.

Вы видите подсвеченную строку с кодом целевого элемента.

В моём случае: <div class=»name»>Александр Бачевский</div>

Получаем селектор, с целевым элементом:

1. Нажмите правой кнопкой мыши по строке с кодом целевого элемента.
2. Копировать.
3. Копировать selector.

Так выглядит селектор моего name:

body > section.light-bg.light-bg-fix > div.container > div > div > div.col-xs-12.col-sm-9.col-md-10.col-lg-10.user-data > div:nth-child(1) > div.col-xs-12.col-sm-12.col-md-5.col-lg-6 > div.name

Покажу в наглядном древовидном формате (кому-то так легче будет понять):

body
    > section.light-bg.light-bg-fix
        > div.container
            > div
                > div
                    > div.col-xs-12.col-sm-9.col-md-10.col-lg-10.user-data
                        > div:nth-child(1)
                            > div.col-xs-12.col-sm-12.col-md-5.col-lg-6
                                > div.name

Настройка пользовательских переменных в GTM

Идём в раздел Переменные → Создать → Элемент DOM.

Метод выбора = Селектор CSS.

Селектор элемента = скопированный в буфере обмена селектор нашего name.

Тем же принципом я получу category.

В моём случае ID товара в видимой части нет, а цена имеет разный формат. Поэтому остальные значения придется получать с помощью JS кода. Идём:

Переменные → Создать → тип переменной Собственный код JavaScript.

Достаем ID из URL.

Пример URL, из которого возьмем ID: fotkay.ru/member/122#tab-about, с помощью кода:

// Определение функции
function() {
  // Получение текущего URL страницы
  var url = window.location.href;

  // Если URL содержит подстроку "/member/" за которой следует одна или более цифр, эти цифры будут извлечены и станут значением offerId.
  var offerId = url.match(/\/member\/(\d+)/);

  // Возвращение ID, если он найден, в противном случае возвращается null
  return offerId ? offerId[1] : null;
} 

Если в вашем магазине путь карточки товара имеет схожую структуру, например: site.ru/product/123, то можете использовать код для извлечения ID из ссылки.
Просто замените member на product.

Обработка разных форматов значений «Price».

В моём случае поле Стоимость работы в час — свободное. И у каждого указан в разных форматах (текст, разделители, несколько цифровых значений).
Примеры:
— от 2500 р/час
— от 5.000 р/час
— от 4000 до 5000

Следующий код возвращает нижнюю цену из:

function() {
  // Получение текстового содержимого из указанного селектора
  var priceString = document.querySelector('#tab-about > div.user-about > div.padding2x > div:nth-child(2) > div.fields > div:nth-child(1) > div.value').textContent;

  // Ищем все числа в строке, учитывая разделитель тысяч
  var prices = priceString.match(/\d[\d,.]*\d|\d/g);

  // Проверяем, найдены ли числа и есть ли хотя бы одно число
  if (prices && prices.length >= 1) {
    // Преобразование первого числа в целое число после удаления всех символов, кроме цифр
    var minPrice = parseInt(prices[0].replace(/[^\d]/g, ''));
    return minPrice;
  }

  // Возвращение null, если цены не найдены
  return null;
} 

У вас цена тоже содержит разные текстовые значения? Скопируйте код и замените на свой выделенный жирным шрифтом селектор css (значение внутри кавычек) .

Создаем событие view_item из Пользовательского HTML

Создаем событие view_item. Оно передаст значения, полученные нашими пользовательскими переменными:

 <script>
  dataLayer.push({
    ';event': 'view_item', // Создаем событие view_item
    'ecommerce': {
      'items': [
        { // Перечисляем все наши переменные в формате ключ: полученное значение из переменной
          'name';: {{e.name}}, // Название товара
          &amp;#039;price';: {{e.price}}, // Цена
          9;category': {{e.category}}, // Категория товара
          'id': {{e.id}} // ID товара
        }
      ]
    }
  });
</script>

Настраиваем на триггеры, срабатывающие при посещении карточки товара.

Создаем событие Добавили в корзину.

Скопировал созданный тег, заменил в коде view_item на add_to_cart, настроил триггер на просмотр контактов.

Запускаем предварительный просмотр. Выполняем условия для срабатывания тригера:

Настраиваем передачу данных в GA

Подразумевается, что у вас уже настроен Тег Google (установлена связь с GA4).

Создайте тег типа Google Аналитика: событие GA4.

Настройте на соответствующий триггер.

Название события:

view_item для просмотра карточки,

add_to_cart для добавления в корзину.

Я показал логику настройки передачи данных в DataLayer на примере двух событий: add_to_cart и view_item. Тем же принципом добавьте необходимые вам события (купили, удалили из корзины и т.д.).

Метрика

В настройках счетчика включите «Электронная коммерция». В коде счетчика добавится работа с datalayer. Информация начнет передаваться, после обновления счетчика на сайте.

Строим отчет (скрин 1),
Видим результат (скрин 2).

Не ограничивайтесь!

Эл.ком (как и дин.рем) можно применить в каталогах:

• Товаров.
• Специалистов.
• Фильмов
• Да в любом каталоге, чего угодно:-)