Ei gente, tudo bem?!
Os últimos artigos escritos foram sobre como implementar o disparado do Google Tag Manager no ContactForm7.
Agora vou escrever uma coisa que me pediram muito no inbox! Que tal você descobrir que parte estão copiando do seu site?
Isso pode te dar vários insights importantes, o blog pode saber qual assunto está sendo compartilhado indiretamente ou qual assunto está chamando atenção, já no ecommerce podemos saber os produtos que as pessoas estão compartilhando/procurando.
Basicamente vamos “salvar” tudo que a pessoa der ctrl c no seu site e mandar ele como evento para o seu Google Analytics (prepara que vai aparecer textão lá).
Esse script é bem simples e rápido! Vamos começar?
1. Implementando a tag
Vamos implementar uma tag que será disparada em todas as páginas. Ela vai criar um “Evento” no Google Tag Manager. Esse evento vamos usar para disparar o evento.
Depois vamos em Criar Tag e HTML Personalizado.
Dentro da Tag coloque a seguinte tag:
<script>
// Declare function to get selected text from document
function getSelectionText() {
var text = ”;
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != ‘Control’) {
text = document.selection.createRange().text;
}
return text;
}// Declare function on copy event
document.addEventListener(‘copy’, function(e){
dataLayer.push({
‘event’: ‘textCopied’,
‘clipboardText’: getSelectionText(),
‘clipboardLength’: getSelectionText().length
});
});
</script>
Como disparador pode colocar a página que você quer que seja “rastreada”. Eu usei All pages pois quero em todas as páginas. Vai ficar assim:
Se você entrar em modo Debug você vai conseguir ver o evento sendo criado na lateral esquerda.
O texto que foi copiado foi enviado para o DataLayer.
Basicamente enviamos os dados para o DataLayer e agora vamos recuperar ele como variável. Essa variável vai ser enviado como evento para o Google Analytics.
Shooooww! E agora, como recupero ela?
2. Criando variável do DataLayer
Vamos lá! Entre em Variáveis e clique em Nova.
Quando você for criar a nova variável, você tem que selecionar Variável da Camada de Dados (dataLayer).
Nele você pode escrever “clipboardText”, que é o nome do nosso dataLayer (tem a ilustração ali em cima). A variável vai ficar assim. (note o nome que dei pra ela também, vamos usar ele pra buscar a variável)
3. Criando disparador
Já temos o script que cria o evento e me diz que alguém copiou, já temos a variável e só falta o disparado e a tag do Google Analytics. Vamos com o disparador primeiro, ok?
Vá em Acionadores e coloque para criar um Novo.
Vamos usar o “Evento Personalizado”, pois o evento que criamos (textCopied) precisa ser nosso disparador.
Coloque como nome do evento o “textCopied”. Ele vai sinalizar que sempre que o “textCopied” aparecer, a tag selecionada vai ser disparada.
uffa! Abraços pra tu que já chegou até aqui, nem todo mundo aguenta textão hehehe.
4. Criando a Tag de Evento do Google Analytics
Vamos agora criar a tag que envia a variável para o seu Google Analytics.
Vá em Tags e crie uma Nova (já ensinei isso hoje em). Vamos usar o template do Google Analytics – Universal Analytics.
Nele você vai usar Evento em vez de Visualização de Página e fazer a seguinte configuração:
Categoria: Texto
Ação: Copiado
Rótulo: Coloque a variável que criamos, no caso é a {{ClipboardText}}
Configuração do Google Analytics você vai usar o seu código do Google Analytics.
E depois disso colocamos o disparador que criamos agora pouco! Vai ficar assim:
Só testar agora e ver se funciona. Quando copiar algo ele precisa Disparar a Tag e enviar o Evento no Google Analytics.
Quando eu copiei o trecho ele disparou o eventlistener textCopied que fez a tag GA_Envio_Texto_Copiado ser disparado e mandou o evento para o Google Analytics.
Deu certo!!! Viu como é simples?
Se tu gostou do artigo, só comentar e deixar um curtir (momento blogueiro).
Tem alguma dúvida em Google Tag Manager? Manda ai que eu tento resolver com você.
Obrigado 🙂
