No final de maio, o Google introduziu um novo recurso no Gerenciador de tags do Google (GTM): modelos personalizados ou modelos personalizados. Vamos ver por que é necessário, como usá-lo, quais são as diferenças entre tags HTML e variáveis JavaScript.
Como exemplo, considere criar um modelo personalizado para um pixel de redirecionamento dinâmico do VKontakte e personalizar ainda mais as tags GTM por meio dele.
Palavras simples sobre modelos personalizadosCriando um modelo personalizado• guia Informações• guia Campos• guia Código• guia PermissõesPersonalização e teste da tag no modelo personalizado criado• Visualização de página• AddToCart• teste de mineraçãoConclusãoPalavras simples sobre modelos personalizados
Modelos personalizados são modelos pelos quais os usuários podem criar novas tags ou variáveis. O GTM possui modelos prontos (na seção Em destaque ou Recomendado), por exemplo, a tag do Google Analytics, o Google Optimize e outros. Agora podemos complementá-los com nossos modelos. Depois de criados, eles aparecerão na guia Personalizado:
A principal diferença das tags HTML e variáveis JS é que, quando um usuário cria uma tag ou variável usando um modelo pronto, ele não interage com o código JS.
O código para o modelo do usuário é escrito pelo desenvolvedor ou analista da Web no estágio de sua criação. Em seguida, ao criar uma tag ou variável de acordo com um modelo de usuário, toda a interação é realizada através da interface (que também é configurada ao criar um modelo de usuário):
Assim, em comparação com a gravação de uma tag HTML ou de uma variável JS, personalizar uma tag ou variável de acordo com um modelo de usuário se torna uma ordem de magnitude mais fácil, pois isso não requer conhecimentos e habilidades para trabalhar com JavaScript.
Outra grande vantagem dos modelos personalizados é que a probabilidade de "colocar" um site é reduzida em uma ordem de magnitude devido a um erro no código JS da tag.
Em nosso exemplo, para configurar a tag de redirecionamento dinâmico "VKontakte", você não precisa mais entrar em contato com os desenvolvedores - tudo pode ser configurado de forma independente, até a transferência de dados sobre mercadorias (com o comércio eletrônico avançado do Google configurado no site), tendo apenas experiência com o GTM.
Criando um modelo personalizado
Como estamos criando um modelo de tag, precisamos ir para a seção Modelos e clicar no botão Novo na seção Modelos de tags.
Depois disso, o Editor de modelos é aberto:
No lado esquerdo do editor, há uma janela de configurações, no lado direito, uma janela de visualização e um console. Existem quatro guias na janela de configurações necessárias para criar e trabalhar com o modelo.
Guia Informações
As informações na tag são preenchidas nesta guia: nome, descrição, ícone. Estas são as informações que veremos ao criar uma nova tag na lista de modelos:
Existem requisitos para o ícone de tag: formato PNG, JPEG ou GIF, uma resolução de pelo menos 64x64 pixels e um tamanho não superior a 50 KB.
Guia Campos
Esta seção cria a interface do nosso modelo. A interface consiste em vários campos e formulários com os quais o usuário interage no estágio de criação de uma nova tag ou variável.
No futuro, as informações que o usuário inseriu ao criar a tag usando a interface são usadas no código do modelo.
Para adicionar um novo elemento, clique no botão Adicionar campo. A janela para selecionar o tipo de elemento é exibida:
O GTM permite selecionar os seguintes tipos de elementos de interface:
- caixa de texto
- menu suspenso
- caixa de seleção ;
- interruptores
- tabela simples , aqui você pode editar cada célula.
- tabela estendida , você pode editar apenas uma linha; esse tipo de tabela é conveniente para criar um dicionário a partir de pares de valores-chave;
- grupo de elementos , permite agrupar vários tipos em um grupo;
- o atalho é usado para adicionar texto à interface e não requer que o usuário insira nenhum dado.
Depois de adicionar um elemento, você precisa atribuir um nome amigável, que será usado no código. Esse é um tipo de nome de variável - deve ser compreensível e revelar a essência do elemento de interface criado. Por exemplo, o nome "ID" não significa nada específico, mas o nome "pixelIDs" já mostra que os IDs de pixel inseridos pelo usuário são armazenados neste elemento:
Em seguida, vá para as configurações de cada elemento e ative as propriedades necessárias.
Em situações diferentes, são necessárias propriedades diferentes do elemento da interface; portanto, por padrão, elas estão todas ocultas e precisamos ativar as que são necessárias agora:
Para diferentes tipos de elementos, as propriedades disponíveis diferem, indicarei os mais usados, que são quase todos os elementos:
1. Nome para exibição . Este é o nome que o usuário verá na interface ao criar a tag:
2. Exemplo de valor . Esta é uma dica para o usuário sobre quais valores inserir no campo:
3. Texto de ajuda . Este é o texto que o usuário verá se passar o mouse sobre o ícone de ajuda do elemento:
4. Regras para verificação de dados . Nesta propriedade, você pode definir determinadas regras para verificar os dados inseridos pelo usuário no campo e, se necessário, o texto de erro que aparece quando você tenta salvar uma tag com dados que não passaram no teste.
Por exemplo, você pode especificar que o campo deve ser preenchido. O segundo exemplo: você precisa obter um endereço de email do usuário e verificar se os dados inseridos pelo usuário devem corresponder à expressão regular
. * @. * \ .. * .
Para especificar o texto do erro que aparece se os dados inseridos não cumprirem as regras de verificação, é necessário ativar as configurações avançadas da regra:
Além disso, nas configurações avançadas, você pode especificar as condições sob as quais essa regra é ativada (o campo Ativar Condição).
5. Termos de inclusão . Essas são as condições sob as quais o usuário terá esse elemento de interface.
Por exemplo, para não sobrecarregar o modelo com elementos da interface, você pode fazer a aparência dos elementos necessários quando a caixa de seleção está marcada. Ou seja, suponha que, se um usuário deseja configurar a transferência de dados do produto em um pixel (isso é possível com o site avançado de comércio eletrônico do Google configurado no site), ele seleciona a caixa de seleção "Usar o DataLayer para transferir dados do produto" e, depois de marcar a caixa, os elementos aparecem na interface da tag necessário para configurar essa transferência. Se a caixa não estiver marcada, não há elementos na interface.
Observo que aqui é necessário indicar o nome do elemento, que deve ser atribuído a ele imediatamente após a adição.
À medida que você adiciona configurações e cria uma interface, todas as alterações podem ser visualizadas e testadas imediatamente na janela de visualização:
Guia Código
Essa guia é um editor de código.
O código de modelos personalizados do GTM é gravado no JavaScript ES6 "simplificado" e executado em um ambiente isolado onde toda a comunicação com dados globais (ou seja, diretamente com a página) é feita por meio da API. Não há objetos globais, como janela ou documento, respectivamente, os métodos usuais. Por exemplo, construtores (novo Objeto e similares), setTimeout, parseInt, delete etc. - tudo isso não funcionará no modelo personalizado.
Mas há uma API para tudo isso. E, portanto, a criação de código para o modelo personalizado deve começar com o fato de definirmos as APIs que usaremos em nosso código:
Consulte a
Ajuda do desenvolvedor do
Google para obter uma lista completa de APIs com documentação detalhada.
Vou mostrar exemplos de como trabalhar com a API:
Como você pode ver na tabela de exemplo, após definir a API, você deve usá-la em vez das construções JS padrão.
Após definir a API, é desejável definir um objeto com as configurações inseridas pelo usuário. Isso também pode ser feito após, por exemplo, durante o código executável, solicitar os dados necessários das configurações do usuário. Mas se definirmos o objeto de configurações desde o início, o trabalho com o código se tornará mais fácil e compreensível, pois todas as configurações do usuário são armazenadas em um objeto separado.
Para obter dados de um elemento da interface, você deve usar a construção de dados.
{{nome do elemento}}:
Nota: se você passar indefinido para o método makeTableMap, isso causará um erro de script; portanto, utilizo uma construção com um operador ternário (um registro abreviado da construção if-else) para filtrar esses scripts.
Sobre o método makeTableMap.Se a interface usar uma tabela estendida, os dados nela serão armazenados neste formato:
[ 'key': 'k1', 'value': 'v1'}, 'key': 'k2', 'value': 'v2'} ]
Após o processamento com o método makeTableMap, os dados se tornam um objeto regular com pares de valores-chave:
{ 'k1': 'v1', 'k2': 'v2' }
Outro requisito para o código de modelo personalizado: se a tag for executada com êxito, você deverá chamar o método data.gtmOnSuccess () e, em caso de erro, chamar o método data.gtmOnFailure ().
Por exemplo, no meu código, o método data.gtmOnSuccess () é chamado após o envio da solicitação com êxito e o método data.gtmOnFailure () é chamado se o download falhar na página de script externa VK openapi.js.
Depois de definir a API e definir o objeto com as configurações, você pode começar a escrever um algoritmo para calcular o pixel.
A principal coisa a lembrar aqui é:
• Se você precisar obter uma variável global - use o método da API copyFromWindow.
copyFromWindow('VK');
• Se você precisar definir uma variável global, usamos o método da API setInWindow.
setInWindow('openapiInject', 1);
• Se você precisar executar uma função global, usamos o método da API callInWindow.
callInWindow('VK.Retargeting.Init', p);
• Se você precisar adicionar um script externo à página - use o método da API injectScript.
injectScript('https://vk.com/js/api/openapi.js?159', pixel.setVkAsyncInit(), data.gtmOnFailure, 'vkPixel');
• Se você precisar obter o URL (ou parte dele) - use o método da API getUrl.
getUrl('host');
Como escrevi acima, o Custom Template suporta JS ES6. É aconselhável usar essa sintaxe, pois ela reduz o código e o torna mais legível, e o trabalho do JS é mais previsível e semelhante a outras linguagens de programação.
Mais sobre sintaxe JS ES6A principal coisa que é desejável usar é as funções de seta e as declarações de const e deixar variáveis em vez de var.
Uma variável declarada via const é uma constante cujo valor não pode ser alterado.
Uma variável declarada através de let difere de uma variável declarada através de var da seguinte maneira:
- let não é adicionado ao objeto de janela global;
- a visibilidade é limitada ao bloco de declaração;
- variáveis declaradas via let não podem ser declaradas novamente.
As funções de seta são uma abreviação das funções usuais:
Agora que entendemos como usar a API de modelo personalizado, podemos escrever o código de operação da tag usando a sintaxe JavaScript ES6.
Meu código contém métodos para iniciar um pixel, instalar o VK openapi.js, recuperar dados do produto do dataLayer (com o site de comércio eletrônico avançado do Google configurado), processar esses dados para trazê-los para o formato necessário para o envio ao pixel de redirecionamento do VKontakte e o método de envio de eventos.
O método de acionamento de pixel suporta três cenários:
- O pixel é executado em uma página em que o openapi.js está ausente.
- O pixel é executado na página em que existe o openapi.js, mas ainda não foi carregado.
- O pixel é iniciado na página com o openapi.js carregado.
O código completo do meu modelo GTM personalizado para o pixel de redirecionamento dinâmico VKontakte Guia Permissões
Depois de escrever o código da tag, o estágio final permanece - para emitir permissões para interagir com os dados globais da página. Isso é feito apenas na guia Permissões.
Como o código é executado em um ambiente isolado e a interação com dados globais ocorre por meio da API, para cada método da API (quando necessário), precisamos especificar manualmente as permissões para determinadas ações.
Isso é feito para abordar o trabalho com os dados da página global da maneira mais cuidadosa possível e, assim, minimizar as chances de "colocar" o site em erro no código do nosso modelo.
Para os métodos de API usados no meu código, três tipos de permissões devem ser emitidos:
1. Acessa variáveis globais - leia, escreva, execute o acesso a variáveis globais usadas em nosso código. As variáveis devem ser adicionadas manualmente e, para cada uma delas, indicar o que permitimos fazer.
Por exemplo, a variável VK pode ser lida apenas, vkAsyncInit pode ser lida e redefinida e o método VK.Retargeting.Hit pode ser executado apenas.
2. Lê URL . Aqui você deve especificar quais partes da URL podem receber. Eu permito que qualquer parte do URL seja recebida:
Mas se desejar, você pode especificar qualquer específico:
3. Injeta scripts . Aqui é necessário registrar os endereços dos quais você pode baixar scripts externos. No meu código, apenas um script com o VK openapi.js é carregado, eu especifico seu endereço:
Isso é tudo, a configuração do modelo personalizado está concluída, você pode salvar o modelo e prosseguir para o teste.
Personalização e teste da tag no modelo personalizado criado
Como exemplo, criaremos duas tags de redirecionamento dinâmico “VKontakte” usando o modelo personalizado criado: visualização de página e addToCart.
Visualização de página
Iremos para o contêiner GTM necessário, criaremos uma nova tag, selecionaremos o tipo de tag VK Pixel na seção Personalizada:
Preencha o nome da tag, selecione o evento a ser rastreado, selecione Hit (esta é uma visualização de página padrão), no campo "ID do pixel", indique o ID dos dois pixels para os quais os dados serão enviados e defina o gatilho Todas as páginas:
Salve a tag criada.
AddToCart
Criar uma tag para um evento adicionando um produto ao carrinho será um pouco mais complicado do que uma tag Hit.
Primeiro, você precisa transferir as mercadorias que são adicionadas à cesta. Como escrevi acima, isso é possível com o comércio eletrônico avançado do Google configurado no site. Nesse caso, os dados do produto são obtidos do dataLayer.
Para fazer isso, precisamos criar a variável dataLayer no GTM, que armazenará o objeto de comércio eletrônico para o evento addToCart. As configurações variáveis são assim:
Em segundo lugar, você precisa criar um gatilho que ativará a tag quando o evento addToCart de comércio eletrônico ocorrer (o gatilho ativará a tag ao pressionar o dataLayer quando o evento addToCart ocorrer):
Depois de criar uma variável com um objeto de comércio eletrônico e um gatilho, você pode começar a criar a tag:
Em ordem:
- Como o evento rastreado, selecione Adicionar ao carrinho.
- Nós preenchemos o ID separado por vírgula de dois pixels para os quais os dados devem ser transferidos.
- Marque a caixa de seleção "Usar várias listas de preços": para Moscou e São Petersburgo, em nosso exemplo, é necessário usar diferentes listas de preços.
- Preencha a tabela com listas de preços.
- Marque a caixa de seleção "Usar comércio eletrônico para transferir produtos e parâmetros".
- No objeto de comércio eletrônico deste evento, especifique a variável criada anteriormente.
- Nós definimos o gatilho para o evento monitorado, neste caso - AddToCart.
- Salve.
Teste de mineração
Para verificar o funcionamento dos pixels do redirecionamento dinâmico no VKontakte, você precisa ativar o modo Visualizar no GTM, vá ao nosso site e abra a seção Rede no console do navegador e digite 'rtrg' no campo Filtro:
Depois disso, atualizamos a página e devemos ter duas solicitações - o evento Hit enviado em dois pixels:
Status 200 significa que as solicitações são enviadas e recebidas pelo servidor com sucesso.
Também na janela Preview GTM, vemos que nossa tag criada funcionou corretamente para o evento Page View.
Para verificar o evento Adicionar ao carrinho, adicione o produto ao carrinho e, no console, temos mais duas solicitações:
Na janela Visualizar GTM, vemos que a segunda tag funcionou com sucesso. Os dados do produto do dataLayer foram puxados e processados corretamente; a lista de preços correta também foi substituída.
Para o segundo host, a lista de preços também é substituída corretamente:
Tags para outros eventos são configuradas e verificadas da mesma maneira.
Conclusão
Modelos personalizados estão mudando o paradigma familiar do uso do GTM. Todo mundo está acostumado a tags HTML e variáveis JS, mas agora existe uma ótima alternativa.
Basta criar um modelo personalizado de alta qualidade uma vez e qualquer pessoa familiarizada com o GTM pode usá-lo.
Dada a capacidade de compartilhar os modelos criados, acho que eles devem ganhar popularidade entre os usuários.
Você pode
fazer o download do modelo de pixel de redirecionamento dinâmico
personalizado do VKontakte, que examinamos neste artigo.
Para importar um modelo, você precisa criar um novo modelo personalizado e selecionar Importar no menu:
Material preparado por mim para ppc.world