Como instalar o código do Google Tag Manager no WordPress sem plugins

Facebook Linkedin Instagram Pinterest

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.

Jorge Rodrigues

Webmaster e desenvolvedor web full-stack. Self-employed na Concepção Web. Técnico em processamento de dados, com especialização em Programação de Computadores, Redes Locais e em Protocolo e Cabeamento Estruturada de Redes Locais pela Universidade Estácio de Sá.

More Posts

Olá, antes de continuar, precisamos que você forneça algumas informações.

Desenvolvido por Concepção Web.