document.addEventListener('DOMContentLoaded', function() {
// Variables de control para no disparar eventos repetidos
var checkoutStarted = false;
var shippingInfoAdded = false;
var paymentInfoStarted = false;
// ---------------------------------------------------------
// 1. BEGIN_CHECKOUT
// Selector exacto sacado de tu HTML: id="checkout_offer_member_email"
// ---------------------------------------------------------
var emailField = document.getElementById('checkout_offer_member_email');
if (emailField) {
// Usamos 'one-time' listener logic manual
emailField.addEventListener('input', function() {
if (!checkoutStarted) {
if (typeof gtag === 'function') {
gtag('event', 'begin_checkout');
}
console.log('GA4: begin_checkout disparado');
checkoutStarted = true;
}
});
}
// ---------------------------------------------------------
// 2. ADD_SHIPPING_INFO
// Selector exacto sacado de tu HTML: id="checkout_offer_extra_contact_information_address_line_1"
// ---------------------------------------------------------
var addressField = document.getElementById('checkout_offer_extra_contact_information_address_line_1');
if (addressField) {
// Disparamos cuando el usuario TERMINA de escribir y sale del campo (blur)
addressField.addEventListener('blur', function() {
// Solo si el campo no está vacío y no se ha enviado antes
if (!shippingInfoAdded && addressField.value.trim() !== "") {
if (typeof gtag === 'function') {
gtag('event', 'add_shipping_info');
}
console.log('GA4: add_shipping_info disparado');
shippingInfoAdded = true;
}
});
}
// ---------------------------------------------------------
// 3. ADD_PAYMENT_INFO
// Aquí es más complejo porque es una estructura de Stripe/Kajabi con acordeón.
// Tu HTML muestra un contenedor con data-testid="payment-accordion-wrapper"
// Vamos a escuchar clics en CUALQUIER botón de método de pago dentro de ese bloque.
// ---------------------------------------------------------
var paymentWrapper = document.querySelector('[data-testid="payment-accordion-wrapper"]');
if (paymentWrapper) {
// Usamos delegación de eventos: escuchamos en el padre
paymentWrapper.addEventListener('click', function(e) {
// Si ya se disparó, no hacemos nada
if (paymentInfoStarted) return;
// Buscamos si el clic fue en un botón de acordeón (tarjeta, paypal, klarna...)
// El elemento clickable en tu HTML tiene la clase "p-AccordionButton"
var clickedButton = e.target.closest('.p-AccordionButton');
if (clickedButton) {
if (typeof gtag === 'function') {
gtag('event', 'add_payment_info', {
payment_type: clickedButton.getAttribute('data-value') || 'unknown'
// Esto capturará "card", "paypal", "klarna" automáticamente
});
}
console.log('GA4: add_payment_info disparado para ' + clickedButton.getAttribute('data-value'));
paymentInfoStarted = true;
}
});
}
});