9.3 Configurar variáveis do Google Tag Manager

Acesse https://tagmanager.google.com/ e faça logon com seus detalhes pessoais.

Depois de criar e configurar a tag Google Analytics, estamos prontos para configurar as Variáveis do Google Tag Manager (como os Elementos de dados que usamos no Adobe Launch).

Na interface do usuário do Google Tag Manager, vá para Variáveis. Você verá a lista das Variáveis incorporadas.

Configuração do Google Tag Manager

A primeira variável que precisamos adicionar é chamada customerEmail. Quando um cliente criar um perfil no site de Demonstração de plataforma, vincularemos o endereço de email do cliente ao perfil do cliente na Plataforma.
No site de demonstração de plataforma, as informações são frequentemente armazenadas no localStorage. Para acessar isso, precisamos de um Javascript personalizado para preencher a variável do Google Tag Manager.

Na seção Variáveis definidas pelo usuário -, clique em Novo:

Configuração do Google Tag Manager

Configuração do Google Tag Manager

Primeiro, renomeie "Variável sem título" em um nome mais descritivo:

Variável sem título
customerEmail

Em seguida, clique na parte Configuração, isso permite que você escolha um tipo de variável.

Configuração do Google Tag Manager

Escolha esta.

Tipo de variável
Javascript personalizado

Configuração do Google Tag Manager

Este é o código personalizado a ser inserido na tela abaixo:

function() {
  var email = localStorage.getItem("email");
  return email;
}

Então depois de colar o código sua tela fica assim.
Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Você é uma tela que se parecerá com isto.

Configuração do Google Tag Manager

Para as próximas variáveis, você repetirá este processo:

  • Na seção Variáveis definidas pelo usuário, clique em Novo.
  • Renomeie o Untitled Variable
  • Selecione JavaScript ​personalizado como o tipo de configuração
  • Colar o código JavaScript
  • Clique em Salvar para salvar sua nova variável.

A próxima variável será customerMobileNr. Quando um cliente criar um perfil no site de Demonstração de plataforma, vincularemos o Número do celular do cliente ao perfil do cliente na Plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomear Untitled Variable para customerMobileNr
  • Escolher Javascript ​personalizado como tipo de variável
  • Cole este código JavaScript personalizado:
function() {
  var mobilenr = localStorage.getItem("mobilenr");
  return mobilenr;
}

Sua tela deve se parecer com isso.

Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

A próxima variável será customerFirstName. Quando um cliente criar um perfil no site de Demonstração de plataforma, vincularemos o nome do cliente ao perfil do cliente na Plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomear Untitled Variable para customerFirstName
  • Escolher Javascript ​personalizado como tipo de variável
  • Cole este código JavaScript personalizado:
function() {
  var firstname = localStorage.getItem("firstname");
  return firstname;
}

Sua tela deve se parecer com isso.

Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: customerLastName. Quando um cliente criar um perfil no site de Demonstração de plataforma, vincularemos o sobrenome do cliente ao perfil do cliente na Plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomear Untitled Variable para customerLastName
  • Escolher Javascript ​personalizado como tipo de variável
  • Cole este código JavaScript personalizado:
function() {
  var lastname = localStorage.getItem("lastname");
  return lastname;
}

Sua tela deve se parecer com isso.

Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: aepTenantId. Quando um cliente criar um perfil no site de Demonstração de plataforma, vincularemos o sobrenome do cliente ao perfil do cliente na Plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomear Untitled Variable para aepTenantId
  • Escolher Javascript ​personalizado como tipo de variável
  • Cole este código JavaScript personalizado:
function() {
  var aepTenantId = localStorage.getItem("aepTenantId");
  return aepTenantId;
}

Sua tela deve se parecer com isso.

Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: customerLoggedIn. Quando um cliente estiver conectado ao site de Demonstração de plataforma, definiremos essa variável como Sim e usaremos essa condição em uma configuração de Regra de inicialização.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomear Untitled Variable para customerLoggedIn
  • Escolher Javascript ​personalizado como tipo de variável
  • Cole este código JavaScript personalizado:
function() {
  var loggedin = localStorage.getItem("loggedin");
  return loggedin;
}

Sua tela deve se parecer com isso.
Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: brandName. Ao selecionar uma marca para demonstração no menu Admin -, a brandName será enviada para a Adobe Experience Platform.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomear Untitled Variable para brandName
  • Escolher Javascript ​personalizado como tipo de variável
  • Cole este código JavaScript personalizado:
function() {
  var brandName = localStorage.getItem("brandName");
  return brandName;
}

Sua tela deve se parecer com isso.
Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

As próximas Variáveis serão criadas no mesmo processo, mas com um código diferente.

A próxima variável que precisamos é chamada productProductView. Quando um cliente visualização um produto, essa variável armazenará as informações de visualização do produto.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomear Untitled Variable para productProductView
  • Escolher Javascript ​personalizado como tipo de variável
  • Cole este código JavaScript personalizado:
function() {
  var productview = JSON.parse(localStorage.getItem("thisProductView"));
  return productview;
}

Sua tela deve se parecer com isso.

Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

A próxima variável é chamada return1. Usaremos essa variável para retornar um valor de Número de 1 quando necessário.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomear Untitled Variable para return1
  • Escolher Javascript ​personalizado como tipo de variável
  • Cole este código JavaScript personalizado:
function() {
  return 1;
}

Sua tela deve se parecer com isso.

Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Se tivéssemos trabalhado com aplicações Adobe, teríamos de capturar o ECID. Como vamos mostrar, que também podemos fazer isso com uma abordagem somente do Google para a plataforma, armazenaremos um identificador exclusivo do Google, do Google Analytics. Atribuiremos o valor da ID do cliente a essa variável.

A próxima variável é chamada gaClientId. Usaremos essa variável como uma chave para todos os dados de Google Analytics.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Escolher cookie ​próprio como tipo de variável

Configuração do Google Tag Manager

  • Escolher _ga como nome do cookie

Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: pageTimeStamp. Precisamos de um carimbo de data e hora único em cada chamada para a Plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomear Untitled Variable para pageTimeStamp
  • Escolher Javascript ​personalizado como tipo de variável
  • Cole este código JavaScript personalizado:
function() {
var date = new Date();

var month = date.getUTCMonth();
var day = date.getUTCDate();
var hour = date.getUTCHours();
var min = date.getUTCMinutes();
var sec = date.getUTCSeconds();

month = (month < 9 ? "0" : "") + (month+1);
day = (day < 10 ? "0" : "") + day;
hour = (hour < 10 ? "0" : "") + hour;
min = (min < 10 ? "0" : "") + min;
sec = (sec < 10 ? "0" : "") + sec;

var str = date.getFullYear() + "-" + month + "-" + day + "T" +  hour + ":" + min + ":" + sec + ".000Z";

return str;
}

Configuração do Google Tag Manager

Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: pageHitId. Precisamos de uma HitId única em cada chamada para a Plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomear Untitled Variable para pageHitId
  • Escolher Javascript ​personalizado como tipo de variável
  • Cole este código JavaScript personalizado:
function() {
  var min = 111111111;
  var max = 9999999999999;
  var randomNumber = Math.random() * (max - min) + min;
  return String(randomNumber);
}

Configuração do Google Tag Manager

Salve o fragmento do código e clique em Salvar novamente para salvar a configuração da variável.

Configuração do Google Tag Manager

Em seguida, vamos capturar algumas variáveis disponíveis para o Google Tag Manager sem código personalizado, referenciando objetos JavaScript.

Para fazer isso, siga estas quatro etapas:

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable
  • Escolher variável ​JavaScript como tipo de variável
  • Digite o nome da variável JavaScript
  • Clique em Salvar para salvar sua nova variável.

Primeiro: customerLanguage. Capturaremos o idioma preferencial do cliente tirando-o das configurações do navegador.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable para customerLanguage.
  • Escolha Variável ​JavaScript como tipo de variável.

Configuração do Google Tag Manager

  • Enter the JavaScript Variable name: navigator.language.
    Sua tela agora deve se parecer com:

Configuração do Google Tag Manager

  • Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: pageType. Em cada carregamento de nova página, precisamos capturar o tipo de página.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable para pageType.
  • Escolha Variável ​JavaScript como tipo de variável.
  • Enter the JavaScript Variable name: digitalData.category.siteSection.

Sua tela agora deve se parecer com:
Configuração do Google Tag Manager

  • Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: productCategory. Para cada visualização de produto, precisamos capturar a categoria do produto e enviá-la para a Plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable para productCategory.
  • Escolha Variável ​JavaScript como tipo de variável.
  • Enter the JavaScript Variable name: digitalData.product.category.

Sua tela agora deve se parecer com:
Configuração do Google Tag Manager

  • Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: productName. Para cada visualização de produto, precisamos capturar o nome do produto e enviá-lo para a Plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable para productName.
  • Escolha Variável ​JavaScript como tipo de variável.
  • Enter the JavaScript Variable name: digitalData.product.name.

Sua tela agora deve se parecer com:
Configuração do Google Tag Manager

  • Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: productPrice. Para cada visualização de produto, precisamos capturar o preço do produto e enviá-lo para a Plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable para productPrice.
  • Escolha Javascript ​personalizado como tipo de variável.
  • Digite o javascript personalizado colando o código abaixo:
function() {
  var price = Number(digitalData.product.price);
  return price;
}

Sua tela agora deve se parecer com:
Configuração do Google Tag Manager

  • Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: productImageUrl. Para cada visualização de produto, precisamos capturar o URL da imagem do produto e enviá-lo para a Plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable para productImageUrl.
  • Escolha Variável ​JavaScript como tipo de variável.
  • Enter the JavaScript Variable name: digitalData.product.imageUrl.

Sua tela agora deve se parecer com:
Configuração do Google Tag Manager

  • Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: productInteraction. Para cada visualização de produto, precisamos capturar o tipo de interação (Visualização, Adicionar ao carrinho, Comprar etc.) e enviá-la para a plataforma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable para productInteraction.
  • Escolha Variável ​JavaScript como tipo de variável.
  • Enter the JavaScript Variable name: digitalData.product.interaction.

Sua tela agora deve se parecer com:
Configuração do Google Tag Manager

  • Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Próximo: pageUserAgent. Para cada visualização de página, precisamos capturar o tipo de dispositivo do usuário e o Sistema operacional e enviá-lo para a Plataforma. Usamos o Agente de usuário para obter essas informações. Mais informações sobre o Agente de Usuário podem ser encontradas aqui: https://en.wikipedia.org/wiki/User_agent

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable para pageUserAgent.
  • Escolha Variável ​JavaScript como tipo de variável.
  • Enter the JavaScript Variable name: navigator.userAgent.

Sua tela agora deve se parecer com:
Configuração do Google Tag Manager

  • Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Quase pronto, agora é hora de: pageName. Em cada carregamento de nova página, precisamos capturar o nome da página e enviá-lo para AA, AAM e Platform.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable para pageName.
  • Escolha Variável ​JavaScript como tipo de variável.
  • Enter the JavaScript Variable name: document.title.

Sua tela agora deve se parecer com:
Configuração do Google Tag Manager

  • Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

E a última: pageUrl. Em cada carregamento de nova página, precisamos capturar o URL para enviá-lo para outras soluções.
O URL da página já é uma variável integrada no Google Tag Manager, portanto não precisamos definir isso. Mas, para fins de consistência com outras informações sobre a Plataforma, definiremos pageUrl de qualquer forma.

Na seção Variáveis definidas pelo usuário -, clique em Novo.

  • Renomeie o Untitled Variable para pageUrl.
  • Escolha URL como tipo de variável.

Configuração do Google Tag Manager

Sua tela agora deve se parecer com:
Configuração do Google Tag Manager

  • Clique em Salvar para salvar sua nova variável.

Configuração do Google Tag Manager

Você concluiu a configuração de todas as Variáveis do Google Tag Manager necessárias!

Próxima etapa: 9.4 Recuperar conjuntos de dados da plataforma

Voltar ao módulo 9

Voltar para todos os módulos

Nesta página