Vamos ver como instalar o GTM – Google Tag Manager em um site WordPress da forma correta, seguindo os padrões de projeto do WordPress. Também vamos ver como utilizar hooks e actions para realizar esta tarefa.
Vamos conhecer o hook wp_body_open, implementado no versão 5.2 do WordPress e também como criar nosso próprio hook wp_body_open nos sites com versão anteriores.
O que veremos neste artigo:
O que é Google Tag Manager
Google Tag Manager é uma ferramenta gratuita do Google que permite instalar diversos serviços do Google como Adsense, Analytics, Ads etc., sem precisar mexer no código fonte do site. Com o GTM (Google Tag Manager), só é preciso mexer uma única vez no código fonte do site para incluir o código do Google Tag Manager fornecido pelo Google.
Depois que o TGM estiver instalado no site, não será mais necessário editar o código fonte do site para instalar outros serviços do Google, esta tarefa poderá ser realizada no TGM. Ao centralizar a gestão de códigos no Google Tag Manager, o marketing ganha autonomia e melhora a produtividade.
Instalação do Google Tag Manager
Para instalar o Google Tag Manager no site, é necessária a inclusão de dois blocos de código fornecidos pelo Google, um dentro do tag head do site e outro logo após a abertura do tag body.
Para sites que não utilizam plataformas como o WordPress, por exemplo, basta editar os arquivos das páginas do site e incluir os blocos nos locais exigidos pelo Google.
Porém no WordPress, esta tarefa é um pouco mais complicada já que os padrões de projeto do WordPress precisam ser seguidos para que a funcionalidade do site não seja prejudicada.
É claro que podemos simplesmente editar o arquivo header.php e o arquivo responsável pela construção das páginas do tema (index.php, page.php, single.php, etc.) e inserir os códigos do Google Tag Manager. Entretanto, neste arquigo vamos ver como incluir os códigos do Google Tag Manager com a utilização de Hooks e Actions do WordPress.
Basicamente o que vamos fazer é editar o arquivo functions.php do tema utilizado no site para declarar algumas funções e depois chamá-las através de Actions.
Adicionando o Javascript do Google Tag Manager no head
A primeira coisa que vamos fazer é incluir o bloco que deve ser incluído dentro do tag head das páginas. Este é um código em Javascript que possibilita ao Google Tag Manager administrar as tags do Google no site.
Como dito, para isso vamos editar o arquivo functions.php e criar uma função chamada GTagManagerOnHead e depois chamá-la através da Action wp_head do WordPress.
A função simplesmente escreve o código do Google Tag Manager dentro da tag head das páginas do site. Nada de misterioso e simples de implementar. Então abra arquivo functions.php para edição e no final inclua a função e a chamada à action wp_head com abaixo.
<?php
**
* Google Tag Manager no head
*/
function GTagManagerOnHead() {
echo "
[CÓDIGO DO HEAD ENTRA AQUI]
";
}
add_action('wp_head','GTagManagerOnHead', 20);
?>
Entre as aspas do comando echo, você deve incluir o código do Google Tag Manager que deve ser incluído no head das páginas do site.
Conforme foi dito acima, não tem mistério até agora. Só foi preciso criar uma função e chamá-la em uma action. A seguir vamos ver como incluir o outro bloco de código que deve entrar logo após a abertura do tab body.
Como adicionar código após a tag do corpo no WordPress
O próximo passo é a inclusão do segundo bloco de código do Google Tag Manager após a abertura da tag body. Este código só será executado no caso da execução de Javascript estar desabilitada no navegador e para isso, precisamos incluir este código dentro da tag body das páginas do site. Vamos editar mais uma vez o arquivo functions.php para incluir mais uma função chamada GTagManagerOnBody e executá-la através de uma action.
O hook wp_body_open
A partir da versão 5.2 do WordPress, foi implementado o hook wp_body_open. Este hook é disparado logo após a abertura do tab body e com ele é possível incluir conteúdo no tag body dos sites WordPress. Vamos utilizar este hook na chamada a uma action para executar nossa função GTagManagerOnBody e inserir o código do Google Tag Manager dentro do body das páginas do site. Então, no functions.php vamos incluir o seguinte código:
<?php
/**
* Google Tag Manager no body
*/
function GTagManagerOnBody() {
echo '
[CÓDIGO DO BODY ENTRA AQUI]
';
}
add_action( 'wp_body_open', 'GTagManagerOnBody', 20 );
?>
Aqui mais uma vez, devemos incluir o bloco de código do Google Tag Manager que deve ficar após o tag body, entre as aspas do comando echo. Observe que diferentemente da função GTagManagerOnHead, usamos aspas simples para conter o código do TGM.
Versões do WordPress anteriores a 5.2.0 – Criando o nosso próprio hook wp_body_open
Se o site for antigo e usar uma versão anterior do WordPress e não for possível atualizar a versão, podemos criar nosso próprio hook wp_body_open.
Executando os passos a seguir, teremos o nosso hook wp_body_open funcionando no WordPress mesmo que o site utilize uma versão do WordPress anterior à 5.2.0.
Uma observação importante. É recomendado que antes de prosseguir, você crie um tema filho do tema que é utilizado pelo site adicionando o arquivo header.php. Desta forma, no caso de uma atualização do tema, as alterações no arquivo não serão perdidas.
Passo 1 – No arquivo header.php do tema (ou do tema filho) utilizado no site WordPress, incluir logo após a abertura da tag body a chamada à função do hook. A função pode ter qualquer nome, inclusive o mesmo nome wp_body_open do hook implementado na versão 5.2.0.
<?php wp_body_open(); ?>
Passo 2 – Depois de incluir a chamada à função no arquivo header.php do tema, vamos declarar a função no arquivo functions.php.
<?php
/**
* Hook para incluir conteúdo após tag body
*/
function wp_body_open() {
do_action('wp_body_open');
}
?>
3. Com o hook criado, podemos usá-lo em uma action quantas vezes forem necessárias para incluir conteúdo após o tab body do site WordPress, inclusive para chamar a nossa função ‘GTagManagerOnBody’ criada acima.
Para usar o nosso hook wp_body_open, basta criar a função que será executada pela Action e depois chamá-la com add_action( ‘wp_body_open’, ‘[NOMEDAFUNÇÃO]’ ).
<?php
/**
* Exemplo com inclusão de texto no body.
*/
function testeHook() {
echo '<p>Conteúdo incluído com o hook wp_body_open !!!</p>';
}
add_action( 'wp_body_open', 'testeHook' );
?>
O hook também pode ser utilizado para incluir código Javascript dentro do body. No exemplo abaixo, criamos uma nova função e dentro do corpo da função usamos os tags que limitam o código PHP fechando o código, incluindo o bloco Javascript e depois abrindo novamente o PHP.
<?php
/**
* Exemplo de inclusão de código Javascript.
*/
function testeHook2() {
?>
<script>
alert("Exemplo de inclusão de código com o hook wp_body_open");
</script>
<?php
}
add_action( 'wp_body_open', 'testeHook2' );
?>
Neste artigo vimos como implementar o Google Tag Manager em um site WordPress utilizando um método que não altera os arquivos do tema utilizado mas somente o arquivo functions.php, o que é mais recomendado, e ao mesmo tempo aprendemos a utilizar hooks e actions. Também aprendemos a criar nossos próprios hooks para tornar nossa programação mais adequada ao padrão de projeto do WordPress.
Espero que o artigo seja útil e não deixe de seguir as nossas redes sociais para se manter informado sobre novos artigos. Até a próxima.
