Проблема: Хранение купона и отправка в GA4

Вопрос или проблема

public function trackCouponEvent() {
    if (!is_checkout() && !is_cart()) {
        return;
    }
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM полностью загружен');

            // Переменная для хранения кода купона
            let couponCode="";
            
            // Функция для привязки слушателя событий, когда поле ввода появится
            function attachCouponInputListener() {
                const couponInput = document.getElementById('wc-block-components-totals-coupon__input-0');
                if (couponInput) {
                    console.log('Поле ввода купона найдено!');
    
                    // Слушаем изменения ввода
                    couponInput.addEventListener('input', function(event) {
                        couponCode = event.target.value;  // Сохраняем значение кода купона
                        console.log('Введён код купона: ', couponCode);  // Логируем код купона для отладки
                    });
    
                    return true;  // Возвращаем true, когда поле найдено и слушатель событий привязан
                }
                return false;  // Возвращаем false, если поле ввода ещё недоступно
            }

            console.log('Попытка инициализации MutationObserver');
    
            // Используем MutationObserver для наблюдения за изменениями в DOM (когда поле ввода купона добавляется)
            const observer = new MutationObserver(function(mutations, observer) {
                if (attachCouponInputListener()) {
                    console.log('Наблюдатель отключён после нахождения поля ввода купона');
                    observer.disconnect();  // Прекращаем наблюдение, как только поле найдено и слушатель привязан
                }
            });

            console.log('Наблюдатель инициализирован:', observer);
    
            // Начинаем наблюдение за телом документа на наличие изменений в детях
            observer.observe(document.body, { childList: true, subtree: true });
    
            // Функция для отправки события купона в Google Analytics при применении
            function sendCouponEventToGA(coupon) {
                console.log('Купон применён: ', coupon);  // Логируем применённый купон (для отладки)
                
                // Отправляем событие в Google Analytics
                if (typeof gtag === 'function') {
                    gtag('event', 'apply_coupon', {
                        'event_category': 'Ecommerce',
                        'event_label': coupon,
                        'coupon': coupon
                    });
                    console.log('Событие GA отправлено для купона:', coupon);
                } else {
                    console.error('gtag не определен');
                }
            }

            // Слушаем AJAX запросы, чтобы обнаружить, когда купон применяется
            // Слушаем отправку формы купона

        });
    </script>
    <?php
}

Ответ или решение

Для решения задачи по хранению купона и отправке его в Google Analytics 4 (GA4) следует всего лишь немного доработать ваш код и использовать AJAX-запросы для отслеживания отправки купонов. Ниже приведен усовершенствованный вариант вашего кода:

public function trackCouponEvent() {
    if (!is_checkout() && !is_cart()) {
        return;
    }
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM полностью загружен');

            // Переменная для хранения кода купона
            let couponCode = "";

            // Функция для прикрепления обработчика событий к полю ввода, когда оно появится
            function attachCouponInputListener() {
                const couponInput = document.getElementById('wc-block-components-totals-coupon__input-0');
                if (couponInput) {
                    console.log('Поле ввода купона найдено!');

                    // Слушаем изменения ввода
                    couponInput.addEventListener('input', function(event) {
                        couponCode = event.target.value;  // Сохраняем значение кода купона
                        console.log('Введенный код купона: ', couponCode);  // Логируем код купона для отладки
                    });

                    // Здесь можно добавить обработчик события отправки формы купонов
                    const couponForm = document.getElementById('coupon_form_id'); // Укажите правильный ID вашей формы купонов
                    couponForm.addEventListener('submit', function(event) {
                        event.preventDefault(); // Отключаем стандартное поведение формы
                        // Отправляем AJAX-запрос для применения купона
                        applyCoupon(couponCode);
                    });

                    return true;  // Возвращаем true, когда ввод найден и обработчик события присоединен
                }
                return false;  // Возвращаем false, если ввод еще не доступен
            }

            console.log('Попытка инициализации MutationObserver');

            // Используем MutationObserver для отслеживания изменений в DOM (когда добавляется ввод купона)
            const observer = new MutationObserver(function(mutations, observer) {
                if (attachCouponInputListener()) {
                    console.log('Наблюдатель отключен после нахождения поля ввода купона');
                    observer.disconnect();  // Останавливаем наблюдение, как только ввод найден и обработчик события присоединен
                }
            });

            console.log('Наблюдатель инициализирован:', observer);

            // Начинаем наблюдение за изменениями в документе
            observer.observe(document.body, { childList: true, subtree: true });

            // Функция для отправки события купона в GA
            function sendCouponEventToGA(coupon) {
                console.log('Купон применен: ', coupon);  // Логируем примененный купон (для отладки)

                // Отправляем событие в Google Analytics
                if (typeof gtag === 'function') {
                    gtag('event', 'apply_coupon', {
                        'event_category': 'Ecommerce',
                        'event_label': coupon,
                        'coupon': coupon
                    });
                    console.log('Событие GA отправлено для купона:', coupon);
                } else {
                    console.error('gtag не определен');
                }
            }

            // Функция для применения купона
            function applyCoupon(coupon) {
                if (coupon) {
                    // Здесь вы можете выполнить AJAX-запрос для применения купона на сервере
                    fetch('/path/to/your/coupon-apply-endpoint', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({ coupon: coupon })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            sendCouponEventToGA(coupon);  // Отправляем событие в GA
                        } else {
                            console.error('Ошибка при применении купона:', data.message);
                        }
                    })
                    .catch(error => console.error('Ошибка AJAX:', error));
                }
            }

        });
    </script>
    <?php
}

Объяснение изменений:

1. Отслеживание события отправки формы: Добавлен обработчик события для формы купонов, который предотвращает стандартное поведение и применяет купон через AJAX.

2. AJAX-запрос: Внутри функции applyCoupon, используя fetch, отправляется AJAX-запрос для применения купона на сервере. Важно указать правильный путь к вашему обработчику на сервере.

3. Отправка событий в GA: Если применение купона прошло успешно (проверяется в ответе от сервера), вызывается функция для отправки события в GA.

4. Реакция на ошибки: Добавлены логирования для упрощенной отладки ошибок, которые могут возникнуть при отправке AJAX-запроса.

Убедитесь, что вы заменили /path/to/your/coupon-apply-endpoint на фактический URL вашего обработчика, который обрабатывает применение купонов. Это решение должно эффективно решить вашу задачу по хранению и отправке купонов в GA4.