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

Depois de instalar nosso SDK Javascript em seu site, é hora de carregar dinamicamente os scripts associados a cada um dos vendors presentes em sua configuração.

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

Ter a lista completa dos vendors presentes em 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.

Passemos agora para a integração. Vamos considerar o cenário em que temos um projeto Axeptio com uma configuração contendo dois vendors:

Google analytics
Facebook Pixel

Comecemos escrevendo 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"); // Remplacer XXXXX par votre 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');

  // Modifier la valeur 000000000000000 par votre id
    fbq('init', '000000000000000');
    fbq('track', 'PageView');
}

Agora, usemos os eventos emitidos pelo SDK Axeptio para carregar os scripts conforme 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ê estiver usando Google Analytics 4 e/ou Google Ads, ainda restará 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 por seus visitantes.

✅ Para resumir, aqui está o que você deve encontrar na tag script após a instalação do Axeptio:

<script>
  window.axeptioSettings = {
    clientId: "votre-project-id-axeptio",
    cookiesVersion: "nom-de-votre-configuration",
  };
  (function (d, s) {
    var t = d.getElementsByTagName(s)[0],
    e = d.createElement(s);
    e.async = true;
    e.src = "//static.axept.io/sdk.js";
    t.parentNode.insertBefore(e, t);
  })(document, "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"); // Remplacer XXXXX par votre 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');

    // Modifier la valeur 000000000000000 par votre 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>