Adicione a lógica de carregamento de seus serviços em seu código

Após instalar nosso SDK Javascript no seu site, é hora de carregar dinamicamente os scripts associados a cada um dos vendors presentes na sua configuração.

Para isso, 2 coisas são necessárias:

Ter a lista completa dos vendors presentes na sua configuração
Recuperar os scripts relativos a cada um dos vendors: geralmente, estes se encontram no espaço de administração ou na documentação do vendor.

Vamos agora à integração. Consideremos o caso de um projeto Axeptio com uma configuração contendo dois vendors:

Google Analytics
Facebook Pixel

Vamos começar a escrever as funções que permitem carregar o script de cada vendor:

function loadGoogleAnalyticsTag() {
 const t = document.getElementsByTagName("script")[0];
 const e = document.createElement("script");
 e.async = true;
 e.src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXX";
 t.parentNode.insertBefore(e, t);
 window.dataLayer = window.dataLayer || [];
 function gtag() {
  dataLayer.push(arguments);
 }

 gtag("js", new Date());
 gtag("config", "XXXXXXXXXXX"); // Substitua XXXXX por seu ID GA4
}

function loadFacebookPixelTag() {
    !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');

  // Substitua o valor 000000000000000 pelo seu id
    fbq('init', '000000000000000');
    fbq('track', 'PageView');
}

Agora, vamos usar os eventos emitidos pelo SDK Axeptio para carregar os scripts de acordo com as escolhas feitas por um visitante:

void 0 === window._axcb && (window._axcb = []);
window._axcb.push(function (axeptio) {
  axeptio.on("cookies:complete", function (choices) {
    if (choices.google_analytics) {
      loadGoogleAnalyticsTag();
    }
    if (choices.facebook_pixel) {
      loadFacebookPixelTag();
    }
  });
});

Pronto!

📌 Se você usa Google Analytics 4 e/ou Google Ads, ainda será necessário configurar o Consent Mode v2. Você encontrará todas as informações sobre a implementação do Consent Mode v2 aqui: Instalação do Google Consent Mode v2

Os scripts agora são carregados dinamicamente de acordo com as escolhas feitas pelos seus visitantes.

✅ Para resumir, aqui está o que sua página deve conter: uma tag <script> com a lógica de carregamento de seus serviços, seguida pelo script Axeptio do seu projeto.

<script>
  function loadGoogleAnalyticsTag() {
    const t = document.getElementsByTagName("script")[0];
    const e = document.createElement("script");
    e.async = true;
    e.src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXX";
    t.parentNode.insertBefore(e, t);
    window.dataLayer = window.dataLayer || [];
    function gtag() {
     dataLayer.push(arguments);
    }

    gtag("js", new Date());
    gtag("config", "XXXXXXXXXXX"); // Substitua XXXXX por seu ID GA4
  }

  function loadFacebookPixelTag() {
    !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');

    // Substitua o valor 000000000000000 pelo seu id
    fbq('init', '000000000000000');
    fbq('track', 'PageView');
  }

  void 0 === window._axcb && (window._axcb = []);
  window._axcb.push(function (axeptio) {
    axeptio.on("cookies:complete", function (choices) {
      if (choices.google_analytics) {
        loadGoogleAnalyticsTag();
      }
      if (choices.facebook_pixel) {
        loadFacebookPixelTag();
      }
    });
  });
</script>

<!-- Cole aqui o script copiado do seu projeto Axeptio (Integração > Geral). Ele se parece com isso: -->
<script>
  window.axeptioSettings = {
    // … conteúdo específico do seu projeto …
  })(document, "script");
</script>