</noscript> <!-- End Google Tag Manager (noscript) --> <script src="https://www.downtownmelody.com/_x/Y29kZS5qcXVlcnkuY29t/jquery-3.6.0.min.js"></script> <script src="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/cdn/shop/t/9/assets/section-members-clubs.js?v=17892577313640401701731425465" defer="defer"></script> <script src="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/cdn/shop/t/9/assets/one-more.js?v=10131139220918037031753275188" defer="defer"></script> <script src="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/cdn/shop/t/9/assets/hide-international.js?v=162592955437880820741719471154" defer="defer"></script> <a class="skip-to-content-link button visually-hidden" href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/#MainContent"> Ir directamente al contenido </a> <script> window.kitAnalyticsMeta = window.kitAnalyticsMeta || {}; window.fcbDL = window.fcbDL || []; var fcbDL = window.fcbDL; // Universal data (always safe) window.kitAnalyticsMeta.customer = null; window.kitAnalyticsMeta.cart = {"note":null,"attributes":{},"original_total_price":0,"total_price":0,"total_discount":0,"total_weight":0.0,"item_count":0,"items":[],"requires_shipping":false,"currency":"BWP","items_subtotal_price":0,"cart_level_discount_applications":[],"checkout_charge_amount":0}; window.kitAnalyticsMeta.collection = null; window.kitAnalyticsMeta.article = null; window.kitAnalyticsMeta.blog = null; window.kitAnalyticsMeta.template = "page"; window.kitAnalyticsMeta.shop = { name: "Barça Official Store", domain: "store.fcbarcelona.com", currency: "EUR", money_format: "P{{amount}}", money_with_currency_format: "P{{amount}} BWP" }; window.kitAnalyticsMeta.routes = { cart_add_url: '/es-bw/cart/add', cart_change_url: '/es-bw/cart/change', cart_update_url: '/es-bw/cart/update', cart_url: '/es-bw/cart', predictive_search_url: '/es-bw/search/suggest' }; window.kitAnalyticsMeta.user = { id: null, email: null, first_name: null, last_name: null, phone: null, tags: null, orders_count: null, total_spent: null, accepts_marketing: null }; // PRODUCT BASE OBJECT </script> <script> (function captureFirstLandingUrl() { const KEY = 'kit_utm_full'; const href = window.location.href; const hasQuery = href.indexOf('?') !== -1; const qs = new URLSearchParams(window.location.search); const marketingKeys = [ 'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'gclid', 'fbclid', 'msclkid', 'gbraid', 'wbraid', 'gad_source', 'gad_campaignid', ]; const hasMarketingParams = marketingKeys.some((k) => qs.has(k)); const saved = localStorage.getItem(KEY); if (!saved && (hasMarketingParams || hasQuery)) { localStorage.setItem(KEY, href); return; } if (saved && saved.indexOf('?') === -1 && (hasMarketingParams || hasQuery)) { localStorage.setItem(KEY, href); return; } })(); const ACTION_MAP = { // PRODUCT 'product:impression': 'impression', 'product:impression_click': 'click', 'product:page_track': 'product_view', // CHECKOUT 'checkout:begin_checkout': 'begin_checkout_page', // or 'begin_checkout_ajax' based on placement/context // CART 'cart:cart_add': 'cart_add', 'cart:page_track': 'cart_view', 'cart:cart_view': 'cart_view', 'cart:cart_click': 'cart_click', // PAYMENT 'payment:page_track': 'purchase', // PAGE LIFECYCLE 'page:page_track': 'load', // Extend with more as needed }; const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']; function getUTMParams() { const qs = new URLSearchParams(window.location.search); const out = {}; for (const k of UTM_KEYS) { const sk = `kit_${k}`; const v = qs.get(k) || sessionStorage.getItem(sk) || localStorage.getItem(sk); if (v) { sessionStorage.setItem(sk, v); localStorage.setItem(sk, v); out[k] = v; } else { out[k] = null; } } out.utm_full = localStorage.getItem('kit_utm_full') || window.location.href; return out; } class KitDataLayer { constructor(meta, baseProductLiquid) { this.meta = meta; this.baseProductLiquid = baseProductLiquid; this.events = []; this.globalContext = this.buildGlobalContext(); } async hashEmail(email) { if (!email) return null; const clean = email.trim().toLowerCase(); const msgBuffer = new TextEncoder().encode(clean); const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer); const hashArray = Array.from(new Uint8Array(hashBuffer)); return hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); } getLayout() { const ua = navigator.userAgent.toLowerCase(); if (window.matchMedia('(pointer:coarse)').matches) { // Prioridad para dispositivos táctiles if (/android|iphone|ipad|mobile/.test(ua)) { if (/tablet|ipad/.test(ua)) return 'tablet'; return 'mobile'; } return 'tablet'; } if (/smart-tv|smarttv|appletv|hbbtv|netcast|googletv|viera|aquos|dtv|roku|tv/.test(ua)) return 'smart_tv'; if (/amp/.test(ua)) return 'amp'; // Puedes añadir más checks si tienes app/native return 'desktop'; } buildGlobalContext() { const utm = getUTMParams(); return { event_details: { platform: 'Shopify', developer: 'shopimasters', asset: 'BLM', layout: this.getLayout(), ...utm, }, user: { id: this.meta?.user?.id || 'no_identificat', type: this.meta?.user?.id ? 'logged' : 'guest', email: this.meta?.user?.email || null, phone: this.meta?.user?.phone || null, first_name: this.meta?.user?.first_name || null, last_name: this.meta?.user?.last_name || null, orders_count: this.meta?.user?.orders_count || 0, total_spent: this.meta?.user?.total_spent || 0, tags: this.meta?.user?.tags || [], accepts_marketing: this.meta?.user?.accepts_marketing || false, country: document.documentElement.getAttribute('country'), language: document.documentElement.getAttribute('lang'), currency: document.documentElement.getAttribute('currency'), }, }; } getPageInfo() { const url = new URL(window.location.href); const segments = url.pathname.split('/').filter(Boolean); let id = this.meta?.product?.id || this.meta?.collection?.id || this.meta?.article?.id || this.meta?.blog?.id || this.meta?.template || Date.now(); return { page: { id: id, page_name: document.title, hier_1: url.host, hier_2: segments[0] || null, hier_3: segments[1] || null, url: window.location.href, }, }; } detectPageType() { const path = window.location.pathname; if (path.match(/^\/cart/)) return 'cart'; if (path.match(/^\/collections\//)) return 'collection'; if (path.match(/^\/products\//)) return 'product'; if (path.match(/^\/checkout/)) return 'checkout'; return 'other'; } enrichProductBase(options = {}) { const meta = window.kitAnalyticsMeta || {}; const object = window.productBaseObject || {}; const liquid = window.productBaseLiquid || {}; const variants = Array.isArray(meta.baseProductVariants) ? meta.baseProductVariants : []; const tags = Array.isArray(meta.base_product?.tags) ? meta.base_product.tags : []; const selectedSize = object.customization?.size || null; // PATCH PRICE (badge/competition patch) let price_patch = 0; const selectedLabel = object?.customization?.badge?.title; const comps = liquid?.metafields?.customization?.competition; if (Array.isArray(comps) && selectedLabel) { const allComps = typeof comps.flat === 'function' ? comps.flat() : comps; const comp = allComps.find((c) => c.label === selectedLabel); if (comp && comp.product_badge && typeof comp.product_badge.price !== 'undefined') { price_patch = parseFloat(comp.product_badge.price) / 100; } } // Price Player let price_player = 0; if (object.customization && object.customization.playerReference) { const priceEl = document.querySelector('.kit-customization-price [data-raw-price]'); if (priceEl) { price_player = parseInt(priceEl.getAttribute('data-raw-price'), 10) / 100; } } // PRICE ORIGINAL let price_original = null; if (object?.matchingProduct?.variants?.edges?.length > 0) { const variantNode = object.matchingProduct.variants.edges[0].node; price_original = variantNode?.price?.amount ? parseFloat(variantNode.price.amount) : null; } else if (Array.isArray(liquid.variants) && liquid.variants.length > 0) { const liquidVariant = liquid.variants[0]; price_original = liquidVariant?.price ? parseFloat(liquidVariant.price) / 100 : null; } // GENDER let gender = null; if (object?.matchingProduct?.metafields) { const tg = object.matchingProduct.metafields.find((mf) => mf && mf.key === 'target-gender'); if (tg?.references?.edges?.length > 0) { const genderFields = tg.references.edges[0].node.fields; const labelField = Array.isArray(genderFields) && genderFields.find((f) => f.key === 'label'); gender = labelField ? labelField.value : null; } } else if (liquid?.metafields?.shopify?.target_gender) { const tgLiquid = liquid.metafields.shopify.target_gender; if (Array.isArray(tgLiquid) && tgLiquid[0]?.label) { gender = tgLiquid[0].label; } else if (typeof tgLiquid === 'string') { gender = tgLiquid; } } // ACCELERATOR let accelerator = null; if (liquid?.metafields?.label?.custom) { const custom = liquid.metafields.label.custom; accelerator = typeof custom === 'object' && custom.text ? custom.text : typeof custom === 'string' ? custom : null; } // STOCK BY SIZE const stockBySize = { unique: null, xs: null, s: null, m: null, l: null, xl: null, '2xl': null, '3xl': null, }; let totalStock = 0; for (const v of variants) { const label = (v.title || '').toLowerCase().trim(); const qty = v.inventory_quantity !== undefined ? v.inventory_quantity : null; if (['unique', 'única', 'one size', 'u'].includes(label)) stockBySize.unique = qty; if (label === 'xs') stockBySize.xs = qty; if (label === 's') stockBySize.s = qty; if (label === 'm') stockBySize.m = qty; if (label === 'l') stockBySize.l = qty; if (label === 'xl') stockBySize.xl = qty; if (label === '2xl') stockBySize['2xl'] = qty; if (label === '3xl') stockBySize['3xl'] = qty; if (qty !== null) totalStock += qty; } // SKU let sku = liquid.variants && liquid.variants[0]?.sku ? liquid.variants[0].sku : null; // PRODUCT ID const productId = meta.base_product?.id || object.id || liquid.id || null; // COLLECTION let collectionHandles = []; if (object?.matchingProduct?.collections?.edges) { collectionHandles = object.matchingProduct.collections.edges .map((edge) => edge.node && edge.node.handle) .filter(Boolean); } else if (Array.isArray(liquid.collection) && liquid.collection.length) { collectionHandles = liquid.collection.filter(Boolean); } const collection = collectionHandles.length ? collectionHandles.join(',') : ''; // PRODUCT META const name = object.title || meta.base_product?.title || ''; const type = meta.base_product?.type || ''; const promotion = tags.find((t) => t.toLowerCase().includes('promo')) || 'No Aplica'; const category = tags.find((t) => t.toLowerCase().includes('cat')) || ''; const fashion = tags.find((t) => t.toLowerCase().includes('fashion')) || 'No Aplica'; // PRICE, CURRENCY, DISCOUNT let price = liquid.price ? parseFloat(liquid.price) / 100 : null; let compareAt = liquid.compare_at_price ? parseFloat(liquid.compare_at_price) / 100 : null; let currency = null; if (object?.matchingProduct?.variants?.edges?.length > 0) { const variantNode = object.matchingProduct.variants.edges[0]?.node; currency = variantNode?.price?.currencyCode || null; compareAt = null; // Only use compareAt if from Liquid } else { currency = liquid.currency || null; } const hasDiscount = compareAt && price && compareAt > price; const discount_percentage = hasDiscount ? Math.round(((compareAt - price) / compareAt) * 100) : 0; const discount_amount = hasDiscount ? +(compareAt - price).toFixed(2) : 0; // PERSONALIZATION const player = object.customization?.playerReference || ''; const patch = object.customization?.badge?.title || ''; // BRAND & AFFILIATE const brand = meta.base_product?.vendor ? typeof meta.base_product.vendor === 'string' ? meta.base_product.vendor.toLowerCase() : meta.base_product.vendor : ''; const affiliation = brand; // QUANTITY, POSITION const quantity = options.quantity || 1; const list_name = options.list_name || ''; const list_position = options.list_position || ''; // FINAL PRODUCT OBJ return { price_patch, price_total: price_original, price_original, accelerator, gender, price_player, id: productId !== null ? String(productId) : '', sku, name, collection, type, promotion, category, fashion, price, currency, quantity, stock_size_unique: stockBySize.unique, stock_size_xs: stockBySize.xs, stock_size_s: stockBySize.s, stock_size_m: stockBySize.m, stock_size_l: stockBySize.l, stock_size_xl: stockBySize.xl, stock_size_2xl: stockBySize['2xl'], stock_size_3xl: stockBySize['3xl'], stock: totalStock > 0, size: selectedSize ? selectedSize.toLowerCase() : '', player, patch, discount_percentage, discount_amount, brand, affiliation, list_name, list_position, }; } getAnalyticsProducts(lineItems) { if (!Array.isArray(lineItems)) return []; const bundles = {}; // Group by _bundle_id, classify type for (const item of lineItems) { let prodType = ( item.variant && item.variant.product && item.variant.product.type ? item.variant.product.type : item.product_type || '' ).toLowerCase(); let bundleId = null; if (Array.isArray(item.properties)) { let p = item.properties.find((p) => p.key === '_bundle_id'); if (p) bundleId = p.value; } else if (item.properties && item.properties._bundle_id) { bundleId = item.properties._bundle_id; } if (!bundleId) continue; if (!bundles[bundleId]) bundles[bundleId] = { kit: null, customization: null, badge: null }; if (prodType === 'badge') bundles[bundleId].badge = item; else if (prodType === 'customization') bundles[bundleId].customization = item; else if ( prodType === 'kit' || prodType === 'shirts' || prodType === 'shirt' || prodType === 'jersey' || prodType === 'memorabilia' ) bundles[bundleId].kit = item; } // 2nd pass: build product array (only kits/others, NO badges or customizations) const products = []; for (const bundleId in bundles) { const bundle = bundles[bundleId]; const kit = bundle.kit; if (!kit) continue; // Only output for kits/main products const customization = bundle.customization; const badge = bundle.badge; // Prices let price_kit = kit.finalLinePrice && kit.finalLinePrice.amount ? Number(kit.finalLinePrice.amount) : kit.price ? typeof kit.price === 'object' && kit.price.amount ? Number(kit.price.amount) : Number(kit.price) / 100 : 0; let price_player = customization ? customization.finalLinePrice && customization.finalLinePrice.amount ? Number(customization.finalLinePrice.amount) : customization.price ? typeof customization.price === 'object' && customization.price.amount ? Number(customization.price.amount) : Number(customization.price) / 100 : 0 : 0; let price_patch = badge ? badge.finalLinePrice && badge.finalLinePrice.amount ? Number(badge.finalLinePrice.amount) : badge.price ? typeof badge.price === 'object' && badge.price.amount ? Number(badge.price.amount) : Number(badge.price) / 100 : 0 : 0; let price_total = price_kit + price_player + price_patch; // Player/patch let player = customization && customization.properties ? Array.isArray(customization.properties) ? customization.properties.find((p) => p.key === 'name')?.value || null : customization.properties.name || null : null; let patch = badge ? badge.title || (badge.variant && badge.variant.product && badge.variant.product.title) : null; // Build product object products.push({ id: String((kit.variant && kit.variant.id) || kit.id || (kit.product_id ? kit.product_id : '')), sku: kit.sku || (kit.variant && kit.variant.sku) || null, name: kit.title || (kit.variant && kit.variant.product && kit.variant.product.title) || kit.product_title || null, price: price_kit, price_total: price_total, price_player: price_player, price_patch: price_patch, quantity: kit.quantity || 1, size: kit.variant && kit.variant.title ? kit.variant.title : null, player: player, patch: patch, }); } // Handle products NOT in any bundle and not of type badge/customization for (const item of lineItems) { let hasBundle = false; if (Array.isArray(item.properties)) { hasBundle = item.properties.some((p) => p.key === '_bundle_id'); } else if (item.properties && item.properties._bundle_id) { hasBundle = true; } if (!hasBundle) { let prodType = ( item.variant && item.variant.product && item.variant.product.type ? item.variant.product.type : item.product_type || '' ).toLowerCase(); // Exclude badges and customizations if (prodType !== 'badge' && prodType !== 'customization') { products.push({ id: String((item.variant && item.variant.id) || item.id || ''), sku: item.sku || (item.variant && item.variant.sku) || null, name: item.title || (item.variant && item.variant.product && item.variant.product.title) || item.product_title || null, price: item.finalLinePrice && item.finalLinePrice.amount ? Number(item.finalLinePrice.amount) : item.price ? typeof item.price === 'object' && item.price.amount ? Number(item.price.amount) : Number(item.price) / 100 : 0, price_total: item.finalLinePrice && item.finalLinePrice.amount ? Number(item.finalLinePrice.amount) : item.price ? typeof item.price === 'object' && item.price.amount ? Number(item.price.amount) : Number(item.price) / 100 : 0, price_player: 0, // Non-bundled items can't have player price_patch: 0, // Non-bundled items can't have patch quantity: item.quantity || 1, size: item.variant && item.variant.title ? item.variant.title : null, player: null, patch: null, }); } } } return products; } getProductContextForPageTrack() { const pageType = this.detectPageType(); if (pageType === 'product') { return { product: this.enrichProductBase() }; } else if (['cart', 'checkout', 'collection'].includes(pageType)) { return { product: this.getAnalyticsProducts(this.meta.cart.items || []), }; } return {}; } getAnalyticsCart(cart) { // Prefer cart.attributes.cartToken, then token, then id, then fallback let cartId = null; if (cart?.attributes && cart.attributes.cartToken) { cartId = cart.attributes.cartToken; } return { id: cartId, size: Array.isArray(cart?.items) ? cart.items.reduce((acc, item) => acc + (item.quantity || 0), 0) : cart?.item_count || 0, value: Array.isArray(cart?.items) ? cart.items.reduce((acc, item) => acc + (item.line_price || 0), 0) / 100 : (cart?.total_price || 0) / 100, }; } async dispatchEvent({ category, action, placement = 'N/A', context = {} }) { if (!context.event && typeof action === 'string') { context.event = action; } // 2. Build main event context let eventContext = { ...this.getPageInfo(), ...context, }; // 3. Contextual cart/checkout data if (context.cart_response && (context.cart_response.id || context.cart_response.token)) { const cr = context.cart_response; eventContext.cart = { id: cr.token || cr.id || 'cart_' + Date.now(), size: Array.isArray(cr.items) ? cr.items.reduce((acc, item) => acc + (item.quantity || 0), 0) : 0, value: Array.isArray(cr.items) ? cr.items.reduce((acc, item) => acc + (item.line_price || 0), 0) / 100 : 0, }; delete eventContext.cart_response; } else if (this.meta?.cart && (this.meta.cart.id || this.meta.cart.token)) { const cart = this.meta.cart; eventContext.cart = { id: cart.token || cart.id || 'cart_' + Date.now(), size: Array.isArray(cart.items) ? cart.items.reduce((acc, item) => acc + (item.quantity || 0), 0) : cart.item_count || 0, value: Array.isArray(cart.items) ? cart.items.reduce((acc, item) => acc + (item.line_price || 0), 0) / 100 : (cart.total_price || 0) / 100, }; } // --- CART FALLBACK (ALWAYS present a cart entity!) --- if (!eventContext.cart) { eventContext.cart = this.getAnalyticsCart(this.meta.cart); } // Only auto-fill product from cart for specific event types const autoProductEvents = ['cart', 'checkout', 'page_track']; if (!eventContext.product && autoProductEvents.includes(category)) { let lineItems = []; if (context.cart_response && Array.isArray(context.cart_response.items)) { lineItems = context.cart_response.items; } else if (this.meta?.cart && Array.isArray(this.meta.cart.items)) { lineItems = this.meta.cart.items; } if (lineItems.length) { eventContext.product = this.getAnalyticsProducts(lineItems); } else if (category === 'page_track') { eventContext.product = this.enrichProductBase(); } } const contextEvent = context.event || action; const eventTypeKey = `${category}:${contextEvent}`; let mappedAction = ACTION_MAP[eventTypeKey] || action; const eventPayload = { ...this.globalContext, event_details: { ...this.globalContext.event_details, id: crypto.randomUUID(), category: 'ecommerce', // Always ecommerce action: mappedAction, // The mapped action! location: window.location.href, placement, }, ...eventContext, }; // 6. Hash email and add as hashed_email for this payload only const user = eventPayload.user || {}; if (user.email) { user.hashed_email = await this.hashEmail(user.email); // Optionally: delete user.email; } eventPayload.user = user; // 7. Push event and log (ALWAYS logs) /* try { console.log('[KitDataLayer] EVENT PUSHED:', eventPayload); } catch (e) { console.error('[KitDataLayer] Log error:', e); }*/ this.events.push(eventPayload); fcbDL.push(eventPayload); } trackPageView() { this.dispatchEvent({ category: 'page', action: 'page_track', placement: this.detectPageType(), context: { event: 'page_track', ...this.getProductContextForPageTrack(), }, }); } mapCardDataToProduct(productData, list_position = 1, list_name = '') { const tags = Array.isArray(productData.tags) ? productData.tags : []; const collection = Array.isArray(productData.collection_handles) ? productData.collection_handles.join(',') : ''; // STOCK por talla let stockBySize = { unique: null, xs: null, s: null, m: null, l: null, xl: null, '2xl': null, '3xl': null, }; let totalStock = 0; if (Array.isArray(productData.sizes)) { productData.sizes.forEach((sz) => { if (sz.label && sz.qty != null) { const label = sz.label.toLowerCase(); if (label === 'unique' || label === 'única' || label === 'one size' || label === 'u') stockBySize.unique = sz.qty; if (label === 'xs') stockBySize.xs = sz.qty; if (label === 's') stockBySize.s = sz.qty; if (label === 'm') stockBySize.m = sz.qty; if (label === 'l') stockBySize.l = sz.qty; if (label === 'xl') stockBySize.xl = sz.qty; if (label === '2xl') stockBySize['2xl'] = sz.qty; if (label === '3xl') stockBySize['3xl'] = sz.qty; if (typeof sz.qty === 'number') totalStock += sz.qty; } }); } // Discount logic const price = typeof productData.price === 'number' ? productData.price : parseFloat(productData.price); const compare_at_price = typeof productData.compare_at_price === 'number' ? productData.compare_at_price : parseFloat(productData.compare_at_price); const hasDiscount = compare_at_price && price && compare_at_price > price; const discount_percentage = hasDiscount ? Math.round(((compare_at_price - price) / compare_at_price) * 100) : 0; const discount_amount = hasDiscount ? +(compare_at_price - price).toFixed(2) : 0; // Flatten accelerator if present (optional) let accelerator = ''; if (productData.label_custom && typeof productData.label_custom === 'object' && productData.label_custom.text) { accelerator = productData.label_custom.text; } // Use main product ID, not variant ID const product_id = productData.product_id || productData.id; return { price_patch: 0, // Or fetch if you have it for cards price_total: price, price_original: price, accelerator: accelerator || '', gender: '', // Only if you have a flat gender (otherwise skip/empty) id: product_id !== undefined && product_id !== null ? String(product_id) : '', sku: productData.sku, name: productData.title, collection: collection, type: productData.type || '', promotion: tags.find((t) => t.toLowerCase().includes('promo')) || 'No Aplica', category: tags.find((t) => t.toLowerCase().includes('cat')) || '', fashion: tags.find((t) => t.toLowerCase().includes('fashion')) || 'No Aplica', price: price, currency: null, // Set if you have it quantity: 1, stock_size_unique: stockBySize.unique, stock_size_xs: stockBySize.xs, stock_size_s: stockBySize.s, stock_size_m: stockBySize.m, stock_size_l: stockBySize.l, stock_size_xl: stockBySize.xl, stock_size_2xl: stockBySize['2xl'], stock_size_3xl: stockBySize['3xl'], stock: totalStock > 0, size: '', player: '', patch: '', discount_percentage: discount_percentage, discount_amount: discount_amount, brand: productData.vendor ? productData.vendor.toLowerCase() : '', affiliation: productData.vendor ? productData.vendor.toLowerCase() : '', list_name: list_name, list_position: list_position, }; } trackProductImpressions() { const self = this; function fireImpression(card, list_position = 1, list_name = '') { if (card.dataset.impressionTracked === 'true') return; // Extract the product data from the JSON script tag (if available) let productData = {}; const script = card.querySelector('script[type="application/json"][id^="product-impression"]'); if (script) { try { productData = JSON.parse(script.textContent); } catch (e) {} } productData.sku = card.dataset.reference; const productPayload = self.mapCardDataToProduct(productData, list_position, list_name); // Dispatch with event name as a field self.dispatchEvent({ category: 'product', action: 'impression', placement: list_name || 'recommendations', context: { event: 'product_impression', product: productPayload, }, }); card.dataset.impressionTracked = 'true'; } function observeCard(card, position = 1, listName = '') { if (card.dataset.impressionTracked === 'true') return; const observer = new IntersectionObserver( (entries, obs) => { entries.forEach((entry) => { if (entry.isIntersecting && entry.intersectionRatio >= 0.5) { fireImpression(card, position, listName); obs.unobserve(card); } }); }, { threshold: 0.5 } ); observer.observe(card); } function observeAllCards() { const cards = document.querySelectorAll('.product-card-wrapper[data-reference]'); cards.forEach((card, idx) => observeCard(card, idx + 1, 'recommendations')); } observeAllCards(); // Optionally, re-observe on DOM changes const mo = new MutationObserver(observeAllCards); mo.observe(document.body, { childList: true, subtree: true }); } trackProductImpressionClicks() { const self = this; function handleClick(card, list_position = 1, list_name = '', link) { // Extract product data from the JSON script tag let productData = {}; const script = card.querySelector('script[type="application/json"][id^="product-impression"]'); if (script) { try { productData = JSON.parse(script.textContent); } catch (e) {} } productData.sku = card.dataset.reference; const productPayload = self.mapCardDataToProduct(productData, list_position, list_name); // Dispatch event self.dispatchEvent({ category: 'product', action: 'impression_click', placement: list_name || 'recommendations', context: { event: 'product_impression_click', product: productPayload, }, }); // Navigate if a link is present if (link) { window.location.href = link.href; } } function attachClickEvents() { const cards = document.querySelectorAll('.product-card-wrapper[data-reference]'); cards.forEach((card, idx) => { if (!card.dataset.impressionClickTracked) { card.addEventListener('click', (e) => { const link = e.target.closest('a[href]'); if (link) { e.preventDefault(); handleClick(card, idx + 1, 'recommendations', link); } else { handleClick(card, idx + 1, 'recommendations'); } }); card.dataset.impressionClickTracked = 'true'; } }); } // Run once and on DOM changes attachClickEvents(); const mo = new MutationObserver(attachClickEvents); mo.observe(document.body, { childList: true, subtree: true }); } trackCartView() { fetch('/cart.js') .then((resp) => resp.json()) .then((cartData) => { const productArray = this.getAnalyticsProducts(cartData.items || []); this.dispatchEvent({ category: 'cart', action: 'cart_view', placement: 'cart_drawer', context: { event: 'cart_view', product: productArray, }, }); }) .catch((e) => { console.error('[trackCartView] Error fetching cart:', e); this.dispatchEvent({ category: 'cart', action: 'cart_view', placement: 'cart_drawer', context: { event: 'cart_view', product: [], }, }); }); } addOneMore(form) { if (!form) return null; // 1. Find the JSON script const script = form.querySelector('script[type="application/json"][id^="one-more-product"]'); if (!script) return null; // 2. Parse product JSON let productData; try { productData = JSON.parse(script.textContent); } catch (e) { console.error('[kitDataLayer] addOneMore: failed to parse product JSON', e); return null; } // 3. Map to your unified product entity structure (as used in enrichProductBase/mapCardDataToProduct) const tags = Array.isArray(productData.tags) ? productData.tags : []; const collection = Array.isArray(productData.collection_handles) ? productData.collection_handles.join(',') : ''; let stockBySize = {}, totalStock = 0; if (Array.isArray(productData.sizes)) productData.sizes.forEach((sz) => { if (sz.label && sz.qty != null) { stockBySize[sz.label.toLowerCase()] = sz.qty; if (typeof sz.qty === 'number') totalStock += sz.qty; } }); const hasDiscount = productData.compare_at_price && productData.price && productData.compare_at_price > productData.price; const discount_percentage = hasDiscount ? Math.round(((productData.compare_at_price - productData.price) / productData.compare_at_price) * 100) : 0; const discount_amount = hasDiscount ? +(productData.compare_at_price - productData.price).toFixed(2) : 0; // 4. Return a normalized product object (same fields as enrichProductBase/mapCardDataToProduct) return { id: productData.id !== undefined && productData.id !== null ? String(productData.id) : '', sku: productData.sku, name: productData.title, collection: collection, type: productData.type || '', promotion: tags.find((t) => t.toLowerCase().includes('promo')) || 'No Aplica', category: tags.find((t) => t.toLowerCase().includes('cat')) || '', fashion: tags.find((t) => t.toLowerCase().includes('fashion')) || 'No Aplica', price: productData.price, quantity: 1, stock: totalStock > 0, size: Object.keys(stockBySize)[0] || '', player: '', patch: '', discount_percentage, discount_amount, brand: productData.vendor ? productData.vendor.toLowerCase() : '', affiliation: productData.vendor ? productData.vendor.toLowerCase() : '', list_name: 'one-more', list_position: 1, }; } attachCartClickListener() { // Listen for any <a> with href containing "/cart" document.body.addEventListener( 'click', async (e) => { const link = e.target.closest('a[href*="/cart"]'); if (link) { // Optional: prevent default navigation until event is fired (remove if not needed) // e.preventDefault(); // Fire the cart_click event using current cart state if (window.kitDataLayer && typeof window.kitDataLayer.dispatchEvent === 'function') { await window.kitDataLayer.dispatchEvent({ category: 'cart', action: 'cart_click', placement: 'cart_link', context: { event: 'cart_click', product: window.kitDataLayer.getAnalyticsProducts(window.kitAnalyticsMeta.cart?.items || []), }, }); } // Now let the navigation continue (do not preventDefault if you want normal behavior) } }, true ); // use capture phase to catch link clicks before navigation } attachCheckoutCTAClickListener() { // Ajax checkout CTA (drawer/mini-cart etc.) const ajaxBtn = document.getElementById('ajax-button-checkout'); if (ajaxBtn) { ajaxBtn.addEventListener('click', () => { localStorage.setItem('cta_to_checkout', 'ajax'); }); } // Cart page checkout CTA const cartBtn = document.getElementById('checkout'); if (cartBtn) { cartBtn.addEventListener('click', () => { localStorage.setItem('cta_to_checkout', 'cart'); }); } } } window.kitDataLayer = new KitDataLayer(window.kitAnalyticsMeta, window.productBaseLiquid); window.addEventListener('load', () => { window.kitDataLayer.trackPageView(); window.kitDataLayer.trackProductImpressions(); window.kitDataLayer.trackProductImpressionClicks(); window.kitDataLayer.attachCartClickListener(); window.kitDataLayer.attachCheckoutCTAClickListener(); }); </script> <script src="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/cdn/shop/t/9/assets/progress-bar.js?v=130055476527916297441732092587" defer="defer"></script> <script src="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/cdn/shop/t/9/assets/render-drawer-section.js?v=4204982543486357421753276390" defer="defer"></script> <div class="announcement-bar-container"> <div id="shopify-section-announcement-bar" class="shopify-section"> <link rel='stylesheet' href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/cdn/shop/t/9/assets/disclosure.css?v=5015249747147612741700129548" media='print' onload="this.media='all'"> <div class='fcb-AnnouncementBar' role='region' aria-label='Anuncio' style='display: none;' > <div class='page-width'> <div class='fcb-AnnouncementBar-content '> <div class='fcb-AnnouncementBar-slider '> <div class='fcb-AnnouncementBar-messages '><div class='fcb-AnnouncementBar-slide '><p class='fcb-AnnouncementBar-message'> Envío gratis a Europa* </p></div></div></div> </div> </div> </div> </div> </div> <div id="shopify-section-header" class="shopify-section section-header"> <script src="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/cdn/shop/t/9/assets/details-modal.js?v=4511761896672669691675422272" defer='defer'></script> <script src="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/cdn/shop/t/9/assets/menu-header.js?v=82346953830475404881753176780" defer='defer'></script><svg xmlns='http://www.w3.org/2000/svg' class='hidden'> <symbol id="icon-search" viewbox="0 0 18 19" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.03 11.68A5.784 5.784 0 112.85 3.5a5.784 5.784 0 018.18 8.18zm.26 1.12a6.78 6.78 0 11.72-.7l5.4 5.4a.5.5 0 11-.71.7l-5.41-5.4z" fill="currentColor"/> </symbol> <symbol id="icon-close" class="icon icon-close" fill="none" viewBox="0 0 18 17"> <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor"> </symbol> </svg> <header class='fcb-header' id='header'> <div class='page-width'> <div class='fcb-header__main'> <details class='fcb-header__drawer'> <summary class='fcb-header__drawer__toggle'> <svg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg' > <path d="M3 18.5V17H14.5V18.5H3ZM3 13.25V11.75H21V13.25H3ZM3 8V6.5H21V8H3Z" fill="white"/> </svg> </summary> <div class='fcb-header__drawer__inner'> <div class='fcb-header__drawer__scroll'> <nav class='fcb-header__drawer__menu'> <ul class='fcb-header__drawer__list'> <li data-handle='best-sellers' data-handle='best-sellers' ><a data-handle='best-sellers' class='fcb-header__drawer__parent-item' href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/es-bw/collections/best-sellers" onclick="trackEvents('click menu', 'best-sellers' )"><img src="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/cdn/shop/files/Banner-Menu-Mobile-New-Kit-Moda-Hombre-764x272px-m_06202a03-68de-467a-a54d-2a5c2191a995.jpg?v=1756805614&width=1024" alt="Young man wearing a white FC Barcelona T-shirt with the club crest, standing against a red and blue gradient background" srcset="//store.fcbarcelona.com/cdn/shop/files/Banner-Menu-Mobile-New-Kit-Moda-Hombre-764x272px-m_06202a03-68de-467a-a54d-2a5c2191a995.jpg?v=1756805614&width=352 352w, //store.fcbarcelona.com/cdn/shop/files/Banner-Menu-Mobile-New-Kit-Moda-Hombre-764x272px-m_06202a03-68de-467a-a54d-2a5c2191a995.jpg?v=1756805614&width=832 832w, //store.fcbarcelona.com/cdn/shop/files/Banner-Menu-Mobile-New-Kit-Moda-Hombre-764x272px-m_06202a03-68de-467a-a54d-2a5c2191a995.jpg?v=1756805614&width=1024 1024w" width="1024" class="fcb-header__drawer__parent-item__img"> <div class='fcb-header__drawer__parent-item__label' > BEST SELLERS </div> </a></li> <li data-handle='kits' data-handle='kits' ><details class='fcb-header__drawer__details' data-level='1' > <summary data-handle='kits' class='fcb-header__drawer__parent-item' onclick="trackEvents('click menu', 'kits' )" ><img src="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/cdn/shop/files/Banner-Menu-Mobile-Home-Away-Third-764x272px-02-m.jpg?v=1755587228&width=1024" alt="Alexia Putelles,, Frenkie de Jong and Alejandro Balde with the three kits of FC Barcelona Season 25/26" srcset="//store.fcbarcelona.com/cdn/shop/files/Banner-Menu-Mobile-Home-Away-Third-764x272px-02-m.jpg?v=1755587228&width=352 352w, //store.fcbarcelona.com/cdn/shop/files/Banner-Menu-Mobile-Home-Away-Third-764x272px-02-m.jpg?v=1755587228&width=832 832w, //store.fcbarcelona.com/cdn/shop/files/Banner-Menu-Mobile-Home-Away-Third-764x272px-02-m.jpg?v=1755587228&width=1024 1024w" width="1024" class="fcb-header__drawer__parent-item__img"> <div class='fcb-header__drawer__parent-item__label' style='color: ' > Equipaciones </div> </summary> <div class='fcb-header__drawer__submenu'> <div class='fcb-header__drawer__scroll'> <button class='fcb-header__drawer__submenu__back'> Volver </button> <div class='fcb-header__drawer__submenu__content'> <ul class='fcb-header__drawer__submenu__list'><li> <a class='fcb-header__drawer__submenu__mainlink' href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/es-bw/collections/kits" style='color: '>Ver Equipaciones</a> </li> <li> <li > <details class='fcb-header__drawer__details' data-level='2' role="group" > <summary data-handle='home-kit' class='fcb-header__drawer__submenu__item' onclick="trackEvents('click menu', 'kits:home-kit' )" aria-haspopup="true" aria-expanded="false" aria-controls="submenu-home-kit" tabindex="0" > <span style='color: ' >Primera equipación</span> </summary> <div class='fcb-header__drawer__submenu'> <div class='fcb-header__drawer__scroll'> <button class='fcb-header__drawer__submenu__back' style='color: ' > Equipaciones </button> <div class='fcb-header__drawer__submenu__content'> <ul class='fcb-header__drawer__submenu__list'><a class='fcb-header__drawer__submenu__mainlink' href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/es-bw/collections/home-kit" data-handle='home-kit' style='color: '>Ver Primera equipación</a> <li > <a data-handle='men' href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/es-bw/collections/men-home-kit" data-handle='men' class='fcb-header__drawer__submenu__item fcb-header__drawer__submenu__item--grandchild' onclick="trackEvents('click menu', 'kits:home-kit:men' )" style='color: '> Hombre </a> </li> <li > <a data-handle='kids-and-babies' href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/es-bw/collections/kids-home-kit" data-handle='kids-and-babies' class='fcb-header__drawer__submenu__item fcb-header__drawer__submenu__item--grandchild' onclick="trackEvents('click menu', 'kits:home-kit:kids-and-babies' )" style='color: '> Niños/as y bebés </a> </li> <li > <a data-handle='women' href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/es-bw/collections/women-home-kit" data-handle='women' class='fcb-header__drawer__submenu__item fcb-header__drawer__submenu__item--grandchild' onclick="trackEvents('click menu', 'kits:home-kit:women' )" style='color: '> Mujer </a> </li></ul> </div> </div> </div> </details></li> <li> <li > <details class='fcb-header__drawer__details' data-level='2' role="group" > <summary data-handle='away-kit' class='fcb-header__drawer__submenu__item' onclick="trackEvents('click menu', 'kits:away-kit' )" aria-haspopup="true" aria-expanded="false" aria-controls="submenu-away-kit" tabindex="0" > <span style='color: ' >Segunda equipación</span> </summary> <div class='fcb-header__drawer__submenu'> <div class='fcb-header__drawer__scroll'> <button class='fcb-header__drawer__submenu__back' style='color: ' > Equipaciones </button> <div class='fcb-header__drawer__submenu__content'> <ul class='fcb-header__drawer__submenu__list'><a class='fcb-header__drawer__submenu__mainlink' href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/es-bw/collections/away-kit" data-handle='away-kit' style='color: '>Ver Segunda equipación</a> <li > <a data-handle='men' href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/es-bw/collections/men-away-kit" data-handle='men' class='fcb-header__drawer__submenu__item fcb-header__drawer__submenu__item--grandchild' onclick="trackEvents('click menu', 'kits:away-kit:men' )" style='color: '> Hombre </a> </li> <li > <a data-handle='kids-and-babies' href="https://www.downtownmelody.com/_x/c3RvcmUuZmNiYXJjZWxvbmEuY29t/es-bw/collections/kids-away-kit" data-handle='kids-and-babies' class='fcb-header__drawer__submenu__item fcb-header__drawer__submenu__item--grandchild' onclick="trackEvents('click menu', 'kits:away-kit:kids-and-babies' )" style='color: '> Niños/as y bebés </a> </li> <li >