Cómo crear un Custom Pixel en Shopify

⚠️ Importante

Desde 2024, el método oficial es Customer Events con Custom Pixels. Los scripts en theme.liquid ya no reciben datos del checkout en tiendas nuevas y van a dejar de funcionar progresivamente.

// 1. INICIALIZACIÓN  -  carga el SDK (Meta, Google, etc.)

// 2. SUSCRIPCIÓN A EVENTOS
analytics.subscribe('nombre_del_evento', (event) => {
  // 3. PROCESAMIENTO
  // Extraes los datos del evento
  // Los envías a la plataforma que quieras
});

analytics.subscribe('product_viewed', (event) => {
  const product = event.data.productVariant;
  
  product.id;                   // "44325678901234"
  product.title;                // "Vestido Largo Negro - M"
  product.price.amount;         // "59.99"
  product.price.currencyCode;   // "USD"
  product.product.title;        // "Vestido Largo Negro"
  product.product.type;         // "Dress"
  product.product.vendor;       // "Tu Marca"
  product.sku;                  // "DRESS-BLK-M"
  product.image?.src;           // URL de la imagen
});

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;
  
  checkout.order?.id;             // "gid://shopify/OrderIdentity/1234"
  checkout.token;                 // Token único del checkout
  checkout.totalPrice.amount;     // "89.99" (total pagado)
  checkout.subtotalPrice.amount;  // Subtotal
  checkout.totalTax.amount;       // Impuestos
  checkout.shippingLine?.price.amount; // Envío
  checkout.discountApplications;  // Descuentos
  checkout.email;                 // "usuario@email.com"
  checkout.phone;                 // "+1234567890"
});

Pixel completo: Meta (Facebook)

// =============================================
// META PIXEL - CUSTOM PIXEL PARA SHOPIFY
// =============================================
const PIXEL_ID = 'TU_PIXEL_ID';

// Cargar SDK de Meta Pixel
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){
n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', PIXEL_ID);

// Helpers
function generateEventId(prefix, id) {
  return prefix + '_' + id + '_' + Date.now();
}
function cleanOrderId(gid) {
  if (!gid) return '';
  return gid.split('/').pop();
}

// 1. PAGE VIEW
analytics.subscribe('page_viewed', () => fbq('track', 'PageView'));

// 2. VIEW CONTENT
analytics.subscribe('product_viewed', (event) => {
  const p = event.data.productVariant;
  fbq('track', 'ViewContent', {
    content_ids: [p.id.toString()],
    content_type: 'product',
    content_name: p.product.title,
    content_category: p.product.type || '',
    value: parseFloat(p.price.amount),
    currency: p.price.currencyCode
  }, { eventID: generateEventId('vc', p.id) });
});

// 3. ADD TO CART
analytics.subscribe('product_added_to_cart', (event) => {
  const line = event.data.cartLine;
  const v = line.merchandise;
  fbq('track', 'AddToCart', {
    content_ids: [v.id.toString()],
    content_type: 'product',
    content_name: v.title,
    value: parseFloat(line.cost.totalAmount.amount),
    currency: line.cost.totalAmount.currencyCode,
    contents: [{ id: v.id.toString(), quantity: line.quantity }]
  }, { eventID: generateEventId('atc', v.id) });
});

// 4. INITIATE CHECKOUT
analytics.subscribe('checkout_started', (event) => {
  const c = event.data.checkout;
  fbq('track', 'InitiateCheckout', {
    content_ids: c.lineItems.map(i => i.variant.id.toString()),
    content_type: 'product',
    contents: c.lineItems.map(i => ({ id: i.variant.id.toString(), quantity: i.quantity })),
    value: parseFloat(c.totalPrice.amount),
    currency: c.totalPrice.currencyCode,
    num_items: c.lineItems.length
  }, { eventID: generateEventId('ic', c.token) });
});

// 5. PURCHASE (con dedup contra reload)
analytics.subscribe('checkout_completed', (event) => {
  const c = event.data.checkout;
  const orderId = cleanOrderId(c.order?.id) || c.token;
  
  const last = sessionStorage.getItem('_fb_last_purchase');
  if (last === orderId) return;
  sessionStorage.setItem('_fb_last_purchase', orderId);
  
  fbq('track', 'Purchase', {
    content_ids: c.lineItems.map(i => i.variant.id.toString()),
    content_type: 'product',
    contents: c.lineItems.map(i => ({
      id: i.variant.id.toString(),
      quantity: i.quantity,
      item_price: parseFloat(i.variant.price.amount)
    })),
    value: parseFloat(c.totalPrice.amount),
    currency: c.totalPrice.currencyCode,
    order_id: orderId
  }, { eventID: orderId });
  
  if (c.email) {
    fbq('init', PIXEL_ID, { em: c.email, ph: c.phone || '' });
  }
});

// 6. SEARCH
analytics.subscribe('search_submitted', (event) => {
  fbq('track', 'Search', { search_string: event.data.searchResult?.query || '' });
});

📌 Después de pegarlo

1. Reemplaza TU_PIXEL_ID con tu ID real (Meta Events Manager → Data Sources)
2. Click Save → Connect → el pixel está activo
3. Si vas a usar también CAPI, los eventID ya están listos para deduplicación

Pixel completo: Google Ads

// =============================================
// GOOGLE ADS CONVERSION TRACKING - CUSTOM PIXEL
// =============================================
const AW_ID = 'AW-XXXXXXXXX';
const PURCHASE_LABEL = 'XXXXXXXXXXXXX';

// Cargar gtag.js
const script = document.createElement('script');
script.src = 'https://www.googletagmanager.com/gtag/js?id=' + AW_ID;
script.async = true;
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', AW_ID);

function cleanOrderId(gid) {
  if (!gid) return '';
  return gid.split('/').pop();
}

// PURCHASE - La conversión principal
analytics.subscribe('checkout_completed', (event) => {
  const c = event.data.checkout;
  const orderId = cleanOrderId(c.order?.id) || c.token;
  
  const last = sessionStorage.getItem('_gads_last_purchase');
  if (last === orderId) return;
  sessionStorage.setItem('_gads_last_purchase', orderId);
  
  gtag('event', 'conversion', {
    'send_to': AW_ID + '/' + PURCHASE_LABEL,
    'value': parseFloat(c.totalPrice.amount),
    'currency': c.totalPrice.currencyCode,
    'transaction_id': orderId
  });
  
  // Enhanced Conversions  -  Google hashea automáticamente
  if (c.email) {
    gtag('set', 'user_data', {
      'email': c.email,
      'phone_number': c.phone || ''
    });
  }
});

// ADD TO CART (conversión secundaria opcional)
analytics.subscribe('product_added_to_cart', (event) => {
  const line = event.data.cartLine;
  gtag('event', 'add_to_cart', {
    'send_to': AW_ID,
    'value': parseFloat(line.cost.totalAmount.amount),
    'currency': line.cost.totalAmount.currencyCode
  });
});

// BEGIN CHECKOUT
analytics.subscribe('checkout_started', (event) => {
  const c = event.data.checkout;
  gtag('event', 'begin_checkout', {
    'send_to': AW_ID,
    'value': parseFloat(c.totalPrice.amount),
    'currency': c.totalPrice.currencyCode
  });
});

📌 IDs que necesitas reemplazar

• AW-XXXXXXXXX → tu Conversion ID (Google Ads → Tools → Conversions)
• PURCHASE_LABEL → el label de la conversión "Purchase" que creaste

Pixel completo: GA4 Ecommerce

// =============================================
// GA4 ECOMMERCE TRACKING - CUSTOM PIXEL
// =============================================
const GA4_ID = 'G-XXXXXXXXXX';

const script = document.createElement('script');
script.src = 'https://www.googletagmanager.com/gtag/js?id=' + GA4_ID;
script.async = true;
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', GA4_ID);

// Si usas GTM Server-Side, descomenta:
// gtag('config', GA4_ID, { 'server_container_url': 'https://tracking.tutienda.com' });

function cleanOrderId(gid) {
  if (!gid) return '';
  return gid.split('/').pop();
}

// VIEW ITEM
analytics.subscribe('product_viewed', (event) => {
  const p = event.data.productVariant;
  gtag('event', 'view_item', {
    currency: p.price.currencyCode,
    value: parseFloat(p.price.amount),
    items: [{
      item_id: p.sku || p.id.toString(),
      item_name: p.product.title,
      item_category: p.product.type || '',
      item_variant: p.title,
      price: parseFloat(p.price.amount),
      quantity: 1
    }]
  });
});

// ADD TO CART
analytics.subscribe('product_added_to_cart', (event) => {
  const line = event.data.cartLine;
  const v = line.merchandise;
  gtag('event', 'add_to_cart', {
    currency: line.cost.totalAmount.currencyCode,
    value: parseFloat(line.cost.totalAmount.amount),
    items: [{
      item_id: v.sku || v.id.toString(),
      item_name: v.title,
      price: parseFloat(v.price.amount),
      quantity: line.quantity
    }]
  });
});

// BEGIN CHECKOUT
analytics.subscribe('checkout_started', (event) => {
  const c = event.data.checkout;
  gtag('event', 'begin_checkout', {
    currency: c.totalPrice.currencyCode,
    value: parseFloat(c.totalPrice.amount),
    items: c.lineItems.map(i => ({
      item_id: i.variant.sku || i.variant.id.toString(),
      item_name: i.title,
      item_variant: i.variant.title,
      price: parseFloat(i.variant.price.amount),
      quantity: i.quantity
    }))
  });
});

// PURCHASE
analytics.subscribe('checkout_completed', (event) => {
  const c = event.data.checkout;
  const orderId = cleanOrderId(c.order?.id) || c.token;
  
  const last = sessionStorage.getItem('_ga4_last_purchase');
  if (last === orderId) return;
  sessionStorage.setItem('_ga4_last_purchase', orderId);
  
  gtag('event', 'purchase', {
    transaction_id: orderId,
    currency: c.totalPrice.currencyCode,
    value: parseFloat(c.totalPrice.amount),
    tax: parseFloat(c.totalTax?.amount || 0),
    shipping: parseFloat(c.shippingLine?.price?.amount || 0),
    items: c.lineItems.map(i => ({
      item_id: i.variant.sku || i.variant.id.toString(),
      item_name: i.title,
      item_variant: i.variant.title,
      price: parseFloat(i.variant.price.amount),
      quantity: i.quantity
    }))
  });
});

// SEARCH
analytics.subscribe('search_submitted', (event) => {
  gtag('event', 'search', { search_term: event.data.searchResult?.query || '' });
});

💡 Tip Server-Side

Si usas GTM Server-Side, descomenta la línea con server_container_url y apunta a tu dominio Stape (ej: tracking.tutienda.com). Los datos pasarán por tu servidor en vez de ir directo a Google.

Pixel completo: TikTok

// =============================================
// TIKTOK PIXEL - CUSTOM PIXEL
// =============================================
const TT_PIXEL_ID = 'TU_TIKTOK_PIXEL_ID';

!function(w,d,t){
  w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];
  ttq.methods=["page","track","identify","instances","debug","on","off",
  "once","ready","alias","group","enableCookie","disableCookie"];
  ttq.setAndDefer=function(t,e){t[e]=function(){
  t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};
  for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);
  ttq.load=function(e){var r="https://analytics.tiktok.com/i18n/pixel/events.js";
  ttq._i=ttq._i||{};ttq._i[e]=[];ttq._i[e]._u=r;ttq._t=ttq._t||{};
  ttq._t[e]=+new Date;ttq._o=ttq._o||{};
  var s=d.createElement("script");s.async=!0;s.src=r+"?sdkid="+e+"&lib="+t;
  var f=d.getElementsByTagName("script")[0];f.parentNode.insertBefore(s,f)};
  ttq.load(TT_PIXEL_ID); ttq.page();
}(window,document,'ttq');

function cleanOrderId(gid) {
  if (!gid) return '';
  return gid.split('/').pop();
}

// VIEW CONTENT
analytics.subscribe('product_viewed', (event) => {
  const p = event.data.productVariant;
  ttq.track('ViewContent', {
    content_id: p.id.toString(),
    content_type: 'product',
    content_name: p.product.title,
    value: parseFloat(p.price.amount),
    currency: p.price.currencyCode
  });
});

// ADD TO CART
analytics.subscribe('product_added_to_cart', (event) => {
  const line = event.data.cartLine;
  ttq.track('AddToCart', {
    content_id: line.merchandise.id.toString(),
    content_type: 'product',
    value: parseFloat(line.cost.totalAmount.amount),
    currency: line.cost.totalAmount.currencyCode,
    quantity: line.quantity
  });
});

// INITIATE CHECKOUT
analytics.subscribe('checkout_started', (event) => {
  const c = event.data.checkout;
  ttq.track('InitiateCheckout', {
    value: parseFloat(c.totalPrice.amount),
    currency: c.totalPrice.currencyCode
  });
});

// COMPLETE PAYMENT
analytics.subscribe('checkout_completed', (event) => {
  const c = event.data.checkout;
  const orderId = cleanOrderId(c.order?.id) || c.token;
  
  const last = sessionStorage.getItem('_tt_last_purchase');
  if (last === orderId) return;
  sessionStorage.setItem('_tt_last_purchase', orderId);
  
  ttq.track('CompletePayment', {
    content_type: 'product',
    value: parseFloat(c.totalPrice.amount),
    currency: c.totalPrice.currencyCode,
    quantity: c.lineItems.length
  });
});

Recomendación rápida

Si vendes solo en USA/LATAM: usa "Not required". Si vendes a Europa: usa "Required before tracking" y configura un consent banner que pase el estado a Shopify vía Customer Privacy API.

analytics.subscribe('checkout_completed', (event) => {
  console.log('=== PURCHASE EVENT ===');
  console.log('Order ID:', event.data.checkout.order?.id);
  console.log('Total:', event.data.checkout.totalPrice.amount);
  console.log('Items:', event.data.checkout.lineItems);
  // ... tu código de tracking
});

Recomendación general

Un Custom Pixel por plataforma para tiendas medianas. Para tiendas con mucho tráfico y múltiples plataformas, usa GTM + un único Custom Pixel que envía al servidor.

• Custom Pixel creado en Settings → Customer Events
• Pixel ID / Measurement ID correcto en el código
• Eventos suscritos: page_viewed, product_viewed, product_added_to_cart, checkout_started, checkout_completed
• Protección contra duplicados de Purchase con sessionStorage
• parseFloat() en todos los valores de precio
• Fallback para order ID: order?.id || token
• Pixel en estado 'Connected'
• Customer Privacy configurado según tu mercado
• Verificado en Events Manager / Tag Assistant / Console
• console.log() de debug removidos antes de producción