KarritoKarrito Docs

HTML personalizado en tu catálogo

Agrega verificaciones de dominio, pixels de terceros, JSON-LD o scripts custom al <head> de tu catálogo publico.

6 min de lecturaintegracion, html, meta, verificacion, pixels, custom-headActualizado: 11 de abril de 2026

Para qué sirve

El campo HTML personalizado te permite pegar código HTML que Karrito inyecta directamente en el <head> de tu catálogo publico. Es la forma de agregar cosas que no vienen con integraciones dedicadas, como:

  • Verificaciones de dominio — Facebook, Google Search Console, Pinterest, Bing
  • Pixels de terceros — TikTok, Snapchat, Hotjar, Microsoft Clarity
  • Snippets JSON-LD custom — datos estructurados avanzados para Google
  • CSS overrides globales — ajustes de estilo que no caben en el editor visual
  • Preconnect / dns-prefetch — optimizaciones de performance para CDNs externos

Si lo que quieres integrar ya tiene campo dedicado en Karrito (Meta Pixel, Google Analytics, Umami), usa el campo dedicado. El HTML personalizado es para todo lo demas.

Dónde esta

  1. Entra a tu panel en karrito.shop/admin
  2. Configuración → Conexiones
  3. Scroll hasta HTML personalizado ()
  4. Pega tu código en el textarea
  5. Click Guardar HTML

Los cambios son visibles en tu catálogo en pocos segundos (ISR revalida automáticamente).

Tags permitidos por plan

Por seguridad, solo permitimos tags específicos que son tipicos del <head>:

Plan Tags permitidos Max caracteres
FREE <meta>, <link>, <title>, <noscript> 1.000
PRO + <script>, <style> 8.000
LIFETIME + <script>, <style> 16.000

Por qué hay un limite de caracteres

  • Los cataloges publicos cargan rápido porque su <head> es pequeño. Mientras menos código, más rápido carga tu tienda para tus clientes
  • Más de 8.000 caracteres de scripts externos puede afectar tu Core Web Vitals y tu ranking en Google
  • 1.000 caracteres en FREE son suficientes para 5 a 10 meta tags de verificación

Por qué los scripts requieren Pro

Los scripts ejecutan código JavaScript en todos tus visitantes. Requieren:

  1. Performance monitoring — un mal script puede hacer tu tienda lenta
  2. GDPR compliance — los pixels tracean usuarios, debes cumplir leyes de privacidad
  3. Responsabilidad del merchant — solo negocios serios usan tracking de terceros

Por eso limitamos los scripts a planes pagos — es una barrera de calidad.

Ejemplos incluidos

Karrito trae 6 ejemplos copy-paste listos para usar. Haz click en "Ver ejemplos" para expandirlos. Cada uno tiene un boton "Usar →" que copia el snippet al textarea.

Tier FREE (verificaciones de dominio)

  1. Meta Domain Verification — requerido para que Meta Ads reciba eventos completos en iOS 14.5+
  2. Google Search Console — verifica tu tienda para monitorear SEO
  3. Pinterest Tag — verifica tu dominio en Pinterest Business

Tier PRO (pixels y analytics)

  1. TikTok Pixel — tracking de conversiones de TikTok Ads
  2. Hotjar Sessión Replay — grabaciones de sesiones anonimas
  3. Microsoft Clarity — heatmaps y sessión replay gratis

Cada ejemplo tiene un placeholder en MAYUSCULAS (ej. YOUR_VERIFICATION_CODE_HERE) que debes reemplazar con tu propio código.

Qué NO puedes agregar

Karrito sanitiza todo el HTML antes de guardarlo para protegerte a ti y a tus clientes. Estos elementos son rechazados automáticamente:

  • <iframe>, <object>, <embed> — pueden usarse para clickjacking o malware
  • <form>, <input>, <button> — contenido del body, no va en head
  • <base> — puede redirigir silenciosamente a dominios maliciosos
  • Event handlers inline (onclick, onload, onerror, etc.) — vectores de XSS
  • javascript:, data:text/html, vbscript: en atributos — inyección de código
  • <meta http-equiv="refresh"> — redirect-based phishing
  • CSS expression() o @import javascript: — vectores XSS legacy
  • <svg>, <math> — contenido externo XSS conocido

Si alguno de estos aparece en tu código, Karrito te muestra exactamente que fue removido después de guardar.

Casos de uso comunes

1. Verificar dominio en Meta Ads (iOS 14.5+)

Si haces publicidad en Facebook o Instagram, debes verificar tu dominio en Meta Business Manager para que el Pixel y CAPI reciban eventos completos de dispositivos iOS 14.5 o superior (Apple ATT).

Sin esta verificación, pierdes efectividad en tus ads aunque tengas todo configurado correctamente. Ver nuestra guía dedicada para el proceso completo.

2. Multiples pixels en la misma tienda

Si usas Facebook Ads + TikTok Ads + Google Ads simultaneamente, puedes pegar los 3 pixels en el HTML personalizado (plan Pro). Cada uno tracea independiente.

3. Schema.org avanzado

Si necesitas emitir JSON-LD custom (Organization, LocalBusiness, Article, etc.) más alla del que Karrito genera automáticamente, puedes pegarlo como <script type="application/ld+json"> en plan Pro.

4. Performance: preconnect a tu CDN

Si cargas imágenes desde un CDN propio (ej. cdn.mitienda.com), agregar un <link rel="preconnect"> reduce el tiempo de primer render visible (LCP) en 50-200ms.

Limpiar el HTML personalizado

Para eliminar el HTML custom, simplemente:

  1. Borra todo el contenido del textarea
  2. Click Guardar HTML

El campo quedara vacío y tu catálogo volvera a su <head> default. Los datos no se borran de la DB, solo el campo se setea a null.

Preguntas frecuentes

¿Puedo romper mi catálogo con un script malo?

Si, tecnicamente si. Aunque Karrito sanitiza el HTML para prevenir ataques, no validamos la sintaxis de JavaScript. Un script con un bug puede lanzar errores en el navegador y afectar otras funcionalidades de tu tienda.

Recomendación: prueba tu código en un entorno de desarrollo antes de pegarlo en prod. Si algo sale mal, simplemente borra el HTML del textarea y guarda para restaurar el default.

¿El HTML custom afecta el rendimiento?

Depende de que agregues:

  • Meta tags y preconnects: impacto cero (peso despreciable)
  • Scripts sincronos: pueden ralentizar el render inicial si no usan async o defer
  • Scripts asincronos: impacto mínimo en Core Web Vitals
  • Estilos inline: minimal si son pocos KB

Karrito te avisa si un script externo no tiene integrity= (SRI) — es una buena practica que protege contra CDNs comprometidos.

¿Funciona en la tienda preview del editor?

No. El HTML custom solo se inyecta en el catálogo publico (ej. mi-tienda.karrito.store). El editor visual no lo ejecuta para evitar que scripts del merchant rompan el editor mientras trabaja.

¿Puedo agregar código diferente en home vs producto?

Actualmente no — el HTML custom aplica a TODAS las páginas del catálogo (home, producto, categoría, búsqueda, etc.). Es una feature del roadmap futuro.

¿Puedo ver los logs de que se inyecto?

Si, usa la Admin API o pregunta en soporte. Karrito registra cada cambio con estructura JSON en los logs del servidor (storefront.custom_head_updated).

Seguridad

Karrito sanitiza el HTML dos veces:

  1. Al guardar — cuando haces click en Guardar, el sanitizer verifica que todo este en la whitelist antes de persistir en la DB
  2. Al renderizar — cada vez que un visitante carga tu catálogo, el HTML se re-sanitiza como defensa en profundidad

Esto significa que aunque un bypass desconocido del sanitizer se descubra en el futuro, tu tienda sigue protegida automáticamente.

El sanitizer sigue el OWASP XSS Prevention Cheat Sheet como fundamento y usa DOMPurify (el estandar de facto para sanitización HTML en JavaScript).

Ver también