Adicionar um elemento de dados, uma regra e uma biblioteca
Nesta lição, você criará seu primeiro Elemento de dados, Regra e Biblioteca.
Os elementos e as regras de dados são os blocos que formam a base das tags. Os Elementos de dados armazenam os atributos que você deseja enviar para as soluções de marketing e publicidade, enquanto as Regras acionam as solicitações para essas soluções nas condições certas. As bibliotecas são arquivos JavaScript carregados na página para fazer todo o trabalho. Nesta lição, você usará todos os três para forçar a página de amostra faça algo.
- O Platform Launch (lado do cliente) agora é tags
- O Platform Launch Server Side agora é event forwarding
- As configurações do Edge agora são datastreams
Objetivos de aprendizagem
No final desta lição, você poderá:
- Criar um elemento de dados
- Criar uma regra
- Criar uma biblioteca
- Adicionar alterações a uma biblioteca
- Validar se a biblioteca está sendo carregada no navegador web
- Use o recurso "Biblioteca de trabalho" para trabalhar com mais eficiência
Criar um elemento de dados para o Nome da página
Os elementos de dados são a versão das tags de uma camada de dados. Eles podem armazenar valores de seu próprio objeto de camada de dados, de cookies, objetos de armazenamento local, parâmetros da string de consulta, elementos da página, metatags etc. Neste exercício, você criará um elemento de dados para Nome da página, que será usado posteriormente nas implementações do Target e do Analytics.
Para criar um elemento de dados
-
Na navegação à esquerda, clique em Elementos de Dados
-
Como você ainda não criou elementos de dados nessa propriedade, um breve vídeo é exibido com informações adicionais sobre este tópico. Assista a este vídeo se desejar
-
Clique no botão Criar novo elemento de dados:
-
Nomeie o elemento de dados, por exemplo
Page Name -
Use o tipo de elemento de dados Variável JavaScript para apontar para um valor na camada de dados da página de exemplo:
digitalData.page.pageInfo.pageName -
Marque as caixas Forçar valor minúsculo e Limpar texto para padronizar o caso e remover espaços irrelevantes
-
Deixe Nenhum como a configuração de Duração do Armazenamento, pois esse valor normalmente será diferente em cada página
-
Clique no botão Salvar para salvar o elemento de dados
Criar uma regra
Em seguida, você usará esse elemento de dados em uma regra simples. As regras são um dos recursos mais eficientes nas tags e permitem especificar o que deve acontecer quando o visitante interagir com o site. Quando os critérios definidos nas regras são cumpridos, a regra aciona a ação especificada.
Você criará uma regra que transmita o valor do elemento de dados Nome da página para o console do navegador.
Para criar uma regra
-
Na navegação à esquerda, clique em Regras
-
Como você ainda não criou regras nessa propriedade, um breve vídeo é exibido com informações adicionais sobre este tópico. Assista a este vídeo se desejar
-
Clique no botão Criar nova regra:
-
Atribua um nome à regra
All Pages - Library Loaded. Essa convenção de nomenclatura indica onde e quando a regra será acionada, facilitando a identificação e a reutilização da propriedade de tag. -
Em Eventos, clique em Adicionar. O Evento informa as tags quando a regra deve ser acionada e as causas podem ser muitas, incluindo um carregamento de página, um clique, um evento JavaScript personalizado etc.
-
Como Tipo de evento, selecione Biblioteca carregada (Parte superior da página). Observe que quando você seleciona Tipo de evento, as tags preenchem previamente um nome para o evento usando sua seleção. Observe também que a ordem padrão do evento é 50. A ordenação é um recurso poderoso nas tags, que oferece controle preciso sobre a sequência de ações quando várias regras são acionadas pelo mesmo evento. Você usará esse recurso posteriormente no tutorial.
-
Clique no botão Manter alterações
-
-
Como essa regra deve ser acionada em todas as páginas, deixe Condições em branco. Se você abrir a modal Condições, verá que as condições podem adicionar restrições e exclusões com base em uma grande variedade de opções, incluindo URLs, valores de elemento de dados, intervalos de datas e muito mais.
-
Em Ações, clique em Adicionar
-
Selecione Tipo de Ação > Código Personalizado, que neste momento é a única opção. Posteriormente no tutorial, à medida que você adiciona extensões, mais opções serão disponibilizadas.
-
Selecione </> Abrir editor para abrir o editor de código
-
Adicione o seguinte ao editor de código. Esse código exibirá o valor do elemento de dados Nome da página no console do navegador para que você possa confirmar se está funcionando:
code language-javascript console.log('The page name is '+_satellite.getVar('Page Name')); -
Salve o editor de código
-
Na tela Configuração de ação, clique em Manter alterações
-
Clique em Salvar para salvar a regra
Na página Regras, você deve ver sua nova regra:
Salvar as alterações em uma biblioteca
Depois de configurar uma coleção de extensões, elementos de dados e regras na interface da Coleção de dados, é necessário disponibilizar esses recursos e lógicas em um conjunto de códigos JavaScript que você possa implantar em seu site para que as tags de marketing sejam acionadas quando os visitantes chegarem ao site. Uma biblioteca é o conjunto de códigos JavaScript que faz essa função.
Em uma aula anterior, você implementou o código incorporado de seu ambiente de desenvolvimento na página de exemplo. Quando você carregava a página de exemplo, um erro 404 era retornado para o URL do código incorporado porque uma biblioteca de tags ainda não tinha sido criada e atribuída ao ambiente. Agora, você colocará o novo elemento de dados e nova regra em uma biblioteca para que sua página de exemplo possa fazer algo.
Para adicionar e criar uma biblioteca
-
Na navegação à esquerda, clique em Fluxo de publicação
-
Clique em Adicionar nova biblioteca
-
Nomeie a biblioteca, por exemplo,
Initial Setup -
Selecione Ambiente > Desenvolvimento
-
Clique em Adicionar todos os recursos alterados
-
Observe que depois de clicar em Adicionar todos os recursos alterados, as marcas resumem as alterações que você acabou de fazer.
-
Clique em Salvar e criar para desenvolvimento
Após alguns minutos, o status fica verde, indicando que a biblioteca foi criada com êxito.
Validar seu trabalho
Agora, valide se sua regra está funcionando como esperado.
Recarregue sua página de exemplo. Se você observar a guia Ferramentas do desenvolvedor -> Rede, verá agora uma resposta "200" para sua biblioteca de tags.
Se você observar a guia Ferramentas do desenvolvedor -> Console, verá o texto "O nome da página é inicial"
Parabéns, você criou seu primeiro elemento de dados e regra, e criou a sua primeira biblioteca de tags.
Usar o recurso Biblioteca de trabalho
Quando você faz muitas alterações em tags, é inconveniente abrir a guia Publicação, adicionar alterações e criar a biblioteca toda vez que quiser ver o resultado. Depois de criar a biblioteca "Configuração inicial", você pode usar um recurso chamado "Biblioteca de trabalho" para salvar rapidamente as alterações e reconstruir a biblioteca em uma única etapa.
Faça uma pequena alteração na regra "Todas as páginas - Biblioteca carregada". Na navegação à esquerda, clique em Regras e, em seguida, clique na regra All Pages - Library Loaded para abri-la.
Na página Edit Rule, clique na lista suspensa Biblioteca de Trabalho e selecione sua biblioteca Initial Setup.
Após selecionar a biblioteca, você deve ver que o botão Salvar agora assume o padrão Salvar na biblioteca. Ao fazer uma alteração nas tags, você pode usar essa opção para adicionar automaticamente a alteração diretamente à biblioteca de trabalho e/ou recriá-la.
Experiente. Abra a ação Código personalizado e adicione um sinal de dois pontos depois do texto "O nome da página é" para que o bloco inteiro de código diga:
console.log('The page name is: '+_satellite.getVar('Page Name'));
Salve o código, mantenha as alterações na ação e clique no botão Salvar na Biblioteca e Criar.
Aguarde até que o ponto verde reapareça ao lado da lista suspensa Biblioteca de trabalho. Agora, recarregue a página de amostra e você deverá ver sua alteração refletida na mensagem do console (talvez seja necessário limpar o cache do navegador e recarregar para ver a alteração na página):
Essa é uma maneira muito mais rápida de trabalhar e você usará essa abordagem no restante do tutorial.
Próximo "Alternar ambientes com o Experience Cloud Debugger" >