Отслеживание нажатия на кнопку оформления заказа в корзине

При настройке аналитики интернет-магазина важно отслеживать момент, когда покупатель нажимает кнопку оформления заказа. Это позволяет фиксировать цели в Яндекс.Метрике и анализировать конверсию на этапе оформления.

В Shop-Script при одностраничном оформлении заказа кнопка подтверждения рендерится динамически, поэтому стандартное отслеживание через GTM или простой обработчик событий может не сработать. Ниже описан рабочий способ привязки события к кнопке оформления заказа.

Куда добавлять код

Код добавляется в файл шаблона order.html вашей темы дизайна. Найти его можно по пути:

wa-data/public/shop/themes/<ваша_тема>/order.html

Или через бекенд: Магазин → Витрина → Темы дизайна → редактирование файла order.html.

Код отслеживания

Вставьте следующий JavaScript-код перед блоком инициализации страницы оформления заказа:

$(document).ready(function () {

    $(".wa-submit-button").click(function() {
        ym(XXXXXXXXX, 'reachGoal', 'TARGET_ORDER');
        console.log('TARGET_ORDER №1');
    });

});

Этот блок нужно разместить выше кода инициализации, который выглядит так:

(function ($) {
(typeof window.ShopOrderPage === "function" ? init() : load().then(init));

Настройка параметров

• XXXXXXXXX — замените на номер вашего счётчика Яндекс.Метрики. Найти его можно в настройках счётчика в Яндекс.Метрике.
• TARGET_ORDER — название цели, которое вы задали в настройках Яндекс.Метрики. Цель должна быть создана с типом «JavaScript-событие».

Создание цели в Яндекс.Метрике

1. Откройте Яндекс.Метрика → Настройки → Цели.
2. Нажмите «Добавить цель».
3. Выберите тип «JavaScript-событие».
4. В поле «Идентификатор цели» укажите TARGET_ORDER (или своё название).
5. Сохраните цель.

Проверка работы

После добавления кода и настройки цели:

1. Откройте корзину с товарами на сайте.
2. Откройте консоль браузера (F12 → Console).
3. Нажмите кнопку оформления заказа.
4. В консоли должно появиться сообщение TARGET_ORDER №1 — это подтверждает, что обработчик сработал.
5. Через несколько минут проверьте отчёт «Конверсии» в Яндекс.Метрике.

Заметка

После проверки строку console.log('TARGET_ORDER №1'); можно удалить — она нужна только для отладки.

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

• Код использует jQuery-селектор .wa-submit-button — это стандартный класс кнопки оформления заказа в Shop-Script. Если в вашей теме класс отличается, скорректируйте селектор.
• При одностраничном оформлении (single-page checkout) кнопка может перерисовываться динамически. Если обработчик перестаёт работать после AJAX-обновления формы, используйте делегирование событий:

$(document).ready(function () {

    $(document).on("click", ".wa-submit-button", function() {
        ym(XXXXXXXXX, 'reachGoal', 'TARGET_ORDER');
    });

});

• Аналогичным образом можно отслеживать и другие действия: нажатие кнопки «В корзину», переход к оплате и т.д. — достаточно изменить селектор и название цели.