mkfashion-sdk 2.4.8 → 2.5.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

@@ -15,35 +15,134 @@
   <script>
     (function () {
       var projectid = '69f9e5b0f4eb0c4403319830';
-      var identifier = '1881';
 
+      // ============================================================
+      // 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('Adicionando ao carrinho:', 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: [{
-                quantity: 1,
-                id: variantSku
-              }]
-            })
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ items: [item] })
           })
-            .then(function (response) {
-              return response.json();
-            })
+            .then(function (response) { return response.json(); })
             .then(function (data) {
-              console.log('Produto adicionado:', data);
+              console.log('[mKFashion] produto adicionado ao carrinho:', data);
               // document.dispatchEvent(new CustomEvent('cart:updated'));
             })
             .catch(function (error) {
-              console.error('Erro carrinho:', error);
+              console.error('[mKFashion] erro ao adicionar ao carrinho:', error);
             });
         });
 
@@ -53,7 +152,7 @@
 
         mkfashion.init({
           projectId: projectid,
-          identifier: identifier,
+          identifier: detected.value,
           target: '#mkfashion-container'
         });
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mkfashion-sdk",
-  "version": "2.4.8",
-  "description": "SDK para integrar o provador virtual mKFashion com suporte a Wake Commerce",
+  "version": "2.5.0",
+  "description": "SDK para integrar o provador virtual mKFashion com suporte a Wake Commerce e tracking analytics",
   "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,10 +303,32 @@ const mkfashion = {
 
       const data = await response.json()
       this._log('Disponibilidade recebida', data)
+
+      // Tracking: cada checagem de availability é um sinal de "impressão"
+      // do produto na vitrine. Funciona mesmo se o usuário não clicar.
+      try {
+        if (!this._config) this._config = { projectId: resolved, identifier }
+        this._emitToCollector('availability_checked', {
+          projectId: resolved,
+          identifier,
+          available: data.available === true,
+          reason: data.reason || data.message || null
+        })
+      } catch (_) {}
+
       return data
 
     } catch (error) {
       console.error('[mKFashion] Erro ao verificar disponibilidade:', error)
+      // Tracking: também emite erros de availability — útil pra detectar 404/500 em prod.
+      try {
+        if (!this._config) this._config = { projectId: resolved, identifier }
+        this._emitToCollector('availability_error', {
+          projectId: resolved,
+          identifier,
+          error: String(error.message || error).slice(0, 200)
+        })
+      } catch (_) {}
       throw error
     }
   },
@@ -420,6 +466,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 +479,184 @@ 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
+  },
+
+  /**
+   * Envia evento pro mk-collector-api. Fire-and-forget — nunca atrapalha UX.
+   * Identificação: X-MK-Project-Id (o próprio projectId do mkfashion).
+   */
+  _emitToCollector(eventName, data) {
+    try {
+      if (!this._config || !this._config.projectId) return
+      if (!this.collectorUrl) return
+
+      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
+      }
+
+      const payload = JSON.stringify({
+        visitorId: this._getVisitorId(),
+        sessionId: this._getSessionId(),
+        events: [{ name: 'sdk_' + eventName, ts: Date.now(), params: params }],
+        site: this._detectSiteContext()
+      })
+
+      fetch(this.collectorUrl + '/v1/track/sdk', {
+        method: 'POST',
+        keepalive: true,
+        headers: {
+          'Content-Type': 'application/json',
+          'X-MK-Project-Id': this._config.projectId
+        },
+        body: payload
+      }).catch(() => {})
+    } catch (e) {
+      if (this.debug) console.warn('[mKFashion tracking]', e.message)
+    }
+  },
+
   _buildUrl() {
     const encoded = encodeURIComponent(this._config.identifier).replace(/\./g, '%2E')
     const url = `${this.appUrl}/${this._config.projectId}/${encoded}`
@@ -729,6 +956,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 +1078,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 +1098,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>