Servicios de Google integrados en la web.
Mapa interactivo en /tiendas (localizador de tiendas Pampling).
| Variable | Dónde | Valor staging |
|---|---|---|
NEXT_PUBLIC_GOOGLE_MAPS |
Storefront | AIzaSyD9HVt5ArAlzibrs8OsRzrpFVL059mGBE8 |
Esta API key fue creada por Tailor. Está cubriendo
*.pampling.comactualmente. Para producción, recomendable crear una API key propia de Pampling.
La API key actual autoriza:
*.pampling.com/*Pendiente añadir:
*.pampling.org/* (staging)localhost:3000/* (desarrollo local)Si un dominio no está autorizado, Google Maps devuelve RefererNotAllowedMapError y el mapa no carga.
Google Maps Platform cobra por uso (Maps JavaScript API):
Para tráfico estimado de Pampling (~5M páginas vistas/mes, de las cuales solo una fracción carga /tiendas), el coste estimado es bajo (~$10-50/mes).
*.pampling.org/* a referrers.Contenedor de tags que incluye Google Analytics 4 y otros pixels (Facebook, etc.).
| Entorno | Container ID |
|---|---|
| Staging | GTM-TXG8GNVN |
| Producción | Pendiente — preguntar a marketing por el ID del contenedor de producción. Si no existe, crear uno nuevo |
NEXT_PUBLIC_GTM_ID = GTM-XXXXXXX
Formato validado en apps/storefront/src/app/[locale]/layout.tsx con regex /^GTM-[A-Z0-9]{4,20}$/. Si el formato es incorrecto, GTM no se carga (log de warning en server).
GTM se inyecta en <head> con strategy="afterInteractive" (Next.js Script). Además inserta el <noscript> iframe en <body> para tracking básico sin JS.
El frontend puede disparar eventos al dataLayer:
window.dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: 'EUR',
value: 16.99,
items: [{ item_id: '...', item_name: '...' }]
}
});
GTM consume eventos del dataLayer y los reenvía a GA4, Facebook Pixel, etc.
GTM respeta los signals de consent de Cookiebot. Si el usuario rechaza Marketing, los tags marcados como "wait for consent" no se ejecutan.
Configurado en Shopify Customer Account API, no en la web directamente.