Este guia apresenta a lista de gatilhos a serem utilizados para seus rastreadores do tipo Google Tags e pixel Meta (Facebook) em sua loja (no âmbito do sistema de emissão de bilhetes Infomaniak).

Pré-requisitos

• Contacte o suporte da Infomaniak se desejar ativar esta funcionalidade.
• Esses acionadores devem ser inseridos na seção “HEAD” das opções avançadas da sua loja.

Exemplos de pixel Meta e tags do Google

Consulte a documentação externa para o pixel Meta:

!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','{{URL_4}}');

document.addEventListener("ike_event_view", function( e ) {
  fbq('init', '14085424191xxxxx');
  fbq('track', "PageView");
  fbq('track', 'InitiateCheckout');
});

document.addEventListener("ike_cart_payment_launched", function( e ) {
  fbq('init', '14085424191xxxxx');
  fbq('track', "PageView");
  fbq('track', 'Purchase', {value: e.detail.topaid, currency: e.detail.currency.name});
});

… e para o Google Tag Manager (GTM) + gtag.js:

window.dataLayer = window.dataLayer || [ ];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxx-x');

document.addEventListener("ike_event_view", function( e ) {
  gtag('event', 'view_item', {
    'event_category' : e.detail.name,
    'event_label' : e.detail.date
  });
});

document.addEventListener("ike_cart_add", function( e ) {
  gtag('event', 'add_to_cart');
});

document.addEventListener("ike_cart_confirm", function( ) {
  gtag('event', 'checkout_progress', {
    'event_category' :'valid cart'
  });
});

document.addEventListener("ike_cart_payment_launched", function( e ) {
  gtag('event', 'add_payment_info', {
    'event_category' : 'paiement',
    'event_label' : e.detail.currency.name,
    'value': e.detail.topaid
  });
});

No Google Tag Manager, certifique-se de que o formato das tags seja respeitado:

(view_item|add_cart|add_payment_info)

CSP e seu impacto no rastreamento de conversões

A “Política de Segurança de Conteúdo” (CSP) é uma política de segurança da Web que protege as páginas contra determinados ataques, como o Cross-Site Scripting (XSS) e a injeção de conteúdo malicioso. No entanto, ela também pode bloquear determinados scripts legítimos, como os pixels de rastreamento do Meta ou do Google Tag Manager, impedindo, assim, o bom funcionamento do rastreamento de conversões.

Por que alguns pixels não funcionam?

Se o seu site exibir um erro relacionado à Política de Segurança de Conteúdo (CSP), especialmente no console ou na guia de rede das ferramentas de desenvolvimento do navegador, isso significa que alguns scripts de terceiros — como as tags do Google ou os pixels do Meta (Facebook) — estão sendo bloqueados. Para garantir o bom funcionamento do rastreamento de conversões na sua loja, é necessário adicionar uma exceção específica na configuração CSP do seu site para permitir os recursos usados pelo sistema de bilheteria da Infomaniak.

Principais diretivas CSP que afetam o rastreamento

• script-src: define as fontes permitidas para os scripts.
• img-src: controla as imagens (incluindo as tags <img> usadas para pixels de rastreamento).
• connect-src: gerencia as solicitações de rastreamento enviadas aos servidores das ferramentas de marketing.

Por exemplo, se você usa o Google Tag Manager ou o Facebook Pixel, certifique-se de que sua política CSP autorize explicitamente o carregamento de scripts e o envio de dados para os domínios deles. Aqui está um exemplo de diretivas a serem incluídas em sua CSP, a serem adaptadas de acordo com sua configuração:

script-src 'self' {{URL_7}} {{URL_8}} {{URL_9}}
img-src 'self' {{URL_10}} {{URL_11}}
connect-src 'self' {{URL_12}} {{URL_13}}

O Google fornece um guia detalhado sobre a configuração da CSP compatível com suas ferramentas de rastreamento.

Verifique também se o seu sistema de gestão de segurança (firewall de aplicação, CDN, CMS) não está a bloquear estes recursos e aplique os ajustes necessários para permitir o correto acionamento dos eventos de rastreamento.

Se a sua política de segurança de conteúdo (CSP) for demasiado restritiva, ela pode impedir o carregamento de scripts de terceiros, como:

• Pixel do Facebook (connect.facebook.net)
• Google Tag Manager (GTM) (www.googletagmanager.com)
• Google Analytics (www.google-analytics.com)

Erros visíveis na consola do desenvolvedor (Ferramentas de desenvolvimento do navegador):

Refused to load the script '{{URL_15}}'
because it violates the following Content Security Policy directive: "script-src 'self'"

• Ausência de dados no Google Analytics ou no Facebook Ads Manager.
• Falha ao acionar os eventos definidos no GTM.

Quando a CSP bloqueia esses recursos, eles não podem coletar dados sobre os visitantes ou registrar eventos de conversão.

Lista completa dos gatilhos

Página inicial:

gatilho: ike_home_view
Dados: nenhum

document.addEventListener("ike_home_view", function(e) {
  //send to your tracking tool
});

Página de evento:

Página de um evento com várias datas
gatilho: ike_event_view
Dados: detail.name

document.addEventListener("ike_event_view", function(e) {
  console.log(e.detail.name); 
  //send to your tracking tool
});

Página de data:

Página com a data de um evento
acionador: ike_date_view
Dados: detail.name, detail.date

document.addEventListener("ike_date_view", function(e) {
  console.log(e.detail.name, e.detail.date);
  //send to your tracking tool
});

Página de passagem:

Página de uma categoria de passagem
gatilho: ike_abo_view
Dados: detail.name

document.addEventListener("ike_abo_view", function(e) {
  console.log(e.detail.name);
  //send to your tracking tool
});

Página de seleção de planos:

Página para selecionar as datas dos planos
gatilho: ike_abo_selection
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_abo_selection", function(e) {
  console.log(e.detail.name, e.detail.date);
  //send to your tracking tool
});

Login do usuário:

Disparado após o login bem-sucedido
gatilho: ike_user_login
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_user_login", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Desconexão do usuário:

gatilho: ike_user_logout
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_user_logout", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Adicionar ao carrinho:

Ativado quando um item é adicionado ao carrinho.

gatilho: ike_cart_add
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_cart_add", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página do carrinho:

gatilho: ike_cart_view
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_cart_view", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Atualização do carrinho:

Ativado quando um item do carrinho é atualizado

gatilho: ike_cart_update
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_cart_update", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Carrinho vazio:

Ativado quando o botão "Esvaziar" é pressionado.

gatilho: ike_cart_empty
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_cart_empty", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Confirmação do carrinho:

Ativado quando o botão de confirmação é pressionado

gatilho: ike_cart_confirm
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_cart_confirm", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página de entrega do carrinho de compras:

gatilho: ike_cart_delivery_view
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_cart_delivery_view", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página do formulário do carrinho:

gatilho: ike_cart_form_view
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_cart_form_view", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página de pagamento com cartão:

gatilho: ike_cart_payment_view
Dados: detalhes (detalhes do carrinho com o método de pagamento selecionado)

document.addEventListener("ike_cart_payment_view", function(e) {
  console.log(e.detail);
  //send to your tracking tool 
});

Pagamento do carrinho alterado:

gatilho: ike_cart_payment_changed
Dados: detail.path

document.addEventListener("ike_cart_payment_changed", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Pagamento do carrinho iniciado:

gatilho: ike_cart_payment_launched
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_cart_payment_launched", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página de sucesso do pagamento com cartão:

gatilho: ike_cart_payment_success
Dados: detalhes (detalhes do carrinho)

document.addEventListener("ike_cart_payment_success", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Exclusão de item do carrinho:

gatilho: ike_cart_delete
Dados: detalhes (carrinho anterior e carrinho atual)

document.addEventListener("ike_cart_delete", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página alterada:

gatilho: ike_page_changed
Dados: detail.path

document.addEventListener("ike_page_changed", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});