No final de janeiro, Simo Ahava publicou em seu blog uma revisão sobre a possibilidade de usar tags HTML personalizadas no Gerenciador de tags do Google. As tags HTML personalizadas oferecem ampla oportunidade para alterar o conteúdo do site, mas você precisa ter muito cuidado - os recursos da tag e seu processamento apresentam grandes riscos. O analista do MediaGuru Timur Ledenyov traduziu esta resenha útil para você.Por algum tempo (desde o final de 2012), uma das opções mais importantes do GTM foi a tag HTML personalizada. Essa ferramenta mágica permite que o GTM adicione um elemento HTML a uma página do site. Desde 2012, o Gerenciador de tags do Google evoluiu de um ambiente isolado com modelos de tags personalizados para uma solução ilimitada de gerenciamento de conteúdo do lado do cliente.No artigo, consideraremos os princípios da tag HTML personalizada e as possibilidades de sua aplicação.Preenchimento personalizado de tags HTML
Como o nome indica, a tag HTML personalizada permite que você coloque elementos HTML na página do site. Vamos criá-lo:
<script>
console.log('Hello!');
</script>
<div>
<span>Hello!</span>
</div>
Essa tag adiciona três elementos à página:<script>, que é compilado e executado em JavaScript;- bloco
div; <span>incluído em <div>
Quando você publica um contêiner e olha para a fonte minimizada do contêiner JavaScript, ele se parece com isso:
sua tag lindamente formada fica assim porque o HTML é codificado e é uma etapa inteligente antes de definir as strings como elementos HTML.Os sinalizadores enableIframeMode e enableEditJsMacroBehavior são os recursos antigos que não são mais visíveis na interface do usuário. Você pode torná-los visíveis na interface da tag HTML personalizada, se souber. Mas isso não afetará nada.Então, você criou uma tag HTML personalizada e viu como ela é adicionada ao contêiner. Mas o que acontece então na página e onde exatamente?Injeção
Quando a tag HTML personalizada é acionada no Gerenciador de tags do Google, o seguinte mecanismo é iniciado:- É criado um manequim
<div>, ao qual, usando o atributo .innerHTML, uma sequência codificada é adicionada representando sua tag HTML personalizada. - Isso força o navegador a tratar a string codificada como HTML, para que as tags adicionadas ao HTML personalizado sejam convertidas em elementos HTML.
- Um por um, esses elementos são removidos
<div>e prosseguem para a injeção. - Cada elemento é adicionado como o último elemento filho document.body.
Existem algumas nuances nesse processo:- Como o Gerenciador de tags do Google interage com onHtmlSuccess e onHtmlFailure na fila
- como os elementos
<script>são limpos de todos os atributos do usuário antes da injeção.
O que isso significa? Tudo o que você digita na tag HTML Customizado é adicionado ao final do corpo, independentemente do que estava no momento da injeção. Geralmente eles significam rodapé da página, mas isso não é necessário, dados os layouts de página modernos.
Importante: ao adicionar um novo elemento à página, você começa a reorganizar o conteúdo. Normalmente, o navegador deve recalcular os tamanhos, posicionamento, layout e atributos dos elementos; precedente, circundante ou aninhado dentro de um elemento incorporado.Não é tão fácil. Cada item que você adiciona agrava o problema. E em aplicativos de página única, que podem não redefinir o DOM entre transições, é possível observar centenas desses elementos em uma página, cada um dos quais piora o desempenho cada vez mais. Voltaremos a isso em conclusão, mas antes da conclusão direi:Evite usar tags HTML personalizadas sem uma necessidade óbvia.Admito que esse aviso não seja isento de ironia.Scripts de script HTML personalizados
Por que usar essas tags e aplicar uma solução de gerenciamento de tags para injetar um elemento? Uma excelente pergunta para a qual não tenho uma resposta rápida e definitiva.Posso dizer que um grande número de HTML personalizado no contêiner pode falar sobre uma das seguintes situações:- Você se depara com um caso muito complicado para o qual as tags GTM padrão ou modelos personalizados não são adequados.
- Você é novo no GTM (ou JavaScript) e não entende que qualquer uma das suas tags HTML personalizadas pode ser substituída por tags padrão ou modelos personalizados.
- , -, .
- , - .
- , Google Tag Manager, .
Este é o seu contêiner e, é claro, você tem o direito de usá-lo como achar melhor. Mas se os cenários 2 e 3 aparecerem, recomendo fortemente que você faça alterações no status quo. Ignorar a complexidade do GTM e do JavaScript pode interferir nos efeitos positivos que essas tecnologias abrem. Trabalhar contrariamente às restrições estabelecidas em sua empresa a longo prazo também causará discordâncias e levará a interrupções na comunicação, um site terrível e armazenamento não confiável de informações.Vejamos alguns cenários em que você provavelmente deseja experimentar tags HTML personalizadas.Adicionando um item a um local específico na página
A desvantagem da tag HTML personalizada é que ela incorpora o elemento no final <body>. Pelo que? Se o elemento for um componente visual (ou seja, ele deve ser exibido na tela), é mais provável que o final <body>não seja o local onde você gostaria de vê-lo. Para contornar isso, você precisa usar JavaScript e seus métodos de manipulação de DOM.O truque é encontrar algum elemento que já esteja na página e colocar um novo elemento em relação a ele.Por exemplo, eu quero adicionar uma pequena sub-rubrica para a página para torná-lo parecido com este:
Agora, se você criar um HTML personalizado da seguinte forma: <h3> It's really cool - I promise!</h3>, o elemento é adicionado ao final <body>e não vai olhar muito bom.Então, ao invés, eu precisoCrie um novo elemento usando JavaScript e, em seguida, posicione-o em relação ao título da página.<script>
(function() {
var h3 = document.createElement('h3');
h3.innerText = "It's really cool - I promise!";
var title = document.querySelector('h1');
if (title) {
title.parentElement.insertBefore(h3, title.nextSibling);
}
})();
</script>
O resultado final que você vê na imagem acima.Isso é uma ironia sutil - você usa HTML personalizado para criar um elemento ( <script>) que criará outro elemento ( <h3>). Sim, seria ótimo se você pudesse definir no HTML personalizado onde o elemento estará localizado. De fato, seria ainda mais interessante se houvesse um modelo personalizado que permita criar um elemento com a capacidade de selecionar um local para o elemento. Portanto, você não precisa injetar o script no final do código! Mas nós estávamos distraídos.Colocar o script o <head>mais alto possível
Isso se deve em parte ao cenário anterior, mas merece atenção especial, dependendo da frequência com que essa situação ocorre. Às vezes, você é perguntado: "Coloque o script o quanto antes <head>".Portanto, você precisa que o script seja executado na página o mais cedo possível. Quanto mais alto o elemento <head>, mais rápido o navegador o processará como parte da página exibida.Mas essa vantagem é perdida ao usar o Gerenciador de tags do Google. Normalmente, quando a biblioteca GTM é carregada, o processamento <head>já foi encerrado e o navegador é renderizado com poder e principal <body>. Por isso, tentar adicionar um script o <head>mais alto possível não faz sentido e, na verdade, prejudica apenas o resultado final.Por quê? Quando você cria o HTML personalizado, ele forma um elemento e o incorpora<head>. Primeiro, o navegador precisa adicionar HTML personalizado (ocorrência de desempenho), depois criar um novo elemento (outra ocorrência de desempenho) e finalmente adicionar um novo elemento a <head>(ocorrência de desempenho).
Em vez disso, você precisa adicionar <script>HTML diretamente ao Personalizado. Com esse método, ele será adicionado ao final <body>e o navegador o executará o mais rápido possível.Download de código JavaScript de terceiros
Vamos continuar o experimento do cenário anterior. Suponha que você tenha um desenvolvedor de terceiros cujo código JavaScript você deseja enviar para o site. E você percebeu que só precisa adicionar um elemento <script>à página usando HTML personalizado.Nesse caso, você não precisa usar HTML personalizado.Em vez disso, crie um modelo personalizado que use a API injectScript para carregar a biblioteca.Os modelos personalizados são otimizados para injeção e carregamento de JavaScript e oferecem um modelo de permissão e política para uma injeção segura (mais segura).
No futuro, essa será a melhor maneira de implementar<script>. Isso não o ajudará com outros scripts, pois o conjunto padrão de modelos JavaScript é bastante limitado. Portanto, se você deseja adicionar, por exemplo, um ouvinte de evento personalizado, precisará de uma tag HTML personalizada.Alterar ux
Uma das coisas que você deseja fazer com o HTML personalizado é modificar o UX (experiência do usuário). Para fazer isso, você pode usar algo como um banner de cookie, é possível alterar os estilos na página ou adicioná-lo <iframe>, o que carrega algum widget conveniente para o seu site de comércio eletrônico.Gostaria de alertá-lo sobre os riscos envolvidos em fazer tudo isso com o Gerenciador de tags do Google.- (, Brave) / GTM. ( , ).
- / , . , HTML . Google Tag Manager , , , . querySelector() , – - .
- Adicionado a tudo isso, estão os motivos relacionados ao desempenho que mencionei acima. Adicionar cada elemento dinâmico em ordem crescente prejudicará o desempenho da página, o que levará a coisas irritantes: seus elementos personalizados começarão a aparecer e desaparecer; a qualidade dos dados se deteriorará (quando o iframe, que você altera dinamicamente, tiver tempo antes de fazer alterações) até atrasos e congelamentos de páginas, especialmente em sites de página única.
Portanto, não considere o uso do Gerenciador de tags do Google como um sistema de gerenciamento de conteúdo.achados
Esta foi uma breve visão geral dos recursos das tags HTML personalizadas.Se eu pudesse falar comigo em 2012, aconselho-me a considerar as deficiências das tags HTML personalizadas o mais cedo possível e parar de criar ilusões sobre as infinitas possibilidades do Gerenciador de tags do Google para adicionar scripts. Mas, antes, pensar de uma maneira complexa - sobre a organização, sobre o site como um todo e sobre o contexto do ambiente em que o GTM trabalha - antes de tomar decisões arriscadas.No entanto, existem aplicativos para HTML personalizado hoje. Criar um ouvinte de clique usando a tag HTML personalizada (document.addEventListener ()) pode se mostrar mais vantajoso do que executar algum tipo de código personalizado usando gatilhos GTM.
Isso ocorre porque o acionador de clique executará a tag repetidamente (injetando-a repetidamente) toda vez que for acionada. Se você criar seu ouvinte de clique em uma tag HTML personalizada e processar uma tarefa repetitiva com ela, evitará confusão durante a implementação.Também garanto vigorosamente a conveniência do HTML personalizado em apoiar hipóteses. Você pode experimentar rapidamente um novo design ou funcionalidade postando alterações em uma amostra específica de visitantes. Se os resultados forem satisfatórios, será possível propor essas alterações para inclusão no código principal do site.No entanto, espero que um dia os modelos personalizados substituam as tags HTML personalizadas.Como uma palavra de despedida para quem usa tags HTML personalizadas, especialmente para quem deseja adicionar código encontrado na rede, o famoso provérbio russo é útil:Confie, mas verifique.Se você não sabe o que o código está fazendo, consulte um desenvolvedor da Web familiar.