KarritoKarrito Docs

HTML personalizado en tu catalogo

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

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

Para que sirve

El campo HTML personalizado te permite pegar codigo HTML que Karrito inyecta directamente en el <head> de tu catalogo 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.

Donde esta

  1. Entra a tu panel en karrito.shop/admin
  2. Settings → Integraciones
  3. Scroll hasta HTML personalizado ()
  4. Pega tu codigo en el textarea
  5. Click Guardar HTML

Los cambios son visibles en tu catalogo en pocos segundos (ISR revalida automaticamente).

Tags permitidos por plan

Por seguridad, solo permitimos tags especificos 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 que hay un limite de caracteres

  • Los cataloges publicos cargan rapido porque su <head> es pequeno. Mientras menos codigo, mas rapido carga tu tienda para tus clientes
  • Mas 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 verificacion

Por que los scripts requieren Pro

Los scripts ejecutan codigo 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 Session Replay — grabaciones de sesiones anonimas
  3. Microsoft Clarity — heatmaps y session replay gratis

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

Que NO puedes agregar

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

  • <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 — inyeccion de codigo
  • <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 codigo, Karrito te muestra exactamente que fue removido despues 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 verificacion, pierdes efectividad en tus ads aunque tengas todo configurado correctamente. Ver nuestra guia 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.) mas alla del que Karrito genera automaticamente, puedes pegarlo como <script type="application/ld+json"> en plan Pro.

4. Performance: preconnect a tu CDN

Si cargas imagenes 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 vacio y tu catalogo 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 catalogo 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.

Recomendacion: prueba tu codigo 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 minimo 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 catalogo 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 codigo diferente en home vs producto?

Actualmente no — el HTML custom aplica a TODAS las paginas del catalogo (home, producto, categoria, busqueda, 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 catalogo, 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 automaticamente.

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

Ver tambien