jetclic-core 1.0.0

package/README.md

@@ -0,0 +1,17 @@
+# JetClic Core 🚀
+Sistema centralizado de eventos y prospección para landing pages.
+
+## Características
+- **Captura de UTMs**: Almacenamiento automático en `sessionStorage`.
+- **GTM Ready**: Dispara eventos `jc_interaction` y `webform_contact`.
+- **Validación de Formularios**: Manejo de éxito/error con atributos `data-feedback`.
+- **Carga Inteligente**: reCAPTCHA Enterprise solo se carga al interactuar con el formulario.
+
+## Uso
+Inyecta tus IDs en el `window` antes de cargar el script:
+```html
+<script is:inline>
+  window.tagmanagerId = 'GTM-XXXX';
+  window.recaptchaProjectId = '6Lc...';
+</script>
+<script src="[https://cdn.jsdelivr.net/npm/jetclic-core@1/jetclic-core.js](https://cdn.jsdelivr.net/npm/jetclic-core@1/jetclic-core.js)" defer></script>

package/jetclic-core.js

@@ -0,0 +1,303 @@
+/**
+ * JetClic Core JS
+ * Unified logic for Forms, Analytics, and UI Interactions
+ * Version: 1.0.0
+ */
+
+(function () {
+  "use strict";
+
+  // Configuration
+  const CONFIG = {
+    gtmBase: "https://www.googletagmanager.com/gtm.js",
+    whatsappBase: "https://api.whatsapp.com/send",
+    grecaptchaAction: "submit",
+  };
+
+  // State
+  const state = {
+    tagmanagerId: window.tagmanagerId || null,
+    recaptchaProjectId: window.recaptchaProjectId || null,
+    whatsappMessage: window.whatsappMessage || "Hola, ¿Me ayudaría con una cotización?",
+  };
+
+  //----------------------------------------------
+  // Information Collection & GTM Init
+  //----------------------------------------------
+  function init() {
+    captureUTMs();
+    initGTM();
+    initRecaptcha();
+    attachGlobalListeners();
+  }
+
+  function captureUTMs() {
+    const params = new URLSearchParams(window.location.search);
+    const keys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
+    
+    keys.forEach(key => {
+        if (params.has(key)) {
+            sessionStorage.setItem(key, params.get(key));
+        }
+    });
+  }
+
+  function initRecaptcha() {
+      if (!state.recaptchaProjectId) return;
+      
+      const loadScript = () => {
+          if (document.getElementById('recaptcha-script')) return;
+          const script = document.createElement('script');
+          script.id = 'recaptcha-script';
+          script.src = `https://www.google.com/recaptcha/enterprise.js?render=${state.recaptchaProjectId}`;
+          script.async = true;
+          script.defer = true;
+          document.head.appendChild(script);
+      };
+
+      // Lazy load on interaction with forms
+      const forms = document.querySelectorAll('form[data-action="form_submit"]');
+      if (forms.length > 0) {
+          forms.forEach(form => {
+              form.addEventListener('focusin', loadScript, { once: true });
+          });
+      }
+  }
+
+  function initGTM() {
+    if (!state.tagmanagerId || state.tagmanagerId === "YOUR_GOOGLE_TAG_MANAGER_ID") return;
+
+    // GTM Script
+    (function (w, d, s, l, i) {
+      w[l] = w[l] || [];
+      w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+      var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s),
+        dl = l != "dataLayer" ? "&l=" + l : "";
+      j.async = true;
+      j.src = CONFIG.gtmBase + "?id=" + i + dl;
+      f.parentNode.insertBefore(j, f);
+    })(window, document, "script", "dataLayer", state.tagmanagerId);
+
+    // GTM NoScript
+    const ns = document.createElement("noscript");
+    ns.innerHTML = `<iframe src="https://www.googletagmanager.com/ns.html?id=${state.tagmanagerId}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`;
+    document.body.appendChild(ns);
+  }
+
+  //----------------------------------------------
+  // Global Event Delegation
+  //----------------------------------------------
+  function attachGlobalListeners() {
+    document.addEventListener("click", handleGlobalClick);
+    document.addEventListener("submit", handleGlobalSubmit);
+  }
+
+  function handleGlobalClick(e) {
+    const target = e.target.closest("[data-action]");
+    if (!target) return;
+
+    const action = target.getAttribute("data-action");
+
+    switch (action) {
+      case "whatsapp":
+        handleWhatsappClick(e, target);
+        break;
+      case "phone":
+        handlePhoneClick(e, target);
+        break;
+    }
+  }
+
+  function handleGlobalSubmit(e) {
+    const target = e.target;
+    if (target.matches('form[data-action="form_submit"]')) {
+      e.preventDefault();
+      handleFormSubmit(target);
+    }
+  }
+
+  //----------------------------------------------
+  // Action Handlers
+  //----------------------------------------------
+  function handleWhatsappClick(e, element) {
+    e.preventDefault();
+    const href = element.getAttribute("href") || "";
+    const phone = href.replace(/\D/g, ""); 
+    
+    // Track Event
+    pushToDataLayer("jc_interaction", "whatsapp_contact", href);
+    localStorage.setItem("converted", "1");
+
+    // Construct URL
+    const finalUrl = `${CONFIG.whatsappBase}?phone=${phone}&text=${encodeURIComponent(
+      state.whatsappMessage
+    )}`;
+
+    // Open
+    setTimeout(() => {
+        window.open(finalUrl, "_blank");
+    }, 300);
+  }
+
+  function handlePhoneClick(e, element) {
+    // Let default action happen (tel: link) but track it first/parallel
+    const href = element.getAttribute("href");
+    pushToDataLayer("jc_interaction", "phone_contact", href);
+    localStorage.setItem("converted", "1");
+  }
+
+  //----------------------------------------------
+  // Form Handling
+  //----------------------------------------------
+  function handleFormSubmit(form) {
+    // 1. UI Updates (Optimistic)
+    const submitBtn = form.querySelector('[type="submit"]');
+    const originalBtnText = submitBtn.textContent;
+    const errorEl = form.querySelector('[data-feedback="error"]');
+    const successEl = form.querySelector('[data-feedback="success"]');
+
+    // Helper to reset UI
+    const resetUI = () => {
+      submitBtn.disabled = false;
+      submitBtn.textContent = originalBtnText;
+    };
+
+    const showMsg = (el, show) => {
+        if(el) {
+            if(show) el.classList.remove("d-none");
+            else el.classList.add("d-none");
+        }
+    };
+
+    // Hide messages
+    showMsg(errorEl, false);
+    showMsg(successEl, false);
+
+    // 2. Validation
+    form.classList.add("was-validated");
+    if (!form.checkValidity()) {
+      return;
+    }
+
+    submitBtn.disabled = true;
+    submitBtn.textContent = "Enviando...";
+
+    // 3. Data Preparation
+    const formData = new FormData(form);
+    const rawData = Object.fromEntries(formData.entries());
+    
+    // Normalize Data
+    const normalizedData = {
+        ...rawData,
+        email: normalizeEmail(rawData.email),
+        phone: normalizePhone(rawData.phone),
+        name: (rawData.name || "").trim()
+    };
+    
+    // Inject UTMs from sessionStorage
+    const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
+    utmKeys.forEach(key => {
+        const val = sessionStorage.getItem(key);
+        if (val) {
+            normalizedData[key] = val;
+            formData.set(key, val);
+        }
+    });
+
+    // 4. Submission Logic (with reCAPTCHA support)
+    const processSubmission = (token = null) => {
+        if (token) {
+            formData.set("recaptcha_token", token);
+            // Update hidden input if exists for legacy compatibility
+            const tokenInput = form.querySelector("#recaptcha-token");
+            if(tokenInput) tokenInput.value = token;
+        }
+
+        // We use formData here to preserve multipart/form-data if needed, 
+        // but normalizedData contains the UTMs as well if we were sending JSON.
+        // The fetch uses formData, which we updated with UTMs above.
+
+        fetch(form.getAttribute("action"), {
+            method: "POST",
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                // Track Conversion
+                if (normalizedData.email || normalizedData.phone) {
+                    window.dataLayer = window.dataLayer || [];
+                    window.dataLayer.push({
+                        event: "webform_contact",
+                        user_data: {
+                            email: normalizedData.email,
+                            phone_number: normalizedData.phone,
+                            name: normalizedData.name,
+                        },
+                    });
+                }
+
+                // Success UI
+                form.reset();
+                form.classList.remove("was-validated");
+                showMsg(successEl, true);
+                setTimeout(() => showMsg(successEl, false), 6000);
+            } else {
+                throw new Error(data.message || "Server Error");
+            }
+        })
+        .catch(err => {
+            console.error("Form Submission Error:", err);
+            showMsg(errorEl, true);
+        })
+        .finally(() => {
+            resetUI();
+        });
+    };
+
+    // 5. Execute reCAPTCHA if available
+    if (state.recaptchaProjectId && window.grecaptcha) {
+        grecaptcha.enterprise.ready(function() {
+            grecaptcha.enterprise.execute(state.recaptchaProjectId, {action: CONFIG.grecaptchaAction})
+            .then(processSubmission)
+            .catch(err => {
+                console.error("reCAPTCHA Error:", err);
+                showMsg(errorEl, true);
+                resetUI();
+            });
+        });
+    } else {
+        processSubmission();
+    }
+  }
+
+  //----------------------------------------------
+  // Utilities
+  //----------------------------------------------
+  function pushToDataLayer(event, action, label) {
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      event: event,
+      action: action,
+      label: label,
+    });
+  }
+
+  function normalizeEmail(email) {
+    return (email || "").toLowerCase().trim();
+  }
+
+  function normalizePhone(phone) {
+    let clean = (phone || "").replace(/\D/g, "");
+    // MX heuristic: if 10 digits, prepend 52
+    if (clean.length === 10) {
+      clean = "52" + clean;
+    }
+    return clean ? "+" + clean : "";
+  }
+
+  // Initialize
+  document.addEventListener("DOMContentLoaded", init);
+
+})();

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "jetclic-core",
+  "version": "1.0.0",
+  "description": "Núcleo lógico para landing pages de alta conversión: UTMs, GTM y Formularios.",
+  "main": "jetclic-core.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "marketing",
+    "google-ads",
+    "conversion",
+    "gtm"
+  ],
+  "author": "JetClic Architecture",
+  "license": "MIT"
+}