Data Layer

[{"selector":"#anim-d7296853-fbf2-4e1e-9043-e13287bf39f3","keyframes":{"transform":["translate3d(100.00000%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b8ad1bec-924f-44fc-9b40-12d971696b4e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ddd6e836-a47d-4db9-8de9-057b4823ab4c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-4a9f0799-6445-4253-b0fc-823159384366","keyframes":{"transform":["translate3d(-112.38671%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f6b385c9-0d24-40bd-8dd7-7ea18c39a7d3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a11d6aaf-b1bc-4b91-b36f-2f7ab00520df","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-080aaad1-5274-4a94-8385-be34a6a88ec1","keyframes":{"transform":["translate3d(-114.8265%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ae482119-2efd-482a-a161-af5e5f9634ab","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9e45fa21-a46d-433d-b7b9-7fdd183d0da3","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] O guia para dominar a coleta de dados

O que é um Data Layer?

[{"selector":"#anim-52db3a1a-4a1c-490d-9a0a-3544e408adc9","keyframes":{"opacity":[0,1]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7bca68a5-b973-44a2-a68b-35ff0f02ed9c","keyframes":{"opacity":[0,1]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5ec49da2-a8bf-4a42-84ec-06e0285ea5f3","keyframes":{"transform":["translate3d(0px, 318.56366%, 0)","translate3d(0px, 0px, 0)"]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b1a08f02-6c39-439d-8d31-592a4e3bfd18","keyframes":{"transform":["translate3d(-112.5%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-91240b06-370f-41a4-bccb-561ca5f960e4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f45d9642-3494-4b93-997d-3b88629a3653","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-d7b4ddfe-5de2-409f-9801-72792fe4590d","keyframes":{"opacity":[0,1]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7f96baca-4fb5-4ad6-99b4-65b7437e08d6","keyframes":{"transform":["translate3d(0px, 257.49571%, 0)","translate3d(0px, 0px, 0)"]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Data Layer é um objeto em Javascript que armazena temporariamente informações que a página ou aplicativo precisa enviar para outras aplicações como: Google Analytics 4 Google Tag Manager

Para que utilizamos?

[{"selector":"#anim-b72cfc72-b2cf-4613-92bb-0927e37f4a87","keyframes":{"opacity":[0,1]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cafd7dff-6a4b-47f9-9b7b-87e1817c23dd","keyframes":{"opacity":[0,1]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3cc5c167-f4f1-4bf4-9501-6f1e6e450af3","keyframes":{"transform":["translate3d(0px, 178.08431%, 0)","translate3d(0px, 0px, 0)"]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d4ee900d-e246-435b-8d91-fabf39b5882d","keyframes":{"transform":["translate3d(-112.5%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e6fc1571-c9a1-4145-ad5d-9fe10661850f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4387a224-4805-4869-ac14-55f0549d836b","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] • Para ter uma precisão maior de dados ao enviar eventos para plataformas de anúncios ou ferramentas de análise de dados • Criar lógicas para enviar dados ou eventos personalizados

Exemplo

[{"selector":"#anim-ad04b7f1-a0c3-4e8e-8faa-a05241799fc6","keyframes":{"opacity":[0,1]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8d3f04b5-ed7e-4644-a566-d63325bef788","keyframes":{"opacity":[0,1]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3de6200e-d3e9-49b7-bf04-f04c4b9677f9","keyframes":{"transform":["translate3d(0px, 245.92594%, 0)","translate3d(0px, 0px, 0)"]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4689b35b-f3e8-48af-aea6-39ecf2232cc0","keyframes":{"transform":["translate3d(-112.5%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c21806e2-e319-42a5-b006-15973cc084fe","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3ce19392-5e30-4763-a9a3-9f567b8429c8","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] imagine um data layer como uma urna. Vamos criar o seguinte cenário: você visitou uma página de um produto na loja XYZ. Você quer comprar aquele produto, então você clica em adicionar carrinho.

Continuação

[{"selector":"#anim-0150bdb1-a670-4680-b0c6-7123ebb7ac83","keyframes":{"opacity":[0,1]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-025ab2b1-bc9b-40a7-99ea-6105eb5034bb","keyframes":{"opacity":[0,1]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b8b8eddd-1256-4d1d-aa66-86352453c298","keyframes":{"transform":["translate3d(0px, 248.29058%, 0)","translate3d(0px, 0px, 0)"]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-284c1695-9c10-461a-a87e-19b0bd9fdfcf","keyframes":{"transform":["translate3d(-112.5%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-098b158f-755c-4ed6-bd07-f24e525af268","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1049a87e-3132-4355-bbae-a05719f91397","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Após clicar no botão, é como se você colocasse dentro da urna daquela página informações do produto que você adicionou ao seu carrinho, como id, nome do produto, preço e categoria.

Como acessar o data layer e manipular eventos

[{"selector":"#anim-a231066c-fcd2-41ec-af9c-460cb1f2f147","keyframes":{"opacity":[0,1]},"delay":0,"duration":3000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ce3481ef-dd9b-46ae-a5df-5ff97510487f","keyframes":{"opacity":[0,1]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0cb2570f-88ba-4fae-9cd6-9da3f0bdef94","keyframes":{"transform":["translate3d(0px, 385.61022%, 0)","translate3d(0px, 0px, 0)"]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dc0abcbb-b2cf-43b3-9c3b-05a0ed25cac3","keyframes":{"transform":["translate3d(-111.67192%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e9d5af33-a3bd-452d-86b4-de2bdb26c779","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-95639eb1-ba60-4e80-b8e2-18f02421cf52","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-df47482f-b346-4d44-8b01-2c092968cb59","keyframes":{"opacity":[0,1]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c254ca52-dfb9-4f67-b9af-37e96aae1c28","keyframes":{"transform":["translate3d(0px, 601.01015%, 0)","translate3d(0px, 0px, 0)"]},"delay":500,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Para isso fizemos um vídeo e um post explicando com detalhes sobre acessar o data layer e manipulá-lo. Clique no link abaixo Saiba Mais

GOSTOU DO CONTEÚDO E QUER VER MAIS DETALHES?

[{"selector":"#anim-d3a18253-0d2c-46f4-823c-1a1eefb1498f","keyframes":{"transform":["translate3d(-112.38671%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6d20bce1-b8c2-4fa1-b9ad-4f87e8c8adb7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ccca51cc-11e0-40a4-9c20-3148ffb1034c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-72f1e711-6fac-4914-a00f-848e16e0cc20","keyframes":[{"offset":0,"transform":"translate3d(0, -491.11107%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -138.10043288399999%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -46.950218292%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -17.630887413%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -7.661332691999999%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}] [{"selector":"#anim-f164be0c-224b-4848-a6d4-47e20f129741","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-06a0f5c7-86aa-461c-af5f-028a6bd95e20","keyframes":{"transform":["translate3d(0px, 95.82492%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Temos esse post completo para você ou só pesquisar no Youtube pelo Go Prático . Tem vídeos incríveis lá! Aprenda mais