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é permite acrescentar código CSS, JavaScript ou HTML à sua loja PrestaShop sem modificar o mínimo ficheiro do tema. Tudo se gere a partir do back-office sob a forma de snippets: cada bloco de código tem o seu local, a sua segmentação de páginas, a sua ordem de injeção e o seu estado ativo ou inativo.

Casos de utilização típicos: Google Tag Manager, Google Analytics, Meta Pixel, etiquetas de verificação (Search Console, Pinterest…), estilos CSS personalizados, scripts de chat ou faixa de consentimento de cookies.

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 carregue o arquivo.
3. Clique em Configurar para abrir o gestor de snippets.

Criar um snippet

A partir do gestor, clique em Adicionar um snippet e preencha os campos abaixo.

Campos do formulário

• Nome: identificador interno do snippet (ex. « Google Tag Manager »).
• Local: o sítio onde o código é injetado (ver abaixo).
• Código: cole o seu código completo, etiquetas incluídas. É injetado tal como está, sem transformação nem purificação.
• Páginas visadas: deixe vazio para todas as páginas, ou selecione páginas precisas.
• Ordem de apresentação: os snippets de um mesmo local são injetados por ordem crescente.
• Ativo: ativa ou desativa o snippet sem o eliminar.

Os três locais

• Header (etiqueta head): para os estilos, etiquetas meta e etiquetas de verificação. Injetado através do hook displayHeader.
• Início do body: logo depois da abertura do body, para os contentores de marcação (ex. a parte noscript do GTM). Hook displayAfterBodyOpeningTag.
• Fim do body: logo antes do fecho do body, para os scripts de desempenho e de acompanhamento. Hook displayBeforeBodyClosingTag.

Segmentação por página

Cada snippet pode ser difundido em todo o lado (campo vazio) ou restrito a certas páginas: página inicial, ficha de produto, categoria, CMS, pesquisa, carrinho, funil de encomenda, etc. O módulo compara a página atual com o controlador front (php_self); se estiver preenchida uma lista e a página não fizer parte dela, o snippet não é injetado.

Exemplos

Google Tag Manager

O GTM coloca-se em duas partes. Crie dois snippets:

1. Snippet « GTM head »: local Header, cole 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 -->

2. Snippet « GTM body »: local Início do body, cole a parte noscript fornecida pela Google.

CSS personalizado

Local Header, envolva o seu CSS numa etiqueta style:

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

Etiqueta de verificação

Para a Search Console ou uma rede social, local Header:

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

Multiloja

Em contexto multiloja, cada snippet pode ser global (todas as lojas) ou reservado a uma loja precisa através do campo Loja. Em monoloja, este campo é ocultado e o snippet aplica-se à loja atual.

Compatibilidade de temas

Resolução de problemas

• O código não aparece: verifique que o snippet está ativo, que o local está correto e que a página atual faz parte das páginas visadas (ou que esse campo está vazio).
• Nada no início ou no fim do body: o seu tema provavelmente não chama os hooks correspondentes; use o local Header ou acrescente esses hooks ao tema.
• Conflito de ordem: ajuste o campo Ordem de apresentação para controlar a sequência de injeção.