Add the logic for loading your services into your code

After installing our Javascript SDK on your website, it's time to dynamically load the scripts associated with each of the vendors present in your configuration.

To do this, 2 things are necessary:

Have a comprehensive list of the vendors present in your configuration
Retrieve the scripts related to each vendor: generally, these can be found in the vendor's admin space or documentation.

Let's now move on to the integration. Let's take the scenario where we have an Axeptio project with a configuration containing two vendors:

Google Analytics
Facebook Pixel

Let's start by writing the functions to load the script for each 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"); // Replace XXXXX with your GA4 ID
}

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');

  // Replace the value 000000000000000 with your id
    fbq('init', '000000000000000');
    fbq('track', 'PageView');
}

Now, let's use the events emitted by the Axeptio SDK to load the scripts based on the choices made by a visitor:

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();
    }
  });
});

Tada!

📌 If you are using Google Analytics 4 and/or Google Ads, you will still need to configure Consent Mode v2. You can find all the information on setting up Consent Mode v2 here: Installing Google Consent Mode v2

The scripts are now loaded dynamically based on the choices made by your visitors.

✅ To summarize, here's what your page should contain: a <script> tag with the logic to load your services, then the Axeptio script from your project.

<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"); // Replace XXXXX with your GA4 ID
  }

  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');

    // Replace the value 000000000000000 with your 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>

<!-- Paste here the script copied from your Axeptio project (Integration > General). It looks like this: -->
<script>
  window.axeptioSettings = {
    // … content specific to your project …
  })(document, "script");
</script>