Guia de início rápido sobre modelos personalizados

Visão geral

Com modelos personalizados, você pode criar suas próprias definições de tag e variáveis para que outras pessoas na organização possam usá-las com a tag e os modelos de variáveis integrados. A natureza dos modelos personalizados, que se baseia em permissões e em sandbox, possibilita a criação de tags e variáveis personalizadas de maneira mais eficiente e segura do que com a personalização de tags HTML e variáveis JavaScript.

Os modelos personalizados de variáveis e tags são definidos na seção Modelos do Gerenciador de tags do Google. Na tela principal "Modelos", você encontrará uma lista de todos aqueles que já foram definidos no seu contêiner e Também é possível criar novos modelos a partir desta tela.

Editor de modelos

Com o editor de modelos, é possível criar, visualizar e testar modelos personalizados. Ele tem quatro áreas principais de entrada para ajudar você a definir seu modelo de tag:

  • Informações: define propriedades básicas do modelo, como nome da tag ou variável e ícone.
  • Campos: é um editor visual para adicionar campos de entrada ao seu modelo de tag.
  • Código: acessa o JavaScript em modo sandbox para definir como sua tag ou variável se comportará.
  • Permissões: exibe e define limites sobre o que sua tag ou variável pode fazer.

Criar seu primeiro modelo de tag personalizado

Este exemplo orientará você sobre como criar uma tag de pixel básica. Quando essa tag é disparada em uma página da Web, ela envia um hit com as informações corretas da conta para os servidores do provedor de tags.

1. Para começar seu primeiro modelo, clique em "Modelos" na navegação à esquerda e, em seguida, no botão Novo na seção Modelos de tag.

2. Clique em Informações e defina o Nome (obrigatório), a Descrição e o Ícone da tag.

O nome será exibido aos usuários quando eles implementarem essa tag pela interface do usuário do Gerenciador de tags.

A descrição é uma breve explicação (de 200 caracteres ou menos) da função da tag.

O ícone permite escolher a imagem que aparecerá quando a tag for exibida em listas compatíveis com a propriedade do ícone. As imagens do ícone precisam ser arquivos quadrados no formato PNG, JPEG ou GIF, com no máximo 50 kB e pelo menos 64 x 64 pixels.

3. Clique em Atualizar para visualizar seu modelo.

À direita dos campos de entrada, há uma janela Visualização do modelo. Sempre que uma alteração é feita no editor, o botão Atualizar aparecerá. Clique nele para ver os resultados das suas alterações na aparência da tag.

4. Clique em Campos para adicionar campos no modelo de tag.

A guia Campos do Editor de modelos permite criar e editar campos no modelo de tag. Os campos são usados para inserir dados personalizados, como um ID da conta. Você pode adicionar os elementos de formulário padrão, como campos de texto, menus suspensos, botões de opção e caixas de seleção.

5. Clique em Adicionar campo e selecione Entrada de texto. Substitua o nome padrão (por exemplo: "text1") por "accountId". Em Visualização do modelo, clique em Atualizar.

Ao lado do campo, haverá um ícone seletor de variante familiar (ícone de seletor de variável). Os usuários do modelo podem clicar nesse ícone para escolher as variantes que estão ativas no contêiner.

O próximo passo é adicionar um rótulo ao campo:

6. Clique no ícone de expansão (ícone de expansão) ao lado do campo de texto para abrir mais opções. Digite ID da conta no campo Nome de exibição. Na Visualização do modelo, clique em Atualizar.

Um rótulo de texto intitulado ID da conta aparecerá acima do campo.

7. Clique na guia Código e insira o JavaScript em modo sandbox no editor:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

A primeira linha de código, const sendPixel = require('sendPixel'), importa a API sendPixel.

A segunda linha de código, const encodeUriComponent = require('encodeUriComponent'), importa a API encodeUriComponent.

A próxima, const account = data.accountId;, usa o valor de accountId que foi criado na etapa 5 e o armazena em uma constante chamada account.

const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account); define uma constante de url que concatena um endpoint de URL fixo que registra dados de análise e o ID da conta codificado com o qual a tag foi configurada.

A última linha, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), executa a função sendPixel() com os parâmetros obrigatórios e faz uma solicitação ao URL especificado. Os valores de data.gtmOnSuccess e data.gtmOnFailure informam ao Gerenciador de tags do Google quando a tag concluiu a tarefa ou falhou e são usados por ele para recursos como o sequenciamento de tags ou o modo de visualização.

8. Clique em Salvar para salvar seu progresso. Com isso, as permissões detectadas serão carregadas no editor de modelos.

Algumas APIs de modelo têm permissões associadas que determinam o que elas podem ou não fazer. Quando você usa uma API de modelo como a sendPixel no seu código, o Gerenciador de tags mostra as permissões relevantes na guia Permissões.

9. Clique em Permissões para refinar a quais domínios sendPixel pode enviar dados. Para a entrada Enviar pixels, clique no ícone de expansão (ícone de expansão) e insira https://endpoint.example.com/ em Padrões de correspondência de URL permitidos.

Quando um modelo de tag está configurado para enviar dados, é necessário especificar um Padrão de correspondência de URL permitido na permissão associada para restringir o destino das informações. Se o URL especificado no código não corresponde a um padrão, a chamada do sendPixel falhará.

Um padrão de correspondência de URL precisa usar HTTPS e especificar ambos os padrões, de host e caminho. O host pode ser um domínio (por exemplo, "https://example.com/") ou um subdomínio específico (como "https://sub.example.com/"). O caminho precisa contar com pelo menos um "/". Use um asterisco (*) como caractere curinga para indicar um subdomínio ou um padrão de caminho de qualquer tamanho (por exemplo, "https://\*.example.com/test/"). O asterisco é um caractere curinga que captura os vários padrões possíveis, por exemplo, "\*.example.com/" corresponderá a www.example.com, shop.example.com, blog.example.com etc. Ele precisa ser precedido de um caractere de barra invertida: "\*". Um URL sem caracteres adicionais (por exemplo, "https://example.com/") é tratado como finalizado em um caractere curinga (ou seja, equivalente a "https://example.com/\*").

Especifique padrões de correspondência de URL adicionais em linhas separadas.

10. Clique em Teste e veja se há problemas na janela Console.

Os erros detectados aparecerão na janela Console.

11. Clique em Salvar e feche o editor de modelos.

O modelo de tag estará pronto para ser usado.

Usar sua nova tag

O processo de criação de uma nova tag que usa seu modelo personalizado recém-definido é igual a qualquer outra tag:

  1. No Gerenciador de tags do Google, clique em Tags > Nova.
  2. Ela aparecerá na seção Personalizada da janela Nova tag. Clique nela para abrir o modelo de tag.
  3. Preencha os campos necessários para a configuração desse modelo.
  4. Clique em Acionamento e selecione um acionador apropriado para o disparo da tag.
  5. Salve a tag e publique seu contêiner.

Criar seu primeiro modelo de variável personalizada

Modelos de variáveis personalizadas são semelhantes aos modelos de tags, com algumas diferenças notáveis:

  • Os modelos de variáveis personalizadas precisam retornar um valor.

    Em vez de chamar data['gtmOnSuccess'] para indicar a conclusão, as variáveis retornam um valor diretamente.

  • Os modelos de variáveis personalizadas são usados em diferentes partes da interface do usuário do gerenciador de tags.

  • Em vez de acessar *Tags > Nova* para criar uma nova variável com base na sua variável personalizada, vá para *Variáveis > Nova*

Consulte criar uma variável personalizada para ver um guia completo sobre como criar um modelo de variável personalizada.