Inyector de código Header/Footer (CSS/JS) — Guía completa

Presentación

El Inyector de código Header/Footer permite añadir código CSS, JavaScript o HTML a tu tienda PrestaShop sin modificar ningún archivo del tema. Todo se gestiona desde el back-office en forma de snippets: cada bloque de código tiene su ubicación, su segmentación de páginas, su orden de inyección y su estado activo o inactivo.

Casos de uso típicos: Google Tag Manager, Google Analytics, Meta Pixel, etiquetas de verificación (Search Console, Pinterest…), estilos CSS personalizados, scripts de chat o banner de consentimiento de cookies.

Instalación

1. Descarga el archivo dfcodeinjector.zip desde tu cuenta DataFirefly.
2. En el back-office, abre Módulos > Gestor de módulos, haz clic en Subir un módulo y suelta el archivo.
3. Haz clic en Configurar para abrir el gestor de snippets.

Crear un snippet

Desde el gestor, haz clic en Añadir un snippet y completa los campos siguientes.

Campos del formulario

• Nombre — identificador interno del snippet (ej. «Google Tag Manager»).
• Ubicación — dónde se inyecta el código (ver más abajo).
• Código — pega tu código completo, etiquetas incluidas. Se inyecta tal cual, sin transformación ni purificación.
• Páginas segmentadas — déjalo vacío para todas las páginas, o selecciona páginas concretas.
• Orden de visualización — los snippets de una misma ubicación se inyectan en orden ascendente.
• Activo — activa o desactiva el snippet sin eliminarlo.

Las tres ubicaciones

• Header (etiqueta head) — para estilos, etiquetas meta y etiquetas de verificación. Inyectado mediante el hook displayHeader.
• Inicio del body — justo después de la apertura del body, para contenedores de marcado (ej. la parte noscript de GTM). Hook displayAfterBodyOpeningTag.
• Fin del body — justo antes del cierre del body, para scripts de rendimiento y seguimiento. Hook displayBeforeBodyClosingTag.

Segmentación por página

Cada snippet puede mostrarse en todas partes (campo vacío) o restringirse a ciertas páginas: inicio, ficha de producto, categoría, CMS, búsqueda, carrito, proceso de compra, etc. El módulo compara la página actual con el controlador front (php_self); si hay una lista definida y la página no forma parte de ella, el snippet no se inyecta.

Ejemplos

Google Tag Manager

GTM se instala en dos partes. Crea dos snippets:

1. Snippet «GTM head» — ubicación Header, pega el primer script facilitado por Google:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){ ... })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

2. Snippet «GTM body» — ubicación Inicio del body, pega la parte noscript facilitada por Google.

CSS personalizado

Ubicación Header, envuelve tu CSS en una etiqueta style:

<style>
.header-banner { background:#0f172a; color:#fff; }
</style>

Etiqueta de verificación

Para Search Console o una red social, ubicación Header:

<meta name="google-site-verification" content="TU_CODIGO" />

Multitienda

En contexto multitienda, cada snippet puede ser global (todas las tiendas) o reservarse a una tienda concreta mediante el campo Tienda. En modo monotienda, este campo está oculto y el snippet se aplica a la tienda actual.

Compatibilidad de temas

Solución de problemas

• El código no aparece — comprueba que el snippet está activo, que la ubicación es correcta y que la página actual forma parte de las páginas segmentadas (o que el campo está vacío).
• Nada al inicio o fin del body — tu tema probablemente no invoca los hooks correspondientes; usa la ubicación Header o añade estos hooks al tema.
• Conflicto de orden — ajusta el campo Orden de visualización para controlar la secuencia de inyección.