Posso acompanhar a palestra do canal com o GA4?
Bem-vindo! Sou Yoo Jun Hyuk, engenheiro de crescimento da Hudders, parceiro de marketing de crescimento.
O rastreamento de cliques é muito importante para fins de marketing e análise. Ele coleta informações como em qual elemento da página da web o usuário clicou, quando clicou e onde clicouVocê pode. E por isso Analise os padrões de comportamento do usuário, descubra quais elementos atraem mais cliques, quais elementos atraem mais atenção dos usuários, etc.Você pode.
Isso permite que você revise e melhore sua estratégia de marketing. por isso O rastreamento de cliques é um dos elementos essenciais para o funcionamento de uma página da web ou aplicativo.não ver. Enviar um evento quando um botão é clicado é simples, mas às vezes na prática aparece o seguinte problema.
Quero ver quantas pessoas clicam no canal talk no GA4, mas a implementação é não é possível.
Como o ícone do Channel Talk está claramente incorporado em nosso site, pensei em simplesmente clicar em um botão com o Gerenciador de tags do Google, mas na verdade não funciona. A razão pela qual é difícil implementar facilmente com o Gerenciador de tags do Google é o Shadow DOMPorque esse cara existe.
Em primeiro lugar, o que é o DOM?
Antes de conhecer o Shadow DOM, você deve primeiro saber o que é DOM. DOM é a abreviação de Document Object Model. Modelo de objeto de documento (DOM)expresse.
DOM é uma interface de programação para documentos HTML e XML. Ele fornece uma representação estruturada de documentos e fornece uma maneira para as linguagens de programação acessarem a estrutura DOM para que possam alterar a estrutura, o estilo, o conteúdo etc. do documento. E você também se for difícil explicar o conceito, Pense nisso simplesmente como um documento da webÉ bom fazer isso.
Então, o que é o Shadow DOM?
Então, o que é o Shadow DOM? Shadow DOM é uma tecnologia que encapsula e isola elementos em uma página da web.não ver. E por isso O estilo ou comportamento de um elemento não afeta outros elementos e opera de forma independente.Você pode. No caso do canal talk, que vemos com frequência, a estrutura do nosso site não deve mudar simplesmente para incluir o código do canal talk. Portanto, a tecnologia que nos permite colocar ícones sem afetar em nada nosso site é chamada de Shadow DOM.
Por exemplo, se sua página da Web tiver um nome de elemento que entre em conflito com o CSS usado por outras bibliotecas ou scripts, você poderá usar o Shadow DOM para evitar esses conflitos.
Também é usado para encapsular elementos e estilos para gerar código clichê que pode ser reutilizado em várias páginas da web. O Shadow DOM permite que a árvore DOM oculta pertença e se anexe à árvore DOM principal.
Essa árvore de sombra pode ser anexada a qualquer elemento que você desejar, começando pela raiz da sombra, como um DOM normal. (Se você quiser saber mais sobre o Shadow DOM, conexãoPor favor, toque!)
A estrutura do Shadow DOM geralmente está oculta, mas visível nas ferramentas do desenvolvedor.
No caso do plug-in Channel Talk, o elemento Shadow DOM do plug-in é criado no momento em que é inserido no site. Isso não afetará o estilo ou o comportamento do seu site existente e manterá a estabilidade e a consistência geral da sua página da web.
No entanto, por este motivo É difícil para o Shadow DOM rastrear com precisão o comportamento do usuário usando métodos tradicionais de rastreamento de cliques. Achei que seria fácil capturar o gatilho com o Gerenciador de tags do Google, mas é difícil para o Gerenciador de tags do Google identificá-lo com precisão.
Como capturar cliques no Google Tag Manager
Gerenciador de tags do Google (GTM) [모든 요소]E [링크만]Existem dois tipos de gatilhos de clique:
de acordo com o nome proposto [모든 요소]No caso do navegador, cada clique do usuário é rastreado, [링크만] Para gatilhos, apenas os cliques no link são rastreados. Se o link for clicado, ele só estará disponível quando o elemento HTML for sinal.
Em seguida, as condições do acionador são definidas para criar acionadores, os sinalizadores são criados e os eventos são movidos.
Para cliques normais no elemento, o rastreamento é adequado se você criar e usar dois tipos de acionadores de clique.
No entanto, o Google Tag Manager (GTM) não fornece rastreamento de cliques DOM.
Primeiro, explicarei brevemente o Shadow DOM e, em seguida, direi por que é impossível rastreá-lo no Gerenciador de tags do Google.
Por que o Gerenciador de tags do Google não consegue rastrear o Shadow DOM?
Os gatilhos de clique do GTM não podem rastrear elementos dentro do Shadow DOM por padrão, porque eles apenas rastreiam eventos que acontecem no DOM principal, não dentro do Shadow DOM. A razão é que Isso ocorre porque o Shadow DOM foi projetado para encapsular conteúdo e estilos, portanto, o DOM subjacente e os ouvintes de eventos não são acessíveis. É por isso que o Google Tag Manager não reconhece a regiãocorreto.
Como rastrear cliques de Shadow DOM do Gerenciador de tags do Google
Os gatilhos de clique precisam ser rastreados no Gerenciador de tags do Google de uma maneira diferente, pois o rastreamento de cliques Shadow DOM não funciona.
UmEtapa: Baixe o plug-in de rastreamento
conexãoclique com o botão direito do mouse e escolha “Salvar como” para salvar o arquivo em seu computador.
2Etapa: importar o arquivo para um contêiner GTM
3Etapa: Mesclar com a versão atual
4Passo: Personalize o código
Procrastinação – [맞춤 HTML] Shadow DOM Click Tracking Modificação de código pós-clique.
Quando o modo de depuração é verdadeiro, o histórico é exibido na janela do console do navegador.
O padrão é falso.
Nome do evento personalizado. Basta digitar o nome do evento que deseja editar.
O padrão é “shadow_dom_click”.
- Ao rastrear apenas um item específico
Criei uma variável para o caso de querer rastrear apenas um elemento específico em vez de rastrear todos os cliques de sombra do DOM. Você pode definir o valor do seletor css do elemento que deseja rastrear na variável.
5Etapa: publicar a visualização e exibi-la na guia do console do navegador
Depois de definir DEBUG_MODE como true, verifique se o log é obtido conforme mostrado abaixo quando a sombra do DOM é clicada.
resumo
Neste artigo, aprendemos como rastrear cliques do Shadow DOM usando o Gerenciador de tags do Google (GTM). A equipe de desenvolvimento do Huddlers usa o GTM para implementar vários eventos em diferentes ambientes.
Artigo Parceiro de marketing de crescimento da HuddlersEste artigo foi disponibilizado em parceria com a Mobi Inside.
“Pensador. Aspirante a amante do Twitter. Empreendedor. Fã de comida. Comunicador total. Especialista em café. Evangelista da web. Fanático por viagens. Jogador.”