Google Tag Manager
O Google Tag Manager é uma ferramenta poderosa que ajuda você a gerenciar e implantar com eficiência várias tags (trechos de código) associadas aos eventos de campanha de marketing. O Google Tag Manager oferece a capacidade de adicionar tags de rastreamento ao seu site para medir a audiência ou personalizar, redirecionar ou conduzir iniciativas de marketing de mecanismo de pesquisa.
O Google Tag Manager transfere dados e eventos diretamente para o Google Analytics, Enhanced Ecommerce e outras soluções de análise de terceiros para produzir uma imagem clara do desempenho de seu site, de seus produtos e promoções.
Você deve ter uma conta de Google Analytics e Tag Manager para continuar esse processo. As instruções a seguir orientam você pelo processo de configuração das contas do Google, configuração da loja do Commerce e criação de uma tag.
Etapa 1. Configurar sua conta do Google Analytics
Consulte Configurar pesquisa de site na Ajuda do Google para obter as noções básicas necessárias para começar. Consulte também os guias do Google para o Google Analytics e o Google Tag Manager.
-
Entre na sua conta Google Analytics.
-
Para habilitar Internal Site Search Tracking, faça o seguinte:
-
Navegue até Select View > View Settings.
-
Defina Site Search Tracking como
On
. -
Definir parâmetro Query como
q
. -
Ao concluir, Save as configurações.
-
-
Para ativar recursos de exibição, faça o seguinte:
-
Escolha Property Settings.
-
Em Advertising Features, defina Enable Demographics and Interest Reports como
On
. -
Save as configurações.
-
-
Para ativar o rastreamento de comércio eletrônico, faça o seguinte:
-
Navegue até Select View > Ecommerce Settings.
-
Defina Enable Ecommerce como
On
. -
Defina Enable Enhanced Ecommerce Reporting como
On
. -
Save as configurações.
-
-
Recarregue a página e verifique se todas as configurações permanecem
On
.note note NOTE Se nem todas as configurações forem On
, repita as etapas anteriores, salve e recarregue a página. Repita esse processo até que todas as configurações sejam definidas comoOn
.
Etapa 2. Configurar sua conta do Google Tag Manager
As instruções a seguir mostram como configurar um novo container com as configurações básicas. Um exemplo de arquivo de configuração (.json) do Composer é usado para simplificar o processo, importando para gerar uma marca em um novo contêiner. Para este exemplo, é recomendável criar um contêiner, em vez de modificar um contêiner existente.
-
Baixe o arquivo vinculado GTM_M2_Config_json.txt, abra-o em um editor e salve-o como
GTM_M2_Config.json
.O arquivo json é carregado diretamente para Google Tag Manager.
-
Navegue até Admin > Container > Import Container.
-
Clique em Choose container file e selecione o arquivo json.
-
Em Choose workspace, clique em New.
-
Insira um título e uma descrição, depois clique em Save.
-
Para importar o arquivo, selecione uma das seguintes ações:
-
A opção Overwrite deve ser selecionada para um novo container.
-
A opção Merge deve ser selecionada se você estiver usando um contêiner existente.
-
-
Clique em Preview para examinar as marcas, os disparadores e as variáveis.
-
Para editar o Google Analytics ID que é referenciado nas variáveis, faça o seguinte:
-
Navegue até Variables > User-Defined Variables.
-
Escolha Google Analytics e atualize o espaço reservado (
UA-xxxxxx-x
) com seu próprio GA ID.
-
-
Siga as instruções da Google para adicionar tags, acionadores e variáveis ao novo container.
Se você tiver configurações em outro container que deseja usar, elas poderão ser movidas para o novo container.
-
Clique em Confirm quando terminar.
-
Siga as instruções da Google para publicar o novo container.
Etapa 3. Configurar sua loja
-
Faça logon no Admin da sua loja da Commerce.
-
Na barra lateral Admin, vá para Stores > Settings>Configuration.
-
No painel esquerdo, expanda Sales e escolha Google API.
-
Expanda
-
Defina Enable como
Yes
. -
Defina Account type como
Google Tag Manager
. -
No campo Container ID, digite sua ID de GTM (
GTM-xxxxxx
). -
Se você também estiver usando o Google Analytics para experimentos de conteúdo, defina Habilitar experimentos de conteúdo para
Yes
. -
Use os valores padrão para os campos restantes.
-
-
Quando terminar, clique em Save Config.
-
Teste as configurações do Google Tag Manager e verifique se tudo funciona corretamente.
Descrições dos campos
Yes
/ No
Google Analytics
/ Google Tag Manager
Catalog Page
Cross-sell
Up-sell
Related Products
Search Results
Label
Criar uma tag para rastrear conversões
Se você tiver uma conta do Google AdWords, poderá criar uma tag que rastreia conversões. O exemplo a seguir mostra como usar o Google Tag Manager e o Google Analytics para criar uma tag que é acionada na página de conversão Sucesso do seu armazenamento.
Etapa 1. Criar uma tag
-
Faça logon em sua conta do Google Tag Manager e clique no link do contêiner que você criou para sua loja.
-
Na caixa New Tag, clique em Add a new tag.
-
Obtenha as seguintes informações da sua conta do AdWords:
- ID de conversão
- Rótulo de conversão
Se precisar de ajuda, visite o site de suporte da Google.
-
No painel Google Tag Manager, clique em Google AdWords e faça o seguinte:
-
Clique no espaço reservado do título e insira um nome para a nova tag.
-
Em Choose Product, selecione Google AdWords.
-
Em Choose a Tag Type, selecione AdWords Conversion Tracking e clique em Continue.
-
-
Insira o Conversion ID e Conversion Label da sua conta do AdWords e clique em Continue.
Etapa 2. Criar uma regra
Continuando no painel Google Tag Manager, a próxima etapa é criar uma regra que acione a tag na página de conversão.
-
Em Fire On, clique em Some Pages.
-
Na seção Choose Pages, conclua as seguintes configurações:
-
Name - Digite um nome para a descrição da página.
-
Variable
url
-
Operação -
matches RegEx
Para saber mais, consulte Operadores de seletor de Regex e CSS na Ajuda do Gerenciador de Tags da Google.
-
Value -
checkout/success.*
-
-
Marque a caixa de seleção verde e clique em Save.
O acionador configurado aparece como um botão azul na seção Acionar.
-
Quando terminar, clique em Save Tag.
Etapa 3. Pré-visualizar e publicar
A próxima etapa do processo é pré-visualizar a tag. Cada vez que a tag é visualizada, um instantâneo da versão é salvo. Quando estiver satisfeito com os resultados, vá para a versão que deseja usar e clique em Publish.
Personalizar tag do HTML com o JavaScript
Esta seção explica como adicionar um Nonce CSP ao HTML Tag JavaScript personalizado para execução na página de check-out, garantindo a conformidade com os requisitos da Política de segurança de conteúdo (CSP). Essa adição melhora a segurança do site, impedindo a execução de scripts não autorizados. Para obter informações mais detalhadas, consulte a documentação da Política de Segurança de Conteúdo.
cspNonce
para o Google Tag Manager.Etapa 1. Criar uma variável Nonce CSP
Você pode criar uma variável CSP Nonce que pode ser usada no Gerenciador de tags da Google importando a configuração da variável ou configurando-a manualmente.
Importar a configuração da variável
A variável CSP Nonce está incluída no contêiner de exemplo GTM_M2_Config_json.txt. Você pode criar a variável importando esse código para o espaço de trabalho.
Criar a variável manualmente
Se você não puder importar a configuração da variável, conclua as etapas abaixo para criá-la.
- No seu espaço de trabalho, navegue até a seção Variáveis da barra lateral.
- Clique no botão Novo na parte inferior da página na seção Variáveis definidas pelo usuário.
- Nomeie a variável
gtmNonce
. - Clique no ícone de lápis para editar a variável.
- Selecione Variável JavaScript na seção Variável de página.
- No campo Nome da Variável Global, digite
window.cspNonce
. - Salve a variável.
Para saber mais sobre Variáveis do Google Tag Manager, consulte Tipos de variáveis definidas pelo usuário para a Web na documentação do Google. Esta documentação oferece orientação detalhada sobre como criar e gerenciar variáveis personalizadas para adaptar seu gerenciamento de tags a necessidades analíticas e de marketing específicas.
Etapa 2. Criar uma tag HTML personalizada
-
No seu espaço de trabalho, navegue até a seção Marcas da barra lateral.
-
Clique no botão Novo.
-
Na seção Configuração de Marca, selecione Marca HTML Personalizada.
-
Insira a JavaScript necessária na área de texto e adicione um atributo nonce à tag de abertura
<script>
que aponte para a variável criada na etapa anterior. Por exemplo:code language-html <script nonce="{{gtmNonce}}"> // Your JavaScript code here </script>
-
Selecione Documentos de suporte.write.
-
Na seção Acionamento, selecione o acionador desejado. Por exemplo, Inicialização de consentimento - Todas as páginas.
Para obter mais informações sobre Tags no Gerenciador de Tags da Google, consulte Tags personalizadas na documentação da Google.