Transferir como PDF, PPTX
![Inserindo o
GTM através
de código
Através da action
wp_head que insere
códigos dentro da
tag <head> do HTML
se o template estiver
chamando a função
wp_head();
<?php
add_action( 'wp_head', 'insert_code_gtm' );
function insert_code_gtm() {
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gt
m.start':
new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''
;j.async=true;j.src='https://www.googletagmanager
.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j
,f);
})(window,document,'script','dataLayer'
,'GTM-WDTTTL7');
↙script>
?>](https://image.slidesharecdn.com/marketingeprogramacao-unirparaconquistar-171204144318/85/Marketing-e-programacao-unir-para-conquistar-6-320.jpg)
![DataLayer ou camada de dados
Uma camada de dados é um objeto que contém todas as informações que você
deseja passar para o Gerenciador de tags do Google.
Antes de chamar o GTM
<script>
dataLayer = [];
dataLayer = [{
'pageCategory': 'Signup',
'visitorType': 'value'
}];
↙script>
Depois de chamar o GTM
dataLayer.push( { 'event': 'event_name' } );](https://image.slidesharecdn.com/marketingeprogramacao-unirparaconquistar-171204144318/85/Marketing-e-programacao-unir-para-conquistar-12-320.jpg)
![Criando a função para adicionar ações ao dataLayer
Essa função JS serve recebe catetoria, evento e lavel e adiciona essas informações
ao objeto dataLayer
<script>
function add_event_in_datalayer( category, event, label ) {
data_layer.push = [{
'category': category,
'event': event,
'label': label
}];
}
↙script>](https://image.slidesharecdn.com/marketingeprogramacao-unirparaconquistar-171204144318/85/Marketing-e-programacao-unir-para-conquistar-19-320.jpg)
Carregado porLeo Baiano
Marketing e programação unir para conquistar
Leo Baiano é um desenvolvedor web com 17 anos de experiência e especialista em WordPress desde 2007. Sua palestra aborda como usar a ferramenta Google Tag Manager para implementar tags de forma dinâmica e gerenciar eventos do usuário, melhorando o marketing e a programação de sites WordPress. O GTM permite inserir tags de forma flexível através de uma interface sem necessidade de código, facilitando a manutenção e debug de tags.
Marketing e programação unir para conquistar
- 1. Leo Baiano Desenvolvedor webhá 17 anos, trabalha com WordPress desde 2007. Atualmente é Programador Senior na empresa Master Juris. https://profiles.wordpress.org/leobaiano/ https://github.com/leobaiano/
- 2. Marketing e programação: unirpara conquistar Leo Baiano
- 3. O que veremosnessa palestra ● O que é e porque usar o GTM ● Como implementar o GTM no seu site WordPress ● Tags GTM ● Variáveis GTM ● Acionadores GTM ● Datalayer ● Eventos GTM ● Debugando tags ● Mapeando as ações do usuário com Google Events ● Retorno do investimento com Google Adwords
- 4. Inserindo tags diretamente ● Manutenção complexa ● Inserçãoexige desenvolvedor ● Debug rústico
- 5. Diante destes problemassurge o GTM GTM - Google Tag Manager, um gerenciador de tags que salva o seu dia
- 6. Inserindo o GTM através decódigo Através da action wp_head que insere códigos dentro da tag <head> do HTML se o template estiver chamando a função wp_head(); <?php add_action( 'wp_head', 'insert_code_gtm' ); function insert_code_gtm() { <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gt m.start': new Date().getTime(),event:'gtm.js'}); var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'' ;j.async=true;j.src='https://www.googletagmanager .com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j ,f); })(window,document,'script','dataLayer' ,'GTM-WDTTTL7'); ↙script> ?>
- 7. Começando a entendero GTM https://www.google.com/intl/pt-BR/tagmanager/
- 9.
- 10.
- 11.
- 12. DataLayer ou camadade dados Uma camada de dados é um objeto que contém todas as informações que você deseja passar para o Gerenciador de tags do Google. Antes de chamar o GTM <script> dataLayer = []; dataLayer = [{ 'pageCategory': 'Signup', 'visitorType': 'value' }]; ↙script> Depois de chamar o GTM dataLayer.push( { 'event': 'event_name' } );
- 13. Variáveis e a camadade dados
- 14. Variáveis e acamada de dados
- 15.
- 16. Eventos GTM Utilizando eventno dataLayer para criar acionadores dinâmicos
- 18. Mapeando as açõesdo usuário através do Google Analytics Eventos Conheça bem seu visitante e melhore a estratégia do seu site
- 19. Criando a funçãopara adicionar ações ao dataLayer Essa função JS serve recebe catetoria, evento e lavel e adiciona essas informações ao objeto dataLayer <script> function add_event_in_datalayer( category, event, label ) { data_layer.push = [{ 'category': category, 'event': event, 'label': label }]; } ↙script>
- 20. Adicionando eventos asações Você pode mapear qualquer ação do usuário, seja clique em CTA, player em vídeo, envio de formulário... <a href="<?php home_url( 'checkout' ); ?>" title="Assine já" onclick="add_event_in_datalayer( 'Minha categoria', 'click', 'CTA do banner de destaque' )">Assine já↙a>
- 21.
- 22.
- 23.