- Seção
15031 :: Como funciona a integração com o Google Tag Manager?
O Google Tag Manager (GTM) é o gerenciador de tags gratuito do Google, onde é possível criar as tags javascript da loja.
Clique aqui para mais informações sobre o Google Tag Manager.
Para implantar o GTM, preencha o campo Código do Contêiner em Dados da loja > Serviços e produtos do Google > Google Tag Manager > Código do Contêiner. Para obter este código, acesse o Google Tag Manager, clique na opção Administrador que fica na parte superior e copie o código que fica abaixo do campo CONTÊINER (exemplo: GTM-XXXXXX).
Ao usar este recurso, os códigos javascript do Google Tag Manager assim como os códigos de eventos e informações de Data Layer serão automaticamente incluídos na loja.
O sistema insere automaticamente as informações que poderão ser utilizadas na criação de variáveis (macros) no GTM.
Consumindo informações de eventos e informações do dataLayer
| Página da loja | pageType (página) | event (nome do evento) | dataLayer |
| Home | Home | ViewHome Evento de acesso a página. É disparado quando o usuário acessa a página home da loja. |
dataLayer = [{
"pageType": "Home",
"event": "ViewHome",
"mobile": false
}];
|
| Detalhe do produto | Products | ViewProduct Evento de acesso a página. É disparado quando o usuário acessa a página de detalhe de produto da loja. |
dataLayer = [{
"pageType": "Products",
"event": "ViewProduct",
"mobile": false,
"prodId": 9999999,
"prodSKU": "SKU0001",
"prodName": "Nome do prod",
"prodCat": "Nome da categoria",
"prodPrice": 1700.0,
"prodOriPrice": 1700.0,
"ecommerce": {
"detail": {
"actionField": {"list": "Nome da categoria"},
"products": [{
"name": "Nome do prod",
"id": "9999999",
"price": "1700.0",
"category": "Nome da categoria"
}]
}
}
}];
|
| Carrinho / cesta de produtos | Cart | ViewCart Evento de acesso a página. É disparado quando o usuário acessa a página carrinho da loja. |
dataLayer = [{
"pageType": "Cart",
"event": "ViewCart",
"mobile": false,
"prodId": [888888, 999999],
"prodSKU": ["SKU0001", "SKU0002"],
"prodName": ["Nome do prod 1", "Nome do prod 2"],
"prodCat": ["Nome da cat 1", "Nome da cat 2"],
"prodPrice": [120.0, 340.0],
"prodQty": [1, 2],
"ecommerce": {
"add": {
"products": [
{
"name": "Nome do prod 1",
"id": "888888",
"price": "120.0",
"category": "Nome da categoria 1",
"quantity": 1
},
{
"name": "Nome do prod 2",
"id": "999999",
"price": "340.0",
"category": "Nome da categoria 2",
"quantity": 2
}
]
},
"checkout": {
"actionField": {"step": "Cart"}
}
}
}];
|
| Finalização de pedido | Purchase | Purchase Evento de finalização de compra. É disparado quando o usuário finaliza o pedido, na página final de confirmação. |
dataLayer.push({
"event": "Purchase",
"pageType": "Purchase",
"prodId": [888888, 999999],
"prodSKU": ["SKU0001", "SKU0002"],
"prodName": ["Nome do prod 1", "Nome do prod 2"],
"prodCat": ["Nome da cat 1", "Nome da cat 2"],
"prodPrice": [120.0, 340.0],
"prodQty": [1, 2],
"email" : "email@docliente.com.br",
"orderNumber" : 10123456789,
"orderTotal": 480.0,
"orderShipping": 20.0,
"ecommerce": {
"purchase": {
"actionField": {
"id": "10123456789",
"affiliation": "Nome da loja",
"revenue": "480.0",
"tax":"0.00",
"shipping": "20.0",
"coupon": ""
},
"products": [
{
"name": "Nome do prod 1",
"id": "888888",
"price": "120.0",
"category": "Nome da cat 1",
"quantity": 1
},
{
"name": "Nome do prod 2",
"id": "999999",
"price": "340.0",
"category": "Nome da cat 2",
"quantity": 2
}
]
}
}
});
|
| Passos do checkout | Checkout |
VirtualPageview Eventos que ocorrem em cada passo do login. É disparado a cada interação do usuário com os passos do checkout para finalização de pedido. Valores de eventName de acordo com o passo:
|
dataLayer = [{
"pageType": "Checkout",
"event": "ViewCheckout",
"mobile": false
}];
dataLayer.push({
"event": "VirtualPageview",
"eventName": "OrderLogin",
"eventTitle": "CheckoutOrderLogin",
"urlPage": "/OrderLogin",
"ecommerce": {
"checkout": {
"actionField": {"step": "OrderLogin"}
}
}
});
|
| Páginas Minha conta | MyAccount |
VirtualPageview Eventos que ocorrem no acesso a cada seção da página minha conta. É disparado a cada interação do usuário, ao acessar a seção. Valores de eventName de acordo com a página:
|
dataLayer = [{
"pageType": "MyAccount",
"event": "ViewMyAccount",
"mobile": false,
"email": "email@docliente.com.br"
}];
dataLayer.push({
"event": "VirtualPageview",
"eventName": "MyOrders",
"eventTitle": "MyAccountMyOrders",
"urlPage": "/MyOrders"
});
|
| Autopaginação (AJAX) | ProductsList |
VirtualPageview Evento que ocorre a cada carregamento de página na autopaginação. |
dataLayer.push({
"event": "VirtualPageview",
"eventName": "autoListProducts",
"eventTitle": "Título da página (2)",
"urlPage": "/url-da-pagina"
});
|
| Adicionar produto à cesta (AJAX) | Products / ProductsList |
VirtualPageview Evento que ocorre ao clicar no botão de comprar (quando utilizado o recurso de comprar sem sair da página padrão do sistema "CartOnPage"). |
dataLayer.push({
"event": "VirtualPageview",
"eventName": "addToCart",
"eventTitle": "Título da página",
"urlPage": "/url-da-pagina"
});
|
Como criar uma variável no Google Tag Manager?
Dentro do Google Tag Manager, na Espaço de trabalho, acessar no menu a opção Variáveis e em Variáveis definidas pelo usuário, clicar em NOVA. Segue exemplo:

Desta forma a variável estará criada e poderá ser utilizada para criar acionadores (triggers) e nas tags.
Veja mais detalhes:
|


