Guia Completo: Implementar API de CONVERSÃO do Meta utilizando o Tag Manager atualizado 2024

32.85k views4222 WordsCopy TextShare
Canal do Leonardo Pose
Faça uma doação de qualquer valor se esse conteúdo te ajudou de alguma forma. Doe aqui: https://www....
Video Transcript:
Fala galera no vídeo de hoje eu vou mostrar vocês aí como instalar a API de conversão do Facebook atualizado 2024 então se você ainda não se inscreveu aí no canal se inscreve para garantir que você vai receber todos os meus próximos conteúdos sobre traqueamento beleza então vamos nessa bom eh aqui na minha tela a primeira coisa que você vai precisar fazer eh ter instalado aí o seu tag manager no site eu não vou mostrar aqui como é que faz mas é bem simples existem inúmeras formas de fazer ã mas basicamente você precisa instalar esse esse
código aqui no Head da página que você vai querer utilizar e esse outro código aqui no body da página alguns sites T plugin ou integração já Nativa Então você vai precisar adicionar aí só o teu ID do tag Manager ou dependendo de como é a integração vai ter as instruções lá beleza Então vamos lá tag menos instalado no site primeira coisa que você vai fazer é também ter o Google Analytics versão ga4 configurado Ah não necessariamente PR API de conversão o analit precisa est instalado no site a gente vai usar ele aí mais como Point
para poder fazer a comunicação com o Tag Manager mas uma conta do Google Analytics você já precisa ter criado Beleza então eu já tenho aqui a minha conha do Google anal 4 e eu vou mostrar aqui o que que vocês precisam ter do an4 ou fazer para configurar api bom eu vou começar instalando também a o Pixel do Facebook e não teve nenhuma alteração aí então e eu começo sempre por variáveis e daí eu vou criar algumas variáveis aqui que é que eu vou precisar utilizar então eu vou lá em Nova variável a primeira que
eu vou utilizar aqui a G4 ID el ela vai ser do tipo permanente então procurar aqui ó permanente que é basicamente um um campinho de texto e aí aqui eu vou colocar o meu adid 2 A4 Então a gente vai aqui no Google analit com o teu Google analit criado você vai vir aqui em administrador E aí você vem aqui ó fluxo de dados vai ter já o fluxo de dados criado e aí você copia esse ID da métrica aqui beleza ele sempre começa com o g na frente então você copia aí volta lá no
teu tag Manager Cola aqui o Ed da métrica salva beleza Eh outra variável que a gente vai criar também é eh ID Pixel Facebook então ela vai ser do tipo permanente também permanente beleza e aqui a gente vai colar oid do teu Facebook aonde a gente pega essa informação lá no gerenciador de eventos do Facebook e você vai chegar nessa tela aqui né e o AD do Facebook é esse daqui ó algumas contas já tá atualizando para conjunto de dados mas é o Pixel Beleza então você pode copiar aqui do Facebook volta aqui no tag
Manager Cola aqui o AD do Facebook salva beleza e próxima variável que a gente precisa nova a gente vai colocar aqui ó transport URL beleza clica aqui em transp variável vai ser do tipo permanente e daí aqui a gente vai colocar o nosso nosso endereço do Servidor que a gente vai utilizar para api Qual é esse endereço eu utilizo para servidor de API de conversão a stape beleza então se você não sabe como figurar o servidor da stape não entende aí o que que é a stape Eu tenho dois vídeos aqui já no canal explicando
como configurar a stape e explicando aí também as diferenças do pros e contras entre stape e Google Cloud eh então aproveitando que a stape ela tem uma versão gratuita Mas dependendo do volume de dados você for utilizar aí você vai precisar pagar os planos começam em 20 20 e eu também tenho um cupom de 10% aí para você eh utilizar stap tá então só pra gente ser bem bem rápido aqui não perder muito tempo eu não vou explicar como configurar stape porque já tem um vídeo aí explicando eh você vai depois de configurar eh todo
o servidor tudo isso daqui já tenho no vídeo tá então só você assistir aí que você vai entender todo o passo a passo E aí é essa URL aqui que a gente customizou de subdomínio tá então você precisa ter essa url de subdomínio aqui volta aqui no tag Manager Beleza cola aqui salva salva pronto transporte URL agora a gente vai criar mais duas variáveis de cook então eu coloco aqui ó Cook fbc aí Venos aqui em variável Cook primário nome do cook under fbc tudo em minúsculo beleza salva e mais uma variável que vai ser
Cook fbp Ok ah o que que é essas variáveis aqui Essas são as variáveis que contém informação dos de terceiro de dados de navegação eh dados do seu navegador também e o fbc ele vai dizer basicamente Qual é o ID do clique do anúncio que você chegou no teu site o fbp tem informações ali do seu navegador da sua máquina para entregar inteligência pro Facebook então a gente precisa ter esses dois cooks aqui tá fbc salva tranquilo e agora tem mais uma variável que vai ser a nossa variável de event ID beleza ã a gente
vai clicar aqui em Nova o nome eu coloco event ID mesmo ven aqui em variável essa variável ela não é Nativa Tá eu já tenho ela aqui mas ela não é Nativa para você Você vai precisar vir aqui ó descubra mais tipos de variáveis da galeria de modelo E aí coloca na lupinha aqui event ID tá eu uso essa variável aqui ó tem um selinho verdinho que é de reconhecido do tag Manager E aí é só clicar em adicionar no caso o meu já tá adicionado aí vou selecionar aqui un só isso mais nada que
a gente faz aqui salvo Beleza acho que de variável são essas daqu agora em tags bom em tags a gente vai criar aqui a variável do Facebook page viw All Pag Beleza então vamos clicar aqui em novo daí eu coloco aqui FB page Wi vou clicar aqui para adicionar a variável do Facebook tá ela também não é uma variável Nativa a gente vem aqui ó modelos aí procura aqui por [Música] Facebook Vamos escolher essa daqui ó Facebook Pixel Facebook Pixel com verdinho é dessa empresa aqui Facebook ative Beleza não é nenhuma outra desse daqui a
gente vai usar esse modelo aqui adicionar no espaço de trabalho adicionar Oi adicionou aqui o meu modelinho E aí aqui Facebook Pixel ID Qual é o Pixel que eu vou colocar é o da vari que a gente já criou a gente poderia colocar o id aqui do Pixel mas pra gente otimizar o nosso tempo e deixar mais organizado e manutenção também gente a varzinha do Pixel para isso aí clico ali na caixinha ID do Pixel Pronto já vai deixar aqui o ID do pix Beleza vou deixar aqui o stand PW venho aqui em Object properties
vou adicionar aqui duas propriedades que vai ser de fbc e FP em fbc o valor vou adicionar lá a variável que a gente criou de cook fbc fbc fbp perdão vamos adicionar aqui a variável de FB Ok clico aqui em more settings ID a gente vai adicionar aqui a variável de event ID Também cadê event ID Ok Prontinho e agora a gente vai adicionar o acionador pro page viw All pages e salva pronto Pixel do Facebook instalado em todas as páginas Ah daí se você quiser se você quiser ou precisar né instalar o Pixel em
algum evento específico ou alguma página específica que você vai precisar fazer é adicionar um acionador para esse evento ou página eu vou criar um de exemplo aqui para uma página específica acionador por exemplo página de captura Ok E aí vou clicar aqui como que vai ser o me acionador vai disparar em quando a página for exibida opa foi exibida algumas exibições de páginas e aqui eu vou colocar onde page URL contém deixa eu pegar aqui essa página aqui colo aqui qual é a meu URL e salvo beleza salvei meu acionador agora vamos criar um evento
no Pixel para página específica que que vocês podem fazer clicar em novo fazer o mesmo processo que a gente fez aqui de page viw ou para otimizar o tempo ó clica aqui p viw vem nessa nesses três pontinhos aqui ó copiar Pronto ele já copiou toda a configuração do outro e aí aqui a gente coloca o nome do evento que a gente vai disparar eu vou dar duas situações aqui pode usar um evento padrão Ou personalizado Vou colocar aqui captura vai ser um evento personalizado se for um evento padrão aqui em stander ele vai carregar
aqui a lista de todos os eventos padrões do Facebook aí é só selecionar qual evento que que você quer utilizar Ou se você quiser usar um evento customizado você clica aqui Custom e você escreve aqui qual é o nome do evento Então colocar aqui ó captura captura beleza e não não preciso mudar nada Vamos a gente vai utilizar aqui os mesmos parâmetros mesmos event id e fbc fbp também ah e vamos mudar só o acionador então clica aqui no lapizinho do acionador vou tirar o hall pages e vou selecionar o acionador que eu criei que
é de página de captura beleza salvei Prontinho tenho aí mais um acionador que vai te parar pro Facebook um evento de captura quando carregar a minha página de captura e pro pro Pixel do Facebook Esse é o processo tá agora a gente vai preparar o nosso tag Manager para mandar paraa api do Facebook essas informações que que a gente precisa primeiro criar uma nova tag que essa tag aqui vai ser G4 chamo ela de page viw aí vamos clicar aqui configuração de tag aí lá vai ser uma tag do Google qual é o ID da
tag vamos selecionar aqui ó seleciona aqui G4 ID que é a minha o meu ID do Google definições de configuração a gente vai adicionar um parâmetro qual vai ser esse parâmetro ele vai chamar page vi ó send page View send page View eu coloco true porque essa tag já vai mandar pro dia4 um evento de page viw beleza e aqui em acionamento eu vou clicar aqui ó e vou selecionar ao page beleza G4 page viw tranquilo salvei salvei joia se você quiser mandar um evento personalizado pro G4 também eu vou mostrar aqui um exemplo como
eu botei ali captura pro Facebook eu vou botar aqui também pro G4 tá então clique em novo aí eu coloco aqui ga4 captura venho aqui em tags vou selecionar aqui Google analytic vou selecionar Google Analytics evento do dia 4 Opa pronto eh ID da métrica Vou colocar aqui a métrica do G4 G4 ID Prontinho ó já reconheceu aqui que eu tenho uma tag de contêiner configurado então eu não consigo criar só a tag de evento sem ter a aquela tag de page viw aqui eu vou colocar o nome do evento tá então qual é o
nome do evento vai ser um evento personalizado e eu vou chamar ele de captura só isso não vou adicionar nenhum parâmetro acionamento página de captura salvei pronto G4 captura também ok agora a gente vai prepar é é a tag para mandar pra api do Facebook a api do Facebook como Ela utiliza um servidor a gente não consegue mandar do tag Manager web a gente tem que mandar via tag Manager server mas o Tag Manager server precisa ler os dados que estão chegando do web então o que que a gente faz a gente utiliza uma tag
do G4 que vai fazer a ponte entre o Tag Manager web e o Tag Manager server e através do tag Manager server a gente manda pro Facebook api beleza Eh então eu vou criar aqui uma nova tag eu vou chamar essa tag aqui de G4 api e Opa page Vi beleza Eh vou selecionar aqui configurações tag vai ser uma tag de Google Analytics e uma tag de evento do G4 E aí bem parecido aqui com o outro com o processo do do evento normal do dia 4 vou selecionar o ID do dia4 G4 e o
nome do evento essa tag vai mandar um evento de page View e daí existe um padrão de nomenclatura de evento do G4 a gente tem que seguir esse padrão de eventos que é o que o Facebook vai reconhecer e colocar no padrão dele Qual é o padrão do page vi do G4 é page underline View tem que ser exatamente assim minúsculo sem nenhuma alteração e aqui a gente precisa agora adicionar os parâmetros de evento Então a gente vai adicionar os parâmetros de evento pro Facebook tá esses eventos aqui não vão chegar no G4 eh primeiro
parâmetro que a gente vai colocar é o parâmetro de da URL do Servidor então a gente vai colocar aqui ó server com container URL Ó ficou o faginho cheque o cheque Zinho aqui que ele já reconheceu essa tag qual é o valor que a gente coloca clica aqui é o de transporte url que tem a URL do meu servidor de api Beleza vou adicionar mais um parâmetro e vou colocar aqui ó event underline ID esse parâmetro como ele não é é padrão do G4 ele não vai dar o check mas ele é o que eu
vou usar pro Facebook tá então qual é o valor seleciono Cadê event ID vou adicionar mais um parâmetro que vai ser o para esse parâmetro aqui ó já tenho aqui a minha colinha x traço FB traço C trç fbp beleza é que é o que o Facebook pede de padrão para ele reconhecer que é um valor do cookie de fbp e adiciona aqui o valor que vai ser o meu cookie fbp adiciono mais um parâmetro e agora vai ser o meu parâmetro de fbc colocar aqui igual de cima só muda o fbp para fbc vou
marcar aqui o Cook fbc e adiciona um parâmetro e coloco aqui um first part Collection qual é o valor que a gente vai colocar aqui vamos digitar true Beleza então ok já tô com as configurações aqui marcadas não vou marcar selecionar nenhum outro aqui vou colocar só o meu acionador então venho aqui aqui em acionador All pages e salvo beleza Eh agora como eu criei ali o evento de captura também vou mandar para api um evento de captura Qual é o processo seleciona aqui a tag de pay viw que a gente já criou faço uma
cópia dela pra gente não precisar digitar ali tudo novamente vamos mudar só o que a gente precisa tá aqui no caso para esse de captura só seleciona aqui ó nome do evento como é um evento personalizado daí não tem um padrão é o que a gente for colocar e só um ponto de atenção pro pro Pixel e a gente escreveu exatamente dessa forma captura com c maiúsculo então para ele não reconhecer como um evento diferente coloque exatamente da forma que vocês colocaram no Pixel e captura vou manter essas mesmas informações que é pro Facebook e
vou mudar o meu acionador excluo aqui o evento e vou selecionar o meu o meu o meu acionador de captura página de captura salvo prontinho já tenho aqui as minhas configurações de Facebook tanto pro Pixel e se tiver tudo certinho aqui tanto para api também e vamos testar se tá funcionando ISO daqui no web pronto vou clicar aqui em visualizar Vamos colocar aqui a orl conectar Prontinho ó beleza que que a gente precisa fazer para validar se deu tudo certo clica aqui ó lista de presença e ele disparou as tags aqui que a gente configurou
ó tag de pageview tag de captura tag de Page viw do G4 captura do G4 e a tag de api do G4 disparou tudo bonitinho clica aqui na tag de pview do Facebook eh e clica aqui ó no evento do tag Manager que ele disparou essa tag só pra gente validar se os valores estão certinhos então clica aqui ó no três ele automaticamente vai jogar para pra linha do container load ali que foi a que eu configurei marca aqui a opção de mostrar valores e clica aqui ó showmore ele tá mostrando os valores aqui ó
o meu ID do Pixel e meu event ID o fbp veio vazio porque esse daqui é um ID de anúncio como eu não não cheguei através do anúncio não tem nenhum valor e ele já mostrou aqui o meu ID do fbp também e botou aqui um evento standard tudo bonitinho funcionou na página de captura ele mandou a mesma coisa só mudou o nome do evento botou aqui ó captura e porque como eu Já carreguei a página de captura ele mandou também certinho Facebook api carregou aqui ó a URL do meu servidor o Ed do event
Ed fbp fbc foi vazio e o par Collection também foi certinho P beleza e também analisando aqui tudo certinho então beleza Tá funcionando mas ainda não está funcionando PR api do Facebook tá mandando nada PR Facebook prto agora a gente precisa criar umer do tipo server tá umer do T Man do tipo server então a gente vem aqui no teu coner web administrador eh clica no maizinho aqui ó vamos criar um novo contêiner vai ser um container dá um nome para ele né container server testar meu nome só para identificar ele vai ser do tipo
server e vou clicar em criar Prontinho eh como você vai tá usando aí o a stape você precisa marcar aqui como provisionado manualmente se você já tiver um coner server já sabe como cria Então você não vai precisar passar por esse por essa etapa esse ID aqui é o que a gente utiliza para configurar no lá no nicee como eu falei eu tenho um vídeo aí mostrando como fazer toda essa configuração Então posso clicar aqui em fechar e estamos aqui no coner server Beleza agora o que que a gente precisa para fazer oer server receber
informações que o container Web está mandando é basicamente a gente precisa configurar a URL do Servidor que a gente configurou no meu transporte URL Então a gente tem aqui ó variáveis transporte URL certo eu tenho aqui a URL do meu servidor copio aqui essa URL volto aqui no meu coner server venho administrador configurações do coner e clico aqui ó adicionar URL coloco aqui e salvo beleza volto aqui em espaço de trabalho e vou validar só se o meu servidor tá configurado certinho e que não tem nenhum erro clico ali em visualizar tá ele deu um
erro porque eu não configurei esse coner aqui na tape tá então eu vou fazer a configuração aqui para vocês do zero Porque eu já tenho um outro contêiner aqui que tá configurado e na hora de debugar para mostrar para vocês se tá funcionando eu eu carrego ali o meu outro tá então ele não carregou ali porque esse esse ID do meu coner não existe lá no meu na minha stape para essa URL por isso que ele não não consigo carrear carregar mas eu quero mostrar para vocês aqui fazendo do zero o passo a passo beleza
Então vamos lá a gente vai clicar aqui ó variáveis temos aqui a variável de event name e não tá a gente pode criar aqui a variável de pixel e de token mas como a gente só cria uma tag pro Facebook talvez não seja necessário mas se você quiser também pode criar tá que é a variável permanente então vocês V se você preferir criar tá você vai clicar aqui em novo aí aqui você vai colocar ID Pixel Facebook aqui em variáveis vocês vão colocar também permanente e vão colocar o id do Pixel aqui para para para
vocês utilizarem Beleza então lembrando vem aqui no meu gerenciador de eventos copio o meu ID do Pixel aqui no server colo aqui salvo pronto eh pode clicar aqui em novo vocês vão colocar aqui token Pixel beleza configurações variável permanente e aqui vocês vão colocar o token Aonde vocês pegam o token gerenciador de eventos vem aqui em configurações e aí vão procurar aqui a opção de gerar token de conversão tá aqui ó configurações gerar token de acesso clica nesse botãozinho ó copia aqui o token volta no teu GTM server Cola e salva pronto bom depois de
criar aí o Pixel e o token vocês vão vir aqui em configurar e ver se tá habilitado aqui essa variável client name se não tiver é só habilitar a variável fechar agora vocês vão vir em acionadores novo acionador clica bota o nome aqui de G4 eh ele vai ser do tipo personalizado alguns eventos aonde o client name contém G4 tá salva Pronto tem o me acionador agora a gente vai criar tag vem aqui em tag e nova qual vai ser a tag api do Facebook beleza configuraçõ de tag e ela não é uma tag padrão
então vamos vir aqui na galeria na lupinha aqui a gente digita Facebook e temos aqui duas opções tá e eu utilizo tanto essa daqui aqui tanto essa aqui as duas funcionam as duas fazem a mesma coisa então não tem preferência e mas eu vou mostrar aqui usando essa primeira tag aqui que é a do Facebook incubator beleza selecionei vou adicionar o espaço de trabalho pronto joia que que a gente vai colocar aqui agora o Pixel ID que foi que a gente criou é o meu token que a gente vai colocar aqui token test EV nada
Action source nada Vamos habilitar aqui ó ele estender os Cook do Pixel se ele existir esse daqui a gente não habilita a gente não mexe mais em nada na verdade e só vamos colocar aqui o acionador G4 Prontinho salvei e tá feito não precisamos fazer mais nada aqui no GTM server agora o que a gente precisa é testar isso daqui eu vou carregar aqui um outro contêiner que tá configurado na stape só pra gente conseguir testar vocês vão ver que tem as mesmas configurações ó tenho aqui só minha tag do Facebook coloquei aqui o pixel
coloi aqui o meu acionador certinho tá igualzinho o que eu configurei vai clicar em visualizar e Prontinho ó ele já entrou em modo de depuração tá só esperando a gente mandar os eventos para cá tá então debug vamos voltar aqui na minha página do que a gente tá testando ó eu tô aqui em modo depora do Web também se eu carregar a página novamente carregar aqui a página ele vai disparar aqui os eventos no web eh deixa eu só ter certeza que ele realmente disparou e se tudo deu certo vai chegar o evento aqui ó
no server tá eh pode demorar um pouquinho para chegar ou pode ser que ele não carregou aqui também a página de novo então o que que vocês podem fazer volta aqui clica em visualizar novamente que ele vai carregar aqui o a página certinho disparou aqui os eventos beleza a tag que vai mandar pro meu pro meu server é essa aqui ó meu server e ela vai chegar aqui a minha depuração pronto chegou aqui os dois eventos ó o evento de captura que eu passei e o evento de page viw aí como que eu sei se
funcionou certinho ó a gente clica aqui no evento de captura por exemplo e ele disparou a minha tag pro Facebook e tá suc aqui ó como retorno mas para ter certeza a gente clica aqui na tag e e o Facebook precisa retornar o status 200 que é o status de que foi aceito ele aceitou o token e o Pixel certinho ó se a gente clicar aqui vai ter todas as informações que a gente mandou pro Facebook e conforme o que a gente passou tá então a leitura aí é automática ele já ele já recebe o
evento vindo do Web através da tag lá que a gente colocou e já passa aqui ó page viw também tá Su então foi certinho post 200 ó ele já mandou lá pro Facebook o evento de page viw com com os parâmetros que a gente passou e e sem nenhum erro beleza bom Então esse foi o vídeo de como fazer aí a instalação do Facebook do Pixel utilizando api atualizado para 2024 e se você gostou desse vídeo Não esqueça de se inscrever deixar o seu like e comenta aqui no vídeo se você tem alguma dificuldade e
e se você tem aí uma sugestão também para pros PR pros vídeos eu vou fazer aqui para vocês beleza Valeu galera
Copyright © 2025. Made with ♥ in London by YTScribe.com