Quanto mais você entender o comportamento de seus usuários, o melhor que você pode comercializar o seu produto ou serviço — é por isso que o Google Tag Manager (GTM) é um profissional de marketing é o melhor amigo. Com built-in modelos de tag, tais como o deslocamento de profundidade e de rastreamento de clique, o GTM é uma poderosa ferramenta para medir o engajamento e o sucesso do seu conteúdo.

Se você está apenas confiar nos modelos de tag no GTM, ou, ocasionalmente, a limitação de fora da caixa o Google Analytics, você pode estar perdendo em percepções que vão além do normal, as métricas de engajamento. O que significa que você pode estar recebendo uma incompleto história a partir de seus dados.

Este post vai te ensinar como ter uma visão ainda mais através da configuração de cookies no GTM. Você vai aprender a tag e controlar várias visualizações de páginas em uma única sessão, na pista de um conjunto específico de número de páginas, com base em específico no conteúdo da página de elementos, e compreender como os usuários estão engajados com o seu conteúdo, de modo que você pode fazer de dados baseada em decisões a melhor unidade de conversões.

Exemplo de caso de uso

Recentemente eu trabalhei com um cliente que queria entender melhor o comportamento dos usuários que pousou no seu blog de conteúdo. A principal barreira que enfrentei foi a sua estrutura de URL. O seu conteúdo não viver na lógica URL estruturas — eles colocaram seu destino de palavra-chave em linha reta depois da raiz. Assim, em vez de example.com/blog/some-content, sua estrutura de URL parecia example.com/some-content.

Você pode usar segmentos avançados no Google Analytics (GA) para controlar qualquer número de métricas, mas se você não tem uma lógica definida URL e, em seguida, acompanhamento e medição dessas métricas torna-se um manual e demorado prática — especialmente quando há um grande número de páginas para acompanhar.

Felizmente, aproveitando um cookie personalizado código, que eu fornecemos abaixo, ajuda a cortar esse tempo, requer pouco esforço de implementação, e podem superfície poderosos insights:

Isso pode indicar que os usuários estão engajados com o seu conteúdo e a sua marca.

Os dados armazenados pode ser usado para conteúdo de pontuação — se uma página está incluída nas três páginas de um evento pode ser mais valioso do que os outros. Você poderá segmentar estas páginas com mais de upsell ou cross-sell oportunidades, se assim.

A mesma pontuação lógica pode se aplicar aos autores. Se blogs escritos por alguns autores têm mais visualizações de página em uma sessão, em seguida, seu estilo de escrita/temas poderiam ser mais envolvente e você pode querer alavancar ainda mais seu conteúdo habilidades de escrita.

Você pode construir o remarketing listas de públicos-alvo para direcionar estas aparentemente envolvidos os usuários a se alinhar com as metas de seu negócio — as pessoas que estão mais engajados com o seu conteúdo poderia ser mais propensos a se converter.

Então, vamos discutir brevemente a anatomia do código personalizado que você precisará adicionar para definir cookies antes de nós andamos através de um passo a passo guia de implementação.

Cookie personalizado código

Cookies, como todos sabemos, é um pequeno arquivo de texto que é armazenado no seu navegador — ajuda-servidores lembrar de quem você é e o seu código é composto de três elementos:

• um par nome-valor que contenham dados
• uma data de validade após a qual não é válido
• o domínio e o caminho do servidor, ele deve ser enviado.

Você pode criar um código personalizado para adicionar aos cookies para o ajudar a controlar e armazenar inúmeras visualizações de página em uma sessão através de um conjunto de páginas.

O código abaixo constitui a base na configuração de cookies. Ele define regras específicas, tais como os eventos necessários para desencadear o cookie e a data de expiração do cookie. Eu vou fornecer o código, em seguida, dividi-la em duas partes para explicar cada segmento.

O código

function createCookie(nome,valor,horas) { if (horas) { var data = new Data(); data.setTime(a data.getTime()+(horas*60*60*1000)); var expires = “; expires=”+data.toGMTString(); } else var expires = “”; do documento.cookie = nome+”=”+valor+expira+”; path=/”; } if (documento.querySelectorAll(“SELETOR de CSS VAI AQUI””).comprimento > 0) { var y = {{NumberOfBlogPagesVisited}} if (y == null) { createCookie(‘BlogPagesVisited’,1,1); } else if (y == 1) { createCookie(‘BlogPagesVisited’,2,1); } else if (y == 2) { var newCount = Número(y) + 1; createCookie(‘BlogPagesVisited’,newCount,12); } if (newCount == 3) { dataLayer.push({ ‘evento’: ‘3 Páginas do Blog’ }); } }

Parte 1

function createCookie(nome,valor,horas) { if (horas) { var data = new Data(); data.setTime(a data.getTime()+(horas*60*60*1000)); var expires = “; expires=”+data.toGMTString(); } else var expires = “”; do documento.cookie = nome+”=”+valor+expira+”; path=/”; }

Explicação:

Esta função, como o nome indica, vai criar um cookie, se você especificar um nome, um valor e o tempo que o cookie deve ser válida. Eu já especificado “horas,” mas se você quiser especificar “dias,” você vai precisar iterar variáveis do código. Dê uma olhada nesta grande recurso sobre a configuração de cookies.

Parte 2

se (documento.querySelectorAll(“SELETOR de CSS VAI AQUI”).comprimento > 0) { var y = {{NumberOfBlogPagesVisited}} if (y == null) { createCookie(‘BlogPagesVisited’,1,1); } else if (y == 1) { createCookie(‘BlogPagesVisited’,2,1); } else if (y == 2) { var newCount = Número(y) + 1; createCookie(‘BlogPagesVisited’,newCount,12); } if (newCount == 3) { dataLayer.push({ ‘evento’: ‘3 Páginas do Blog’ }); }

Explicação:

A segunda parte do script irá contar o número de visualizações de página:

• O “SELETOR de CSS VAI AQUI”, que eu deixei em branco, por agora, que vai ser onde você adiciona o seu seletor de CSS. Isto irá instruir o cookie de fogo se o seletor CSS corresponde a um elemento em uma página. Você pode usar DevTools passar o mouse sobre um elemento da página, como um nome de autor, e copie o seletor CSS.
• “y” representa o cookie e “NumberOfBlogPagesVisited” é o nome que eu dei para a variável. Você vai querer repetir o nome da variável como você vê o ajuste, mas o nome da variável que você pode configurar no GTM deve ser consistente com o nome da variável no código (nós vamos passar por isto durante o passo-a-passo).
• “createCookie” é o nome real do seu cookie. Chamei meu cookie “BlogPagesVisited.” Você pode chamar o seu cookie que você quiser, mas, novamente, é imperativo que o nome que você dê o seu cookie no código é consistente com o nome de cookie do campo quando você vai criar a sua variável no GTM. Sem consistência, a tag não é acionado corretamente.

• Você também pode alterar as horas em que o cookie expira. Se um usuário acumula três visualizações de página em uma única sessão, o código especifica um de 12 horas de expiração. O raciocínio por trás disso é que se alguém vem de volta depois de um dia ou dois e vistas outro blog, nós não consideramos que seja parte da mesma “sessão”, dando-nos uma visão mais clara do comportamento do usuário das pessoas que disparam três visualizações de página em uma sessão.
• Este é um pouco arbitrário, então você pode iterar de expiração do cookie de comprimento para atender seus objetivos de negócio e os clientes.

Nota: se você deseja que o evento para o fogo, depois de mais de três visualizações de página (por exemplo, página de quatro pontos de vista) e, em seguida, o código seria semelhante ao seguinte:

var y = {{NumberOfBlogPagesVisited}} if (y == null) { createCookie(‘BlogPagesVisited’,1,1); } else if (y == 1) { createCookie(‘BlogPagesVisited’,2,1); } } else if (y == 2) { createCookie(‘BlogPagesVisited’,3,1); } else if (y == 3) { var newCount = Número(y) + 1; createCookie(‘BlogPagesVisited’,newCount,12); } if (newCount == 4) { dataLayer.push({ ‘evento’: ‘4 Páginas do Blog’ });

Agora que temos uma compreensão básica do script, podemos usar o GTM para implementar tudo.

Primeiro, você vai precisar de configurar o seguinte “Tags,” “Gatilhos” e “Variáveis”:

Tags

Tag HTML personalizada: contém o cookie de script

Evento marca: dispara o evento e envia os dados para o GA depois de um terceiro visualização de página é uma sessão.

Dispara

Modo de Exibição de página trigger: define as condições que vai disparar a sua Tag HTML Personalizada.

Personalizado disparador de Evento: define as condições que irá disparar o evento.

Variável

Cookie de primeira Parte variável: Isto irá definir um valor que um disparador deve avaliar se é ou não sua tag HTML Personalizada deve fogo.

Agora, vamos percorrer os passos de como configurar isso no GTM.

Passo 1: Criar uma custom tag HTML

Primeiro, vamos precisar criar uma Tag HTML Personalizada que contém o cookie de script. Desta vez, eu adicionei o seletor de CSS, abaixo:

#conteúdo > div.o post.tipo de post.status-publish.formato-padrão.hentry > div.entrada-meta > span > span.autor.vcard > um

Isso coincide com os autores na Destilada blog de páginas, portanto, você vai querer adicionar o seu próprio e único seletor.

Navegue para Tags > Novo > Custom HTML > e cole o script no tag HTML personalizada caixa.

Você vai querer garantir que o seu nome de marca é descritivo e intuitiva. O Google recomenda o código seguinte convenção de nomenclatura: Tipo de Tag – Detalhe – Localização. Isto irá permitir que você facilmente identificar e classificar tags relacionadas a partir da visão de marca de interface. Você também pode criar pastas separadas para diferentes projetos para manter as coisas mais organizadas.

Um exemplo, que chamei de minha tag HTML Personalizado – 3 Página Vistas Cookie Blog.

Uma vez que você criou sua marca, lembre-se de clicar em salvar.

Passo 2: Criar uma trigger

A criação de um gatilho vai definir as condições em que vai disparar a sua tag HTML personalizada. Se você quiser saber mais sobre disparadores, você pode ler sobre Simo Ahava gatilho do guia.

Navegue para Disparadores > Novo > visualização de página.

Uma vez que você tenha clicado o gatilho caixa de configuração, você vai querer selecionar “Visualizar Página” como um tipo trigger. Eu também chamado de meu gatilho modo de Exibição Página do Cookie do Disparador do Blog, como eu estou indo para definir a marca de fogo, quando a terra de usuários no conteúdo do blog.

Em seguida, você vai querer definir as propriedades de seu gatilho.

Já que estamos confiando no seletor de CSS para acionar o cookie em todo o site, escolha “Todas as Página Vistas”.

Uma vez que você definiu o seu gatilho, clique em salvar.

Passo 3: Criar a variável

Assim como uma tag HTML Personalizada depende de um gatilho para disparar um gatilho depende de uma variável. Uma variável define um valor que um disparador deve avaliar se é ou não uma marca deve fogo. Se você quiser saber mais sobre variáveis, recomendo a leitura até no Simo Ahava variável do guia.

Cabeça para Variáveis > Variáveis Definidas pelo Usuário > Selecionar 1ª Parte Cookie. Você também vai notar que eu tenho chamado esta variável “NumberOfBlogPagesVisited” — você vai querer esse nome de variável para coincidir com o que está no seu cookie código.

Depois de ter selecionado “1ª Parte “Cookie”,” você agora terá que introduzir o seu nome de cookie. Lembre-se: o nome de cookie precisa replicar o nome que você tenha dado seu cookie no código. Eu chamei meu cookie BlogPagesVisited, para que eu tenha replicado em que o Nome de Cookie do campo, como pode ser visto abaixo.

Passo 4: Criar o evento marca

Quando um usuário aciona um terceiro modo de exibição página, vamos querer tê-lo gravado e enviado para o GA. Para fazer isso, precisamos definir um “Evento” na etiqueta.

Primeiro, navegue para Tags > Novo > Selecione o Google Analytics Universal Analytics:

Uma vez que você fez o seu tipo de marca “Google Analytics o google Analytics Universal”, certifique-se de que tipo de acompanhamento é um “Evento” e o nome de sua “Categoria” e “Ação” de acordo. Você também pode preencher um rótulo e o valor, se você desejar. Eu também tiver selecionado “True” no “Não-interação Hit” do campo, como eu ainda pretende controlar a taxa de rejeição de métricas.

Finalmente, você vai querer selecionar um GA Definição de variável que irá passar no armazenadas as informações do cookie de um GA propriedade.

Passo 5: Crie o seu gatilho

Este gatilho de referência de seu evento.

Navegue para Acionar > Novo > Evento Personalizado

Uma vez que você tenha selecionado Evento Personalizado, você vai querer garantir que o “nome do Evento” campo corresponde ao nome que você tenha dado seu evento no código. No meu caso, eu liguei para o evento “3 Páginas do Blog”.

Passo 6: Auditoria seu cookie no modo de pré-visualização

Depois de ter selecionado o modo de visualização, você deve conduzir uma auditoria de cookies para garantir que tudo está atirando corretamente. Para fazer isso, navegue até o site onde você tem de definir cookies.

Dentro da interface de depuração, sobre a cabeça em modo de Exibição de Página > Variáveis.

Próximo, olhar para uma URL que contém o seletor CSS. No caso do cliente, usamos o seletor CSS que consultou um autor da página. Todas as suas páginas de conteúdo utilizado o mesmo seletor de CSS para os autores. Usando o GTM ferramenta de pré-visualização, você verá que “NumberOfBlogPagesVisited” variável foi executado.

E o real “BlogPagesVisited” cookie foi acionado pelo menos um valor de “1” no Chrome DevTools. Para ver isto, clique em Inspecionar > Aplicativo > Cookies.

Se ignorar a segunda página, exibir e executar o nosso terceiro modo de exibição de página em outra página do blog, você vai ver que a nossa GA evento e a nossa tag HTML Personalizada acionado, como é o nosso terceiro exibição de página.

Você também vai ver o terceiro modo de exibição de página acionado o nosso cookie valor de “3” no Chrome DevTools.

Passo 7: Configurar o seu segmento avançado

Agora que você já configurou o seu cookie, você vai querer puxar o cookie armazenado de dados em GA, o que irá permitir que você para manipular os dados como você vê o ajuste.

No GA, vá para o Comportamento > Eventos > Visão geral > Adicionar Segmento > Novo Segmento > Sequências > Evento > e, em seguida, adicionar o nome do evento especificado na tag do evento. Eu especificado “3 Página do Blog ponto de Vista.”

E aí está ele!

Conclusão

Agora que você sabe como configurar um cookie no GTM, você pode obter um monte de insights adicionais sobre o envolvimento de seu conteúdo.

Você também sabe como é também para brincar com o snippet de código e iterar o número de páginas vistas necessárias para acionar o cookie evento, bem como a expiração dos cookies em cada fase para atender às suas necessidades.

Eu estaria interessado em ouvir o que os outros casos de uso que você pode pensar para este cookie, ou que outros tipos de cookies que você pode configurar no GTM e quais dados você pode obter a partir deles.