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

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.

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

2. «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.