Opção A — Instalar o pixel via Google Tag Manager

Nesta opção o pixel é instalado no contêiner GTM do hotel/agência, que escuta os eventos que o Motor Niara envia ao data layer e os converte em eventos da Meta.

info

Pré-requisito: o Google Tag Manager já configurado no Motor Niara, com a Versão do datalayer otabuilder_v2. Os nomes de evento abaixo valem para essa versão.
No painel do Niara, deixe o campo Pixel da Meta vazio — senão os eventos serão contados em dobro.

Visão geral do contêiner

Tipo	Nome sugerido	Para que serve
Variável (Constante)	`Meta - Pixel ID`	ID do pixel
Variáveis (Variável da camada de dados)	`DLV - ecommerce.value`, `DLV - ecommerce.currency`, `DLV - ecommerce.transaction_id`, `DLV - ecommerce.items`, `DLV - eventDetails.label`	Ler os dados do evento
Variável (JavaScript personalizado)	`JS - Meta contents`	Converter `ecommerce.items` no formato `contents` da Meta
Tag (HTML personalizado)	`Meta - Base`	Carregar o pixel
Tag (HTML personalizado)	`Meta - PageView`	`PageView` a cada página, inclusive navegação dentro do motor
Tags (HTML personalizado)	`Meta - Search`, `Meta - ViewContent`, `Meta - AddToCart`, `Meta - InitiateCheckout`, `Meta - AddPaymentInfo`, `Meta - Purchase`	Eventos de e-commerce

Passo a passo

1. Variáveis

Em Variáveis > Variáveis definidas pelo usuário > Nova, crie a variável Meta - Pixel ID do tipo Constante com o ID do pixel.

Crie uma Variável da camada de dados para cada campo abaixo (versão da camada de dados: Versão 2):

Nome da variável	Nome da variável da camada de dados
`DLV - ecommerce.value`	`ecommerce.value`
`DLV - ecommerce.currency`	`ecommerce.currency`
`DLV - ecommerce.transaction_id`	`ecommerce.transaction_id`
`DLV - ecommerce.items`	`ecommerce.items`
`DLV - eventDetails.label`	`eventDetails.label`

Crie a variável JS - Meta contents do tipo JavaScript personalizado:

function () {
  var items = {{DLV - ecommerce.items}} || [];
  return items.map(function (item) {
    return { id: String(item.item_id), quantity: item.quantity || 1, item_price: item.price };
  });
}

2. Pixel e PageView

O Motor Niara é uma aplicação de página única: ao navegar entre pesquisa, hotel e checkout o navegador não recarrega a página. Por isso o PageView precisa de um acionador de Alteração no histórico além do carregamento da página.

Crie a tag Meta - Base (HTML personalizado) com o código base do pixel, sem a linha de PageView. Acionador: Initialization - All Pages.

<script>
  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
  n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
  document,'script','https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '{{Meta - Pixel ID}}');
</script>

Crie o acionador Histórico - alteração do tipo Alteração no histórico, disparando em Todas as alterações no histórico.
Crie a tag Meta - PageView (HTML personalizado) com acionadores All Pages e Histórico - alteração. Em Configurações avançadas > Sequenciamento de tags, marque Disparar uma tag antes de Meta - PageView e selecione Meta - Base.
```
<script>
  fbq('track', 'PageView');
</script>
```

3. Eventos de e-commerce

Para cada linha abaixo, crie um acionador do tipo Evento personalizado com o nome de evento indicado (e a condição, quando houver) e uma tag HTML personalizado com o código correspondente. Em todas as tags, configure o Sequenciamento de tags para disparar Meta - Base antes.

Evento do data layer	Condição do acionador	Evento da Meta
`ecommerceChain`	—	`Search`
`ecommerceSearch`	—	`ViewContent`
`ecommerceAddToCart`	—	`AddToCart`
`ecommerceCheckout`	`DLV - eventDetails.label` contém `Passo 1`	`InitiateCheckout`
`ecommerceCheckout`	`DLV - eventDetails.label` contém `Passo 2`	`AddPaymentInfo`
`ecommercePurchase`	—	`Purchase`

caution

O evento ecommerceCheckout é usado em três passos do checkout (dados pessoais, pagamento e clique em confirmar reserva). Sem a condição no eventDetails.label, InitiateCheckout dispara três vezes por reserva. Veja os valores de eventDetails.label em DataLayer.

Código das tags (troque o nome do evento em cada uma):

<script>
  fbq('track', 'AddToCart', {
    value: {{DLV - ecommerce.value}},
    currency: '{{DLV - ecommerce.currency}}',
    contents: {{JS - Meta contents}},
    content_type: 'product'
  });
</script>

Para Search e ViewContent, value e currency podem ser omitidos. Para Purchase, envie também o ID da reserva como eventID — ele permite à Meta descartar duplicatas, inclusive quando a API de Conversões estiver em uso:

<script>
  fbq('track', 'Purchase', {
    value: {{DLV - ecommerce.value}},
    currency: '{{DLV - ecommerce.currency}}',
    contents: {{JS - Meta contents}},
    content_type: 'product',
    order_id: '{{DLV - ecommerce.transaction_id}}'
  }, { eventID: '{{DLV - ecommerce.transaction_id}}' });
</script>

4. Publicar

Use o Visualizar do GTM para conferir os disparos (veja Testar e validar) e publique o contêiner (Enviar > Publicar).

Dados pessoais

Os eventos do data layer trazem dados do usuário (nome, e-mail, telefone, CPF) quando ele está logado ou já preencheu o checkout — veja Parâmetros de dados do usuário. Não envie esses campos em parâmetros de eventos da Meta. Para usar a correspondência avançada da Meta, siga a documentação oficial e configure o consentimento de cookies conforme a política de privacidade do hotel.

Opção A — Instalar o pixel via Google Tag Manager

Visão geral do contêiner​

Passo a passo​

1. Variáveis​

2. Pixel e PageView​

3. Eventos de e-commerce​

4. Publicar​

Dados pessoais​