# Injetor de Código no Cabeçalho e Rodapé (CSS/JS): guia completo

> Apresentação O Injetor de código no cabeçalho e rodapé adiciona código CSS, JavaScript ou HTML à sua loja PrestaShop sem modificar os ficheiros do tema. Cada bloco de código é…

- Página: <https://www.datafirefly.com/pt/documentation/dfcodeinjector/>
- Idioma: pt
- Atualizado em: 2026-10-11
- Outros idiomas: [fr](https://www.datafirefly.com/documentation/dfcodeinjector/index.md), [en](https://www.datafirefly.com/en/documentation/dfcodeinjector/index.md), [es](https://www.datafirefly.com/es/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), [nl](https://www.datafirefly.com/nl/documentation/dfcodeinjector/index.md)
- Índice: <https://www.datafirefly.com/pt/documentation/llms.txt>

## Apresentação

O **Injetor de código no cabeçalho e rodapé** adiciona código CSS, JavaScript ou HTML à sua loja PrestaShop sem modificar os ficheiros do tema. Cada bloco de código é um _snippet_ gerido a partir do back-office, com a sua localização, as suas páginas, a sua ordem de injeção e o seu estado.

Utilizações habituais: Google Tag Manager, Google Analytics, Meta Pixel, etiquetas de verificação (Search Console, Pinterest), CSS personalizado, widget de chat.

## Instalação

1. Descarregue o arquivo `dfcodeinjector.zip` a partir da sua conta DataFirefly.
2. No back-office, abra **Módulos > Gestor de módulos**, clique em **Carregar um módulo** e largue o arquivo.
3. Clique em **Configurar** para abrir a lista de snippets.

Compatível com PrestaShop 8.0 a 9.x e multiloja. Interface disponível em francês, inglês, espanhol, alemão, italiano, neerlandês, polaco e português.

## Atualizar a partir da versão 1.0.0

Carregue o novo arquivo pelo gestor de módulos: a atualização é executada automaticamente e os seus snippets são mantidos. Um snippet que estava limitado a certas páginas passa para a segmentação **Apenas as páginas selecionadas**, os restantes para **Todas as páginas**.

## Criar um snippet

Na lista, clique em **Adicionar um snippet**.

### Campos do formulário

- **Nome**: nome interno, por exemplo «Google Tag Manager».
- **Localização**: onde o código é injetado (ver abaixo).
- **Código**: o código completo, incluindo as etiquetas. É injetado tal como está. Neste campo, a tecla Tab insere 4 espaços; prima Escape e depois Tab para passar ao campo seguinte.
- **Segmentação**, **Páginas** e **Outras páginas**: as páginas em que o snippet se aplica.
- **Ordem**: ordem de injeção dentro de uma localização. Se ficar vazio, o snippet é colocado em último.
- **Modo de teste**: limita a injeção aos endereços IP de manutenção.
- **Ativo**: ativa ou desativa o snippet sem o eliminar.
- **Loja** (apenas multiloja): todas as lojas ou apenas uma.

### As três localizações

- **Header (etiqueta head)**: estilos, etiquetas meta, etiquetas de verificação, script principal do GTM. Hook `displayHeader`.
- **Início do body**: logo após a abertura do body, para a parte noscript do GTM. Hook `displayAfterBodyOpeningTag`.
- **Fim do body**: logo antes do fecho do body, para os scripts de seguimento e de chat. Hook `displayBeforeBodyClosingTag`.

Se o seu tema não chamar os hooks de início ou fim do body, o módulo insere o código diretamente no HTML final da página, no mesmo sítio (hook `actionOutputHTMLBefore`). As três localizações funcionam portanto com qualquer tema, sem configuração.

### Segmentação por página

O campo **Segmentação** propõe três modos: **Todas as páginas**, **Apenas as páginas selecionadas** ou **Todas as páginas exceto as selecionadas**.

A lista **Páginas** contém 30 páginas PrestaShop: página inicial, categoria, página de produto, CMS, pesquisa, carrinho, checkout, confirmação de encomenda, início de sessão, a minha conta, histórico de encomendas, contacto, página 404, entre outras. O campo **Outras páginas** aceita outros nomes técnicos de páginas, separados por vírgulas. Para uma página de módulo, o formato é `module-nomedomodulo-controlador`.

Para saber o nome técnico de uma página, veja o seu código-fonte: no tema Classic e nos temas derivados, é o atributo `id` da etiqueta body.

### Modo de teste

Um snippet em modo de teste só é injetado para os endereços IP introduzidos no campo IP de manutenção da página **Manutenção** dos parâmetros da loja. São aceites intervalos no formato CIDR. Pode assim verificar uma etiqueta na loja online sem que nenhum visitante a receba e depois desativar o modo de teste para a publicar.

### Duplicar um snippet

O menu de cada linha da lista propõe **Duplicar**. A cópia é criada desativada e colocada em último: reveja-a antes de a ativar.

## Exemplos

### Google Tag Manager

O GTM precisa de dois snippets:

1. «GTM head», localização **Header**, com o primeiro script fornecido pela Google:

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

1. «GTM body», localização **Início do body**, com a parte noscript fornecida pela Google.

### Píxel de conversão

Localização **Fim do body**, segmentação **Apenas as páginas selecionadas**, página **Confirmação de encomenda**. O píxel só dispara depois de uma compra.

### CSS personalizado

Localização **Header**, com o CSS dentro de uma etiqueta style:

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

### Etiqueta de verificação

Para a Search Console ou uma rede social, localização **Header**:

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

## Multiloja

Com a multiloja ativada, o campo **Loja** permite apresentar um snippet em todas as lojas ou apenas numa. Numa instalação com uma única loja, o campo fica oculto e o snippet aplica-se a toda a loja.

## Resolução de problemas

- **O código não aparece**: verifique se o snippet está ativo, se o modo de teste está desativado (ou se o seu IP consta dos IP de manutenção) e se a página atual faz parte da segmentação.
- **Está instalado um módulo de cache de páginas**: limpe a cache dele após cada alteração de um snippet.
- **O snippet não aparece numa página de módulo**: verifique o nome técnico introduzido em **Outras páginas**, que deve corresponder exatamente ao da página.
- **Dois scripts são executados pela ordem errada**: ajuste o campo **Ordem**.

O código é injetado sem qualquer filtragem. Verifique a sintaxe (etiquetas bem fechadas) e use o modo de teste antes de o ativar numa loja em produção.