#3 Customer Events Pixel: estructura, constantes y funciones de utilidad – Curso DataLayer de Compra en Shopify Plan Standard

Guía técnica del Customer Events Pixel. Explica la estructura del script para el seguimiento de comportamiento, define las constantes clave (IDs, nombres de eventos) y detalla las funciones de utilidad para procesar y enviar datos de conversión de forma óptima y segura.

Contenido de la lección

(Recordar que este contenido es la escaleta)

El Pixel Personalizado se instala en Shopify Admin → Configuración → Eventos de cliente → Pixel personalizado. Es un entorno JavaScript aislado con acceso al objeto analytics de Shopify y capacidad de hacer fetch a APIs externas. Todo el tracking de checkout vive aquí.

Constantes de configuración

const GA4_MEASUREMENT_ID = 'rellena con tus datos';
const GA4_API_SECRET     = 'rellena con tus datos';
const GOOGLE_ADS_ID      = 'rellena con tus datos';
const CONVERSION_PURCHASE       = 'rellena con tus datos';
const CONVERSION_ADD_TO_CART    = 'rellena con tus datos';
const CONVERSION_BEGIN_CHECKOUT = 'rellena con tus datos';
const ID_PREFIX = 'rellena con tus datos'; //Tu prefijo de id de productos//

buildItemId() — formato Merchant Center

Shopify en el contexto del Pixel entrega los IDs en formato GraphQL global (gid://shopify/Product/12345). Esta función limpia el prefijo y construye el formato que coincide con el feed de Google Merchant Center:

function buildItemId(productId, variantId) {
  const pid = String(productId || '').replace('gid://shopify/Product/', '');
  const vid = String(variantId || '').replace('gid://shopify/ProductVariant/', '');
  return ID_PREFIX + pid + '_' + vid;  // → shopify_RELLENODATOS_12345_67890
}

getClientId() — consistencia de sesión

Obtiene el client_id de GA4 leyendo la cookie _ga. Esto garantiza que los eventos del checkout se atribuyen a la misma sesión que los eventos de la tienda enviados por GTM. Si no existe la cookie, genera un ID aleatorio:

function getClientId() {
  const gaCookie = document.cookie.split(';').find(c => c.trim().startsWith('_ga='));
  if (gaCookie) {
    const parts = gaCookie.trim().split('.');
    if (parts.length >= 4) return parts[2] + '.' + parts[3];
  }
  return Math.random().toString(36).slice(2) + '.' + Date.now();
}

sendGA4() — Measurement Protocol

Envía eventos directamente a GA4 sin pasar por GTM, usando la API de Measurement Protocol. Recibe el client_id y un array de eventos con nombre y parámetros:

function sendGA4(clientId, events) {
  fetch('https://www.google-analytics.com/mp/collect'
    + '?measurement_id=' + GA4_MEASUREMENT_ID
    + '&api_secret=' + GA4_API_SECRET,
    { method: 'POST',
      body: JSON.stringify({ client_id: clientId, events: events }) }
  ).catch(err => console.error('GA4 MP error:', err));
}

Inicialización de gtag para Google Ads

El pixel carga dinámicamente el script de gtag e inicializa la cuenta de Google Ads. Esto es necesario porque en el entorno del Pixel de Shopify no hay acceso al GTM de la tienda principal:

window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
window.gtag = gtag;
gtag('js', new Date());
gtag('config', GOOGLE_ADS_ID);
// Carga el script gtag.js dinámicamente
var script = document.createElement('script');
script.src = 'https://www.googletagmanager.com/gtag/js?id=' + GOOGLE_ADS_ID;
document.head.appendChild(script);

Objetivo de la lección

Comprender la estructura del Pixel Personalizado de Shopify, las constantes de configuración, y las funciones de utilidad (buildItemId, sendGA4, getClientId, mapItems) que usan todos los eventos del checkout.

Recursos

• Shopify Customer Events API: https://shopify.dev/docs/api/customer-events/pixels  
• GA4 Measurement Protocol: https://developers.google.com/analytics/devguides/collection/protocol/ga4/sending-events

• API Secret GA4 MP: Analytics Admin → Data Streams → Measurement Protocol API secrets