mkfashion-sdk 2.4.9 → 2.7.0

package/gtm-snippet.js

@@ -0,0 +1,116 @@
+/**
+ * mKFashion SDK — Injection Snippet (versão compacta)
+ *
+ * Auto-detecta o SKU do produto na PDP, carrega o SDK e renderiza o botão.
+ * Quando o cliente adiciona ao carrinho dentro do provador, faz POST
+ * pra /cart/add.js com tamanho/cor se disponíveis.
+ *
+ * USO: cole o conteúdo no GTM (Custom HTML tag), no console DevTools de
+ * uma PDP, ou converta pra bookmarklet.
+ *
+ * CONFIG: troque SEU_PROJECT_ID pelo projectId real do mKFashion.
+ */
+(function () {
+  // Pode ser sobrescrito setando window.MKFASHION_PROJECT_ID antes deste script
+  // (útil pra GTM Variables ou ambientes de teste).
+  var PROJECT_ID = window.MKFASHION_PROJECT_ID || 'SEU_PROJECT_ID';
+
+  if (window.mkfashion) return go();
+  var s = document.createElement('script');
+  s.src = 'https://unpkg.com/mkfashion-sdk/src/mkfashion.js';
+  s.async = true;
+  s.onload = go;
+  document.head.appendChild(s);
+
+  // Detecta SKU do produto na PDP, em ordem de prioridade.
+  function detect() {
+    // 1. Override manual via ?sku= ou ?identifier=
+    var qs = new URLSearchParams(location.search);
+    if (qs.get('sku')) return qs.get('sku');
+    if (qs.get('identifier')) return qs.get('identifier');
+
+    // 2. Konfidency (Marisa, Renner e outras marcas BR usam esse serviço de reviews)
+    if (window.konfidencyData && window.konfidencyData.sku) {
+      return String(window.konfidencyData.sku);
+    }
+
+    // 3. dataLayer (GA4 / Universal Analytics Enhanced Ecommerce)
+    if (window.dataLayer) {
+      for (var i = window.dataLayer.length - 1; i >= 0; i--) {
+        var x = (window.dataLayer[i] || {}).ecommerce;
+        if (!x) continue;
+        var p = (x.detail && x.detail.products && x.detail.products[0]) ||
+                (x.items && x.items[0]);
+        if (p) return String(p.id || p.item_id);
+      }
+    }
+
+    // 4. JSON-LD Schema.org Product
+    var lds = document.querySelectorAll('script[type="application/ld+json"]');
+    for (var j = 0; j < lds.length; j++) {
+      try {
+        var items = [].concat(JSON.parse(lds[j].textContent));
+        for (var k = 0; k < items.length; k++) {
+          var pr = items[k]['@type'] === 'Product' ? items[k] :
+            (items[k]['@graph'] || []).find(function (g) { return g['@type'] === 'Product'; });
+          if (pr && (pr.sku || pr.productID)) return String(pr.sku || pr.productID);
+        }
+      } catch (e) {}
+    }
+
+    return null;
+  }
+
+  function go() {
+    var sku = detect();
+    if (!sku) {
+      console.error('[mKFashion] SKU não detectado. Tente passar ?sku=SEU_SKU na URL.');
+      return;
+    }
+    console.log('[mKFashion] SKU:', sku);
+
+    // Cria container se ainda não existe (overlay fixo no canto como fallback)
+    if (!document.getElementById('mkfashion-container')) {
+      var c = document.createElement('div');
+      c.id = 'mkfashion-container';
+      c.style.cssText = 'position:fixed;top:90px;right:20px;z-index:99999;background:#fff;padding:8px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.12)';
+      document.body.appendChild(c);
+    }
+
+    // Adiciona ao carrinho da plataforma com tamanho/cor se disponíveis
+    mkfashion.addToCart(function (p) {
+      console.log('[mKFashion] addToCart:', p);
+      var item = { id: p.selectedIdentifier, quantity: 1 };
+      var props = {};
+      if (p.selectedSize) props['Tamanho'] = p.selectedSize;
+      if (p.selectedColor) props['Cor'] = p.selectedColor;
+      if (Object.keys(props).length) item.properties = props;
+
+      // Endpoint Shopify-style. Para VTEX/Wake/Magento, ajuste a URL e o body.
+      fetch('/cart/add.js', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ items: [item] })
+      })
+        .then(function (r) { return r.json(); })
+        .then(function (d) { console.log('[mKFashion] no carrinho:', d); })
+        .catch(function (e) { console.error('[mKFashion] erro cart:', e); });
+    });
+
+    mkfashion.init({
+      projectId: PROJECT_ID,
+      identifier: sku,
+      target: '#mkfashion-container'
+    }).then(function (r) {
+      // Workaround: depois do init() já validar availability, evita re-fetch no
+      // click handler. Sem isso, em sites com monitor SPA (New Relic, etc.) o
+      // click intercepta o documento e quebra o fetch com "global scope shutting
+      // down". Redundante na SDK 2.5.x+ (cache nativo) — mas inofensivo.
+      if (r && r.ok) {
+        mkfashion.getAvailability = function () {
+          return Promise.resolve({ available: true });
+        };
+      }
+    });
+  }
+})();

package/index.html

@@ -1,79 +1,178 @@
-<!DOCTYPE html>
-<html lang="pt-BR">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Provador Virtual</title>
-  <script src="./src/mkfashion.js"></script>
-</head>
-
-<body>
-
-  <div id="mkfashion-container"></div>
-
-  <script>
-    (function () {
-      var projectid = '69f9e5b0f4eb0c4403319830';
-      var identifier = '1881';
-
-      function initMkFashion() {
-        mkfashion.addToCart(function (payload) {
-          console.log('Adicionando ao carrinho:', payload);
-
-          var variantSku = payload.selectedIdentifier;
-
-          fetch('/cart/add.js', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-              items: [{
-                quantity: 1,
-                id: variantSku
-              }]
-            })
-          })
-            .then(function (response) {
-              return response.json();
-            })
-            .then(function (data) {
-              console.log('Produto adicionado:', data);
-              // document.dispatchEvent(new CustomEvent('cart:updated'));
-            })
-            .catch(function (error) {
-              console.error('Erro carrinho:', error);
-            });
-        });
-
-        mkfashion.onInteraction(function (data) {
-          console.log(data.category, data.action);
-        });
-
-        mkfashion.init({
-          projectId: projectid,
-          identifier: identifier,
-          target: '#mkfashion-container'
-        });
-      }
-
-      function waitForMkFashion() {
-        if (typeof mkfashion !== 'undefined') {
-          initMkFashion();
-        } else {
-          setTimeout(waitForMkFashion, 100);
-        }
-      }
-
-      if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", waitForMkFashion);
-      } else {
-        waitForMkFashion();
-      }
-    })();
-  </script>
-
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Provador Virtual</title>
+  <script src="./src/mkfashion.js"></script>
+</head>
+
+<body>
+
+  <div id="mkfashion-container"></div>
+
+  <script>
+    (function () {
+      var projectid = '69f9e5b0f4eb0c4403319830';
+
+      // ============================================================
+      // Detecta o identifier (SKU) da PDP automaticamente.
+      // Estratégias em ordem de prioridade — retorna a primeira que casar.
+      // ============================================================
+      function detectIdentifier() {
+        // 1. Query string (?sku=... ou ?identifier=...) — útil pra teste / override
+        var qs = new URLSearchParams(location.search);
+        var fromUrl = qs.get('sku') || qs.get('identifier');
+        if (fromUrl) return { value: fromUrl, source: 'url-param' };
+
+        // 2. JSON-LD (Schema.org Product) — presente em PDPs com SEO decente
+        var scripts = document.querySelectorAll('script[type="application/ld+json"]');
+        for (var i = 0; i < scripts.length; i++) {
+          try {
+            var data = JSON.parse(scripts[i].textContent);
+            var items = Array.isArray(data) ? data : [data];
+            for (var j = 0; j < items.length; j++) {
+              var node = items[j];
+              var product = node['@type'] === 'Product' ? node :
+                (node['@graph'] && node['@graph'].find(function (g) { return g['@type'] === 'Product'; }));
+              if (product) {
+                var sku = product.sku || product.mpn || product.productID;
+                if (sku) return { value: String(sku), source: 'json-ld' };
+              }
+            }
+          } catch (e) { /* json inválido — ignora */ }
+        }
+
+        // 3. Meta tags
+        var meta = document.querySelector(
+          'meta[itemprop="sku"], meta[property="product:retailer_item_id"], meta[name="sku"]'
+        );
+        if (meta && meta.content) return { value: meta.content, source: 'meta' };
+
+        // 4. Microdata em qualquer elemento
+        var micro = document.querySelector('[itemprop="sku"]');
+        if (micro) {
+          var v = micro.getAttribute('content') || (micro.textContent || '').trim();
+          if (v) return { value: v, source: 'microdata' };
+        }
+
+        // 5. dataLayer (GA4 / Enhanced Ecommerce)
+        if (window.dataLayer && window.dataLayer.length) {
+          for (var k = window.dataLayer.length - 1; k >= 0; k--) {
+            var e = window.dataLayer[k] || {};
+            // GA4
+            if (e.ecommerce && e.ecommerce.items && e.ecommerce.items[0]) {
+              var ga4 = e.ecommerce.items[0].item_id || e.ecommerce.items[0].id;
+              if (ga4) return { value: String(ga4), source: 'dataLayer/ga4' };
+            }
+            // Universal Analytics Enhanced Ecommerce
+            if (e.ecommerce && e.ecommerce.detail && e.ecommerce.detail.products && e.ecommerce.detail.products[0]) {
+              var ee = e.ecommerce.detail.products[0].id;
+              if (ee) return { value: String(ee), source: 'dataLayer/ee' };
+            }
+          }
+        }
+
+        // 6. Globais de plataforma
+        if (window.ShopifyAnalytics && window.ShopifyAnalytics.meta && window.ShopifyAnalytics.meta.product) {
+          return { value: String(window.ShopifyAnalytics.meta.product.id), source: 'shopify' };
+        }
+        // VTEX — várias formas de expor a SKU
+        if (window.vtxctx && window.vtxctx.skus && window.vtxctx.skus[0]) {
+          return { value: String(window.vtxctx.skus[0]), source: 'vtex/vtxctx' };
+        }
+        if (window.skuJson_0 && window.skuJson_0.skus && window.skuJson_0.skus[0]) {
+          return { value: String(window.skuJson_0.skus[0].sku), source: 'vtex/skuJson' };
+        }
+        // Konfidency (serviço de reviews usado por várias marcas BR — Marisa, etc.)
+        var kd = window.konfidencyData;
+        if (kd && kd.product && kd.product.variants && kd.product.variants[0]) {
+          return { value: String(kd.product.variants[0]), source: 'konfidency/variant' };
+        }
+
+        // Nota: NÃO usamos padrão de URL como fallback (ex: /p/{id} na VTEX
+        // retorna o productId, não o SKU). É melhor falhar do que dar dado
+        // errado — quem precisar de override deve passar ?sku= na URL.
+
+        // 7. Fallback hardcoded — útil pra rodar index.html localmente sem
+        // estrutura de PDP. Em produção, remova ou ajuste pro seu cenário.
+        return { value: '1881', source: 'fallback-hardcoded' };
+      }
+
+      // ============================================================
+      // Inicialização
+      // ============================================================
+      function initMkFashion() {
+        var detected = detectIdentifier();
+        console.log('[mKFashion] SKU detectado:', detected.value, '(via ' + detected.source + ')');
+
+        // Callback de carrinho — recebe o produto escolhido no provador
+        // e adiciona ao carrinho da plataforma (exemplo: Shopify).
+        mkfashion.addToCart(function (payload) {
+          console.log('[mKFashion] addToCart payload:', payload);
+
+          var variantSku = payload.selectedIdentifier;
+          if (!variantSku) {
+            console.warn('[mKFashion] produto sem variantSku — pulando adição ao carrinho');
+            return;
+          }
+
+          // Properties opcionais — passa tamanho/cor se vieram no payload.
+          // No Shopify aparecem no carrinho como propriedades de line item.
+          var properties = {};
+          if (payload.selectedSize) properties['Tamanho'] = payload.selectedSize;
+          if (payload.selectedColor) properties['Cor'] = payload.selectedColor;
+
+          var item = { id: variantSku, quantity: 1 };
+          if (Object.keys(properties).length) item.properties = properties;
+
+          // Endpoint Shopify-style. Ajuste pra sua plataforma:
+          //   VTEX: POST /api/checkout/pub/orderForm/{id}/items
+          //   Wake: API própria
+          //   Magento: rest/V1/carts/mine/items
+          fetch('/cart/add.js', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ items: [item] })
+          })
+            .then(function (response) { return response.json(); })
+            .then(function (data) {
+              console.log('[mKFashion] produto adicionado ao carrinho:', data);
+              // document.dispatchEvent(new CustomEvent('cart:updated'));
+            })
+            .catch(function (error) {
+              console.error('[mKFashion] erro ao adicionar ao carrinho:', error);
+            });
+        });
+
+        mkfashion.onInteraction(function (data) {
+          console.log(data.category, data.action);
+        });
+
+        mkfashion.init({
+          projectId: projectid,
+          identifier: detected.value,
+          target: '#mkfashion-container'
+        });
+      }
+
+      function waitForMkFashion() {
+        if (typeof mkfashion !== 'undefined') {
+          initMkFashion();
+        } else {
+          setTimeout(waitForMkFashion, 100);
+        }
+      }
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", waitForMkFashion);
+      } else {
+        waitForMkFashion();
+      }
+    })();
+  </script>
+
+</body>
+
+</html>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mkfashion-sdk",
-  "version": "2.4.9",
-  "description": "SDK para integrar o provador virtual mKFashion com suporte a Wake Commerce",
+  "version": "2.7.0",
+  "description": "SDK para integrar o provador virtual mKFashion com suporte a Wake Commerce e tracking analytics completo",
   "main": "src/mkfashion.js",
   "scripts": {
     "test": "echo \"Abra test.html no navegador\""

package/src/mkfashion.js

@@ -19,11 +19,15 @@ const mkfashion = {
 
   appUrl: 'https://mkfashion.mk3dlabs.com/visualizer',
   apiUrl: 'https://mkfashion-new-api.mk3dlabs.com',
+  // BETA: collector apontando para tunnel temporario (Cloudflare quick tunnel).
+  // Trocar para 'https://collector.metakosmos.com.br' quando o deploy formal subir.
+  collectorUrl: 'https://something-perl-parker-radios.trycloudflare.com',
   debug: false,
 
   // DEV - Descomentar para desenvolvimento local
    //appUrl: 'http://localhost:5174/visualizer',
    //apiUrl: 'http://localhost:3007',
+   //collectorUrl: 'http://localhost:3030',
 
   // ============ ESTADO INTERNO ============
 
@@ -80,17 +84,25 @@ const mkfashion = {
       return
     }
 
-    try {
-      const availability = await this.getAvailability(projectId, identifier)
-      if (!availability.available) {
-        console.error('[mKFashion] Produto nao disponivel para try-on:', availability.message)
-        alert('Este produto não está disponível para prova virtual.')
+    // Pula re-validação se init() já validou esse projeto+SKU (caso comum:
+    // botão renderizado pelo init e clicado depois). Evita fetch redundante
+    // no click handler — agente de monitoramento SPA (New Relic etc.) pode
+    // interceptar o click e quebrar fetches durante interceptação.
+    var availabilityCacheKey = projectId + ':' + identifier
+    if (this._availabilityCheckedFor !== availabilityCacheKey) {
+      try {
+        const availability = await this.getAvailability(projectId, identifier)
+        if (!availability.available) {
+          console.error('[mKFashion] Produto nao disponivel para try-on:', availability.message)
+          alert('Este produto não está disponível para prova virtual.')
+          return
+        }
+      } catch (error) {
+        console.error('[mKFashion] Erro ao verificar disponibilidade:', error)
+        alert('Produto não encontrado ou indisponível.')
         return
       }
-    } catch (error) {
-      console.error('[mKFashion] Erro ao verificar disponibilidade:', error)
-      alert('Produto não encontrado ou indisponível.')
-      return
+      this._availabilityCheckedFor = availabilityCacheKey
     }
 
     this._config = {
@@ -119,6 +131,10 @@ const mkfashion = {
 
     this._isOpen = true
     this._log('Aberto', this._config)
+
+    // Emite modal_opened — não passa pelo _triggerCallback porque é um evento
+    // só de tracking (não tem callback público equivalente).
+    try { this._emitToCollector('modal_opened', { projectId, identifier }) } catch (_) {}
   },
 
   /** Fecha o modal do provador virtual (esconde sem destruir a sessao) */
@@ -133,13 +149,21 @@ const mkfashion = {
     this._isOpen = false
     this._confirmingExit = false
     this._log('Fechado')
+
+    // Emite modal_closed (complementa o onClose que já passou por _triggerCallback).
+    try {
+      this._emitToCollector('modal_closed', {
+        projectId: this._config && this._config.projectId,
+        identifier: this._config && this._config.identifier
+      })
+    } catch (_) {}
   },
 
   /**
    * Registra callback de adicionar ao carrinho.
    *
    * Payload simplificado (não-Gregory):
-   *   { mainIdentifier, selectedIdentifier, name, price, sizePrice, selectedSize, productUrl, tryonImageUrl }
+   *   { mainIdentifier, selectedIdentifier, name, price, sizePrice, selectedSize, selectedColor, productUrl, tryonImageUrl }
    *
    * Projetos Gregory mantêm estrutura legada completa.
    */
@@ -279,6 +303,16 @@ const mkfashion = {
 
       const data = await response.json()
       this._log('Disponibilidade recebida', data)
+
+      // NOTA: availability check é decisão interna (mostra botão ou não) e
+      // NÃO é emitido pro collector — não traz valor analítico. O sinal de
+      // "impressão" vem do auto-tracking (page_view), e o sinal de "produto
+      // tem try-on" vem do page_button_rendered no init().
+      // Apenas inicializa _config pra que o auto-tracking saiba quem é o projeto.
+      try {
+        if (!this._config) this._config = { projectId: resolved, identifier }
+      } catch (_) {}
+
       return data
 
     } catch (error) {
@@ -420,6 +454,9 @@ const mkfashion = {
   },
 
   _triggerCallback(name, data = null) {
+    // Emite pro collector ANTES do callback do cliente (não bloqueia, fire-and-forget).
+    try { this._emitToCollector(name, data) } catch (_) {}
+
     if (this._callbacks && typeof this._callbacks[name] === 'function') {
       try {
         this._callbacks[name](data)
@@ -430,6 +467,459 @@ const mkfashion = {
     }
   },
 
+  // ============ TRACKING (mk-collector-api) ============
+
+  _visitorId: null,
+  _sessionId: null,
+  _siteContext: null,
+
+  _getVisitorId() {
+    if (this._visitorId) return this._visitorId
+    try {
+      let v = localStorage.getItem('_mk_sdk_vid')
+      if (!v) {
+        v = 'v_' + (typeof crypto !== 'undefined' && crypto.randomUUID
+          ? crypto.randomUUID()
+          : Math.random().toString(36).slice(2) + Date.now().toString(36))
+        localStorage.setItem('_mk_sdk_vid', v)
+      }
+      this._visitorId = v
+      return v
+    } catch (_) {
+      this._visitorId = 'v_' + Math.random().toString(36).slice(2)
+      return this._visitorId
+    }
+  },
+
+  _getSessionId() {
+    if (this._sessionId) return this._sessionId
+    try {
+      let s = sessionStorage.getItem('_mk_sdk_sid')
+      if (!s) {
+        s = 's_' + (typeof crypto !== 'undefined' && crypto.randomUUID
+          ? crypto.randomUUID()
+          : Math.random().toString(36).slice(2) + Date.now().toString(36))
+        sessionStorage.setItem('_mk_sdk_sid', s)
+      }
+      this._sessionId = s
+      return s
+    } catch (_) {
+      this._sessionId = 's_' + Math.random().toString(36).slice(2)
+      return this._sessionId
+    }
+  },
+
+  _parseUtm() {
+    try {
+      const p = new URLSearchParams(location.search)
+      const out = {}
+      const keys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']
+      for (const k of keys) {
+        const v = p.get(k)
+        if (v) out[k.replace('utm_', '')] = v
+      }
+      return Object.keys(out).length > 0 ? out : null
+    } catch (_) { return null }
+  },
+
+  _detectPlatform() {
+    try {
+      if (window.Shopify || window.ShopifyAnalytics) return 'shopify'
+      if (window.vtex || window.vtxctx) return 'vtex'
+      if (window.wakeCommerce || window.__WAKE__) return 'wake'
+      if (window.Konfidency || window.konfidency) return 'konfidency'
+      if (window.wc_add_to_cart_params || window.woocommerce_params) return 'woocommerce'
+      if (window.dataLayer && Array.isArray(window.dataLayer) && window.dataLayer[0]) {
+        const p = window.dataLayer[0].platform
+        if (p) return String(p).toLowerCase()
+      }
+    } catch (_) {}
+    return null
+  },
+
+  _detectCurrentProduct() {
+    try {
+      // 1. dataLayer (GA4/UA padrão)
+      if (window.dataLayer && Array.isArray(window.dataLayer)) {
+        for (let i = window.dataLayer.length - 1; i >= 0; i--) {
+          const item = window.dataLayer[i]
+          if (!item) continue
+          if (item.product) {
+            return {
+              sku: item.product.sku || item.product.id || null,
+              name: item.product.name || null,
+              price: item.product.price || null
+            }
+          }
+          if (item.ecommerce && item.ecommerce.items && item.ecommerce.items[0]) {
+            const p = item.ecommerce.items[0]
+            return { sku: p.item_id || p.id, name: p.item_name || p.name, price: p.price }
+          }
+        }
+      }
+      // 2. JSON-LD schema.org/Product
+      const lds = document.querySelectorAll('script[type="application/ld+json"]')
+      for (const ld of lds) {
+        try {
+          const j = JSON.parse(ld.textContent || '{}')
+          const arr = Array.isArray(j) ? j : [j]
+          for (const item of arr) {
+            if (item && (item['@type'] === 'Product' || (Array.isArray(item['@type']) && item['@type'].includes('Product')))) {
+              return {
+                sku: item.sku || item.mpn || item.gtin || null,
+                name: item.name || null,
+                price: (item.offers && (item.offers.price || (item.offers[0] && item.offers[0].price))) || null
+              }
+            }
+          }
+        } catch (_) {}
+      }
+      // 3. Open Graph (og:type=product)
+      const og = (n) => {
+        const m = document.querySelector('meta[property="og:' + n + '"]')
+        return m && m.content || null
+      }
+      if (og('type') === 'product') {
+        return { sku: null, name: og('title'), price: og('price:amount') }
+      }
+    } catch (_) {}
+    return null
+  },
+
+  _detectSiteContext() {
+    if (this._siteContext) return this._siteContext
+    try {
+      this._siteContext = {
+        url: location.href,
+        pathname: location.pathname,
+        referrer: document.referrer || null,
+        title: document.title || null,
+        utm: this._parseUtm(),
+        userAgent: navigator.userAgent,
+        language: navigator.language,
+        viewport: window.innerWidth + 'x' + window.innerHeight,
+        devicePixelRatio: window.devicePixelRatio || 1,
+        platform: this._detectPlatform(),
+        detectedProduct: this._detectCurrentProduct()
+      }
+    } catch (_) {
+      this._siteContext = {}
+    }
+    return this._siteContext
+  },
+
+  /**
+   * Enfileira evento no batch buffer. O flush real acontece em _flushQueue.
+   * Fire-and-forget — nunca atrapalha UX.
+   */
+  _emitToCollector(eventName, data) {
+    try {
+      if (!this._config || !this._config.projectId) {
+        // Antes do projectId estar setado, enfileira pra flush quando estiver.
+        this._preConfigQueue = this._preConfigQueue || []
+        if (this._preConfigQueue.length < 50) {
+          this._preConfigQueue.push({ eventName, data, ts: Date.now() })
+        }
+        return
+      }
+      if (!this.collectorUrl) return
+
+      // Drena qualquer evento que foi enfileirado antes do config existir.
+      if (this._preConfigQueue && this._preConfigQueue.length > 0) {
+        const pending = this._preConfigQueue
+        this._preConfigQueue = []
+        for (const p of pending) this._queueEvent(p.eventName, p.data, p.ts)
+      }
+
+      this._queueEvent(eventName, data)
+
+      // Auto-start tracking de site no primeiro emit com config.
+      if (!this._autoTrackInitialized && this.autoTrack !== false) {
+        this._initAutoTrack()
+      }
+    } catch (e) {
+      if (this.debug) console.warn('[mKFashion tracking]', e.message)
+    }
+  },
+
+  /**
+   * Normaliza nome de evento — tira prefixo "on" e converte camelCase pra snake_case.
+   * Ex: 'onAddToCart' → 'add_to_cart'; 'modal_opened' → 'modal_opened' (já snake).
+   */
+  _normalizeEventName(name) {
+    if (typeof name !== 'string' || !name) return 'unknown'
+    var n = name.replace(/^on/, '')
+    n = n.replace(/[A-Z]/g, function (m, i) { return (i > 0 ? '_' : '') + m.toLowerCase() })
+    if (n.charAt(0) >= 'A' && n.charAt(0) <= 'Z') n = n.toLowerCase()
+    return n
+  },
+
+  /**
+   * Adiciona ao buffer de batch. Flush é disparado por timer ou tamanho.
+   * Todos os eventos recebem prefixo 'page_'.
+   */
+  _queueEvent(eventName, data, tsOverride) {
+    this._eventQueue = this._eventQueue || []
+    const params = { identifier: this._config.identifier || null }
+    if (data && typeof data === 'object' && !Array.isArray(data)) {
+      Object.assign(params, data)
+    } else if (data !== null && data !== undefined) {
+      params.value = data
+    }
+    this._eventQueue.push({
+      name: 'page_' + this._normalizeEventName(eventName),
+      ts: tsOverride || Date.now(),
+      params: params
+    })
+
+    // Flush sincrono se atingiu limite de tamanho.
+    if (this._eventQueue.length >= 20) {
+      this._flushQueue()
+      return
+    }
+    // Senão, agenda flush em 2s.
+    if (!this._flushTimer) {
+      this._flushTimer = setTimeout(() => { this._flushTimer = null; this._flushQueue() }, 2000)
+    }
+  },
+
+  _flushQueue(useBeacon) {
+    if (!this._eventQueue || this._eventQueue.length === 0) return
+    if (!this._config || !this._config.projectId) return
+    if (!this.collectorUrl) return
+
+    const events = this._eventQueue.splice(0, 50) // máximo 50 por POST
+    const payload = JSON.stringify({
+      visitorId: this._getVisitorId(),
+      sessionId: this._getSessionId(),
+      events: events,
+      site: this._detectSiteContext()
+    })
+
+    const url = this.collectorUrl + '/v1/track/sdk'
+    const headers = {
+      'Content-Type': 'application/json',
+      'X-MK-Project-Id': this._config.projectId
+    }
+
+    // sendBeacon no pagehide pra garantir envio durante unload.
+    if (useBeacon && navigator.sendBeacon) {
+      try {
+        const blob = new Blob([payload], { type: 'application/json' })
+        // sendBeacon nao suporta headers custom — usamos query param.
+        navigator.sendBeacon(url + '?projectId=' + encodeURIComponent(this._config.projectId), blob)
+        return
+      } catch (_) {}
+    }
+
+    fetch(url, { method: 'POST', keepalive: true, headers: headers, body: payload })
+      .catch(() => {})
+  },
+
+  // ============ AUTO-TRACK (pageview/click/scroll/form/engagement) ============
+
+  _autoTrackInitialized: false,
+  _scrollDepthSeen: null,
+  _engagementTimer: null,
+  _engagementLastTick: 0,
+
+  /**
+   * Inicia captura automática de comportamento no site host. Chamado quando
+   * _config recebe um projectId, OU manualmente via mkfashion.startTracking().
+   * Setar mkfashion.autoTrack = false antes do init pra desabilitar.
+   */
+  _initAutoTrack() {
+    if (this._autoTrackInitialized) return
+    this._autoTrackInitialized = true
+    try {
+      this._trackPageview()
+      this._initClickTracking()
+      this._initScrollTracking()
+      this._initFormTracking()
+      this._initEngagementTracking()
+      this._initSpaNavigation()
+      this._initFlushOnUnload()
+      this._log('Auto-tracking iniciado')
+    } catch (e) {
+      if (this.debug) console.warn('[mKFashion auto-track init]', e.message)
+    }
+  },
+
+  /**
+   * API pública pra ativar auto-tracking sem precisar abrir o modal.
+   * Útil em sites onde a SDK só renderiza botão (sem getAvailability) ou
+   * em landing pages sem produto definido.
+   */
+  startTracking(projectId, identifier) {
+    if (!projectId) {
+      console.error('[mKFashion] startTracking: projectId obrigatorio')
+      return
+    }
+    const resolved = this._resolveProjectId(projectId)
+    if (!this._config) this._config = { projectId: resolved, identifier: identifier || null }
+    this._initAutoTrack()
+  },
+
+  _trackPageview() {
+    this._scrollDepthSeen = {}
+    // 'view' aqui vira 'page_view' (prefix 'page_' é adicionado em _queueEvent).
+    this._emitToCollector('view', {
+      url: location.href,
+      pathname: location.pathname,
+      referrer: document.referrer || null,
+      title: document.title || null
+    })
+  },
+
+  _initClickTracking() {
+    if (!document.body) return
+    const INTERACTIVE = { A: 1, BUTTON: 1, INPUT: 1, SELECT: 1, TEXTAREA: 1 }
+    let lastClick = 0
+    document.body.addEventListener('click', (e) => {
+      try {
+        const now = Date.now()
+        if (now - lastClick < 100) return
+        lastClick = now
+        let el = e.target
+        for (let i = 0; i < 5 && el && el !== document.body; i++) {
+          if (INTERACTIVE[el.tagName] || (el.getAttribute && el.getAttribute('role') === 'button')) break
+          el = el.parentElement
+        }
+        if (!el) return
+        if (!INTERACTIVE[el.tagName] && !(el.getAttribute && el.getAttribute('role') === 'button')) return
+
+        const data = { tag: el.tagName }
+        const t = el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' ? el.value : el.textContent
+        data.text = (t || '').replace(/\s+/g, ' ').trim().substring(0, 100)
+        if (el.href) data.href = String(el.href).substring(0, 500)
+        if (el.id) data.id = el.id
+        if (el.className && typeof el.className === 'string') {
+          data.classes = el.className.trim().substring(0, 200)
+        }
+        this._emitToCollector('click', data)
+      } catch (_) {}
+    }, { capture: true, passive: true })
+  },
+
+  _initScrollTracking() {
+    const TH = [25, 50, 75, 100]
+    let scrollTimer = null
+    const check = () => {
+      try {
+        const sy = window.scrollY || document.documentElement.scrollTop || 0
+        const dh = Math.max(
+          document.body && document.body.scrollHeight || 0,
+          document.documentElement && document.documentElement.scrollHeight || 0
+        )
+        if (dh <= 0) return
+        const p = Math.min(100, Math.floor((sy + window.innerHeight) / dh * 100))
+        if (!this._scrollDepthSeen) this._scrollDepthSeen = {}
+        for (const t of TH) {
+          if (p >= t && !this._scrollDepthSeen[t]) {
+            this._scrollDepthSeen[t] = true
+            this._emitToCollector('scroll_depth', { depth: t })
+          }
+        }
+      } catch (_) {}
+    }
+    check()
+    window.addEventListener('scroll', () => {
+      if (scrollTimer) return
+      scrollTimer = setTimeout(() => { scrollTimer = null; check() }, 250)
+    }, { passive: true })
+  },
+
+  _initFormTracking() {
+    if (!document.body) return
+    const CC = ['wpcf7-form', 'wpforms-form', 'gform_wrapper', 'formidable']
+    const NP = ['subscribe', 'newsletter', 'mailchimp', 'convertkit']
+    document.body.addEventListener('submit', (e) => {
+      try {
+        const f = e.target
+        if (!f || f.tagName !== 'FORM') return
+        // Skip WooCommerce checkout (capturado por outro caminho)
+        if (f.classList && (f.classList.contains('woocommerce-checkout') ||
+                            f.classList.contains('wc-block-checkout__form'))) return
+
+        let ft = 'other'
+        const cls = f.className || ''
+        const act = (f.action || '').toLowerCase()
+        if (f.querySelector('input[type="search"]') || f.querySelector('input[name="s"]')) ft = 'search'
+        else {
+          for (const c of CC) if (cls.indexOf(c) !== -1) { ft = 'contact'; break }
+          if (ft === 'other') for (const n of NP) if (act.indexOf(n) !== -1) { ft = 'newsletter'; break }
+        }
+        this._emitToCollector('form_submit', {
+          form_id: f.id || '',
+          form_action: (f.action || '').substring(0, 300),
+          form_type: ft
+        })
+      } catch (_) {}
+    }, { capture: true })
+  },
+
+  _initEngagementTracking() {
+    const INTERVAL = 15000
+    this._engagementLastTick = Date.now()
+    this._engagementTimer = setInterval(() => {
+      if (document.hidden) return
+      const now = Date.now()
+      const elapsedSec = Math.round((now - this._engagementLastTick) / 1000)
+      this._engagementLastTick = now
+      if (elapsedSec > 0 && elapsedSec < 60) {
+        this._emitToCollector('engagement', { url: location.pathname, dwellSec: elapsedSec })
+      }
+    }, INTERVAL)
+
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) {
+        const elapsedSec = Math.round((Date.now() - this._engagementLastTick) / 1000)
+        if (elapsedSec > 0 && elapsedSec < 600) {
+          this._emitToCollector('engagement', { url: location.pathname, dwellSec: elapsedSec })
+        }
+        this._engagementLastTick = Date.now()
+      } else {
+        this._engagementLastTick = Date.now()
+      }
+    })
+  },
+
+  _initSpaNavigation() {
+    // Captura SPA navigation (React/Vue/Next/etc) emitindo page_view a cada
+    // mudança de URL via history API.
+    let lastUrl = location.href
+    const self = this
+    const onChange = () => {
+      if (location.href !== lastUrl) {
+        lastUrl = location.href
+        self._trackPageview()
+      }
+    }
+    try {
+      const origPush = history.pushState
+      const origReplace = history.replaceState
+      history.pushState = function () { origPush.apply(this, arguments); setTimeout(onChange, 0) }
+      history.replaceState = function () { origReplace.apply(this, arguments); setTimeout(onChange, 0) }
+      window.addEventListener('popstate', onChange)
+    } catch (_) {}
+  },
+
+  _initFlushOnUnload() {
+    // Flush sincrono no pagehide pra não perder engagement final + qualquer evento pendente.
+    window.addEventListener('pagehide', () => {
+      try {
+        const elapsedSec = Math.round((Date.now() - this._engagementLastTick) / 1000)
+        if (elapsedSec > 0 && elapsedSec < 600) {
+          this._emitToCollector('engagement', { url: location.pathname, dwellSec: elapsedSec })
+        }
+        this._flushQueue(true)
+      } catch (_) {}
+    })
+    window.addEventListener('beforeunload', () => {
+      try { this._flushQueue(true) } catch (_) {}
+    })
+  },
+
   _buildUrl() {
     const encoded = encodeURIComponent(this._config.identifier).replace(/\./g, '%2E')
     const url = `${this.appUrl}/${this._config.projectId}/${encoded}`
@@ -642,7 +1132,7 @@ const mkfashion = {
     iframe.style.width = typeof width === 'number' ? `${width}px` : width
     iframe.style.height = typeof height === 'number' ? `${height}px` : height
     iframe.style.border = 'none'
-    iframe.setAttribute('allow', 'camera *; microphone *; web-share *')
+    iframe.setAttribute('allow', 'camera *; microphone *')
     iframe.setAttribute('allowfullscreen', 'true')
     return iframe
   },
@@ -729,6 +1219,7 @@ const mkfashion = {
               price: product.price || null,
               sizePrice: product.sizePrice || null,
               selectedSize: data?.size || null,
+              selectedColor: data?.color || product.color || null,
               produtoVarianteId: product.produtoVarianteId || null,
               productUrl: product.productUrl || null,
               tryonImageUrl: product.tryonImageUrl || null
@@ -850,9 +1341,17 @@ const mkfashion = {
 
     if (!available) {
       this._log('Produto indisponível, botão não criado', { projectId, identifier })
+      try {
+        if (!this._config) this._config = { projectId, identifier }
+        this._emitToCollector('button_unavailable', { projectId, identifier })
+      } catch (_) {}
       return fail('unavailable')
     }
 
+    // Marca como validado pra open() pular o fetch redundante no click handler.
+    // (Importante em sites com monitores SPA tipo New Relic que interceptam clicks.)
+    this._availabilityCheckedFor = projectId + ':' + identifier
+
     const isMobile = window.matchMedia('(max-width: 767px)').matches
     const config = this._normalizeButtonConfig(template, isMobile)
     const renderer = this._BUTTON_RENDERERS[config.style] || this._BUTTON_RENDERERS['gregory-black']
@@ -862,6 +1361,12 @@ const mkfashion = {
 
     container.appendChild(element)
     this._log('Botão criado', { target, projectId, identifier, style: config.style })
+    try {
+      if (!this._config) this._config = { projectId, identifier }
+      this._emitToCollector('button_rendered', {
+        projectId, identifier, style: config.style
+      })
+    } catch (_) {}
     return { ok: true, reason: 'rendered', element }
   },
 

package/test-e2e.html

@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-  <meta charset="UTF-8">
-  <title>mKFashion SDK — E2E Test</title>
-  <script src="./src/mkfashion.js"></script>
-  <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; margin: 24px; max-width: 900px; }
-    .test { margin-bottom: 16px; padding: 12px; background: #f5f5f5; border-radius: 6px; border-left: 4px solid #999; }
-    .test.pass { border-color: #16a34a; background: #ecfdf5; }
-    .test.fail { border-color: #dc2626; background: #fef2f2; }
-    .test h3 { margin: 0 0 6px; font-size: 14px; }
-    .test pre { margin: 0; font-size: 11px; white-space: pre-wrap; }
-    .target { display: inline-block; margin: 0 8px; padding: 4px 8px; background: white; border: 1px dashed #ccc; }
-  </style>
-</head>
-<body>
-  <h2>mKFashion SDK — E2E Tests</h2>
-
-  <div>
-    <span>Container 1 (válido):</span><span class="target" id="target-valid"></span>
-    <span>Container 2 (válido):</span><span class="target" id="target-2"></span>
-  </div>
-
-  <div id="output" style="margin-top: 24px;"></div>
-
-  <script>
-    const projectId = '69c56d5373ecdf64df48e330'
-    const validSku = '000756397001'
-    const invalidSku = '99999999999999'
-    const output = document.getElementById('output')
-
-    function log(name, passed, details) {
-      const div = document.createElement('div')
-      div.className = 'test ' + (passed ? 'pass' : 'fail')
-      div.innerHTML = `<h3>${passed ? 'PASS' : 'FAIL'} — ${name}</h3><pre>${details}</pre>`
-      output.appendChild(div)
-    }
-
-    function fmt(obj) {
-      return JSON.stringify(obj, (k, v) => v instanceof HTMLElement ? `<${v.tagName.toLowerCase()}>` : v, 2)
-    }
-
-    async function run() {
-      // ---- TEST 1: init com params completos e SKU válido ----
-      const r1 = await mkfashion.init({
-        projectId,
-        identifier: validSku,
-        target: '#target-valid'
-      })
-      log(
-        'init() com SKU válido → ok: true, reason: rendered',
-        r1.ok === true && r1.reason === 'rendered' && r1.element instanceof HTMLElement,
-        fmt(r1)
-      )
-
-      // ---- TEST 2: init sem target ----
-      const r2 = await mkfashion.init({ projectId, identifier: validSku })
-      log(
-        'init() sem target → ok: false, reason: missing_target',
-        r2.ok === false && r2.reason === 'missing_target' && r2.element === null,
-        fmt(r2)
-      )
-
-      // ---- TEST 3 (skipped): init sem projectId ----
-      // Comportamento atual: _resolveProjectId silenciosamente faz fallback pro
-      // projeto Gregory quando raw é falsy. Conhecido como débito técnico,
-      // não testamos como "missing_projectId" aqui.
-
-      // ---- TEST 4: init sem identifier ----
-      const r4 = await mkfashion.init({ projectId, target: '#target-2' })
-      log(
-        'init() sem identifier → ok: false, reason: missing_identifier',
-        r4.ok === false && r4.reason === 'missing_identifier' && r4.element === null,
-        fmt(r4)
-      )
-
-      // ---- TEST 5: init com target inexistente ----
-      const r5 = await mkfashion.init({
-        projectId,
-        identifier: validSku,
-        target: '#nao-existe'
-      })
-      log(
-        'init() com target inexistente → ok: false, reason: target_not_found',
-        r5.ok === false && r5.reason === 'target_not_found' && r5.element === null,
-        fmt(r5)
-      )
-
-      // ---- TEST 6: init com SKU indisponível ----
-      const r6 = await mkfashion.init({
-        projectId,
-        identifier: invalidSku,
-        target: '#target-2'
-      })
-      log(
-        'init() com SKU indisponível → ok: false, reason: unavailable',
-        r6.ok === false && r6.reason === 'unavailable' && r6.element === null,
-        fmt(r6)
-      )
-
-      // ---- TEST 7: addToCart callback é disparado via postMessage ----
-      let cartPayload = null
-      mkfashion.addToCart(payload => { cartPayload = payload })
-
-      // Abre o modal pra acionar o setup do message listener
-      await mkfashion.open({ projectId, identifier: validSku })
-      // Fecha imediatamente (listener fica armado)
-      mkfashion.close()
-
-      // Simula iframe enviando add_to_cart
-      const fakePayload = {
-        size: 'M',
-        product: {
-          name: 'Afrik - Óculos de Sol',
-          price: 299.90,
-          variantSku: 'SKU-VAR-M',
-          produtoVarianteId: '12345',
-          productUrl: 'https://example.com/produto/afrik',
-          tryonImageUrl: 'https://cdn.example.com/tryon/abc.jpg'
-        }
-      }
-      window.postMessage({
-        source: 'mkfashion-app',
-        action: 'add_to_cart',
-        data: fakePayload
-      }, '*')
-
-      // Aguarda o handler async processar
-      await new Promise(r => setTimeout(r, 100))
-
-      log(
-        'addToCart callback dispara com payload simplificado (não-Gregory)',
-        cartPayload !== null
-          && cartPayload.mainIdentifier === validSku
-          && cartPayload.selectedIdentifier === 'SKU-VAR-M'
-          && cartPayload.name === 'Afrik - Óculos de Sol'
-          && cartPayload.price === 299.90
-          && cartPayload.selectedSize === 'M'
-          && cartPayload.productUrl === 'https://example.com/produto/afrik',
-        fmt(cartPayload)
-      )
-
-      // ---- TEST 8: onInteraction callback ----
-      let interactionData = null
-      mkfashion.onInteraction(data => { interactionData = data })
-
-      window.postMessage({
-        source: 'mkfashion-app',
-        action: 'interaction',
-        data: { category: 'try_on', action: 'photo_uploaded' }
-      }, '*')
-
-      await new Promise(r => setTimeout(r, 100))
-
-      log(
-        'onInteraction callback dispara com category + action',
-        interactionData !== null
-          && interactionData.category === 'try_on'
-          && interactionData.action === 'photo_uploaded',
-        fmt(interactionData)
-      )
-
-      // ---- Marker pro screenshot saber que terminou ----
-      document.title = 'DONE — ' + output.querySelectorAll('.test').length + ' tests'
-    }
-
-    if (typeof mkfashion !== 'undefined') {
-      run().catch(e => log('Exception não tratada', false, e.message + '\n' + e.stack))
-    } else {
-      document.addEventListener('DOMContentLoaded', run)
-    }
-  </script>
-</body>
-</html>

package/test-responsive.html

@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-  <meta charset="UTF-8">
-  <title>Test — Responsividade do botão</title>
-  <script src="./src/mkfashion.js"></script>
-  <style>
-    body { font-family: system-ui, sans-serif; margin: 24px; }
-    h3 { margin: 20px 0 8px; font-size: 13px; color: #444; }
-    .box { background: #fef3c7; padding: 8px; margin-bottom: 8px; }
-  </style>
-</head>
-<body>
-
-  <h3>Container 800px (mais largo que o max-width)</h3>
-  <div class="box" style="width: 800px;">
-    <div id="c1"></div>
-  </div>
-
-  <h3>Container 300px (menor que 402px do card)</h3>
-  <div class="box" style="width: 300px;">
-    <div id="c2"></div>
-  </div>
-
-  <h3>Container 180px (menor que 238px do simples)</h3>
-  <div class="box" style="width: 180px;">
-    <div id="c3"></div>
-  </div>
-
-  <h3>Container sem width (herda do pai)</h3>
-  <div class="box">
-    <div id="c4"></div>
-  </div>
-
-  <script>
-    var pid = '69c56d5373ecdf64df48e330'
-    var sku = '000756397001'
-    // Configura os 4 inits — todos pra mesma config (gregory-card no momento)
-    mkfashion.init({ projectId: pid, identifier: sku, target: '#c1' })
-    mkfashion.init({ projectId: pid, identifier: sku, target: '#c2' })
-    mkfashion.init({ projectId: pid, identifier: sku, target: '#c3' })
-    mkfashion.init({ projectId: pid, identifier: sku, target: '#c4' })
-  </script>
-</body>
-</html>