# 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…

- Página: <https://www.datafirefly.com/es/documentation/dfcodeinjector/>
- Idioma: es
- Actualizado el: 2026-06-27
- Otros idiomas: [fr](https://www.datafirefly.com/documentation/dfcodeinjector/index.md), [en](https://www.datafirefly.com/en/documentation/dfcodeinjector/index.md), [de](https://www.datafirefly.com/de/documentation/dfcodeinjector/index.md), [it](https://www.datafirefly.com/it/documentation/dfcodeinjector/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfcodeinjector/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfcodeinjector/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfcodeinjector/index.md)
- Índice: <https://www.datafirefly.com/es/documentation/llms.txt>

## 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.

Compatible con PrestaShop 8.0 a 9.x, PHP 8.1 y superior, multitienda. Sin dependencias externas.

## 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 -->
```

1. 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

La inyección en la **etiqueta head** funciona con todos los temas. Las ubicaciones **inicio** y **fin del body** se basan en los hooks `displayAfterBodyOpeningTag` y `displayBeforeBodyClosingTag`, presentes en el tema Classic de PrestaShop. En un tema personalizado, comprueba que estos hooks se invocan en las plantillas.

## 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.

Como el código se inyecta sin purificación, verifica tu sintaxis (etiquetas bien cerradas) antes de activar un snippet en una tienda en producción.