Add the loading logic of your services to 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 the exhaustive list of vendors present in your configuration
Retrieve the scripts related to each vendor: generally, these can be found in the vendor's administration space or documentation.

Let's now move on to 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 each vendor's 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');
}

Now, let's use the events emitted by the Axeptio SDK to load 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 need to configure Consent Mode v2. You can find all the information about 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 is what you should find in the script tag after Axeptio installation:

<script>
  window.axeptioSettings = {
    clientId: "your-axeptio-project-id",
    cookiesVersion: "your-configuration-name",
  };
  (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"); // 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>

Send an event by cookie step to Google Tag Manager

Reduce Direct Traffic with Google Analytics

Reset your visitors' consent

Managing Axeptio consent with your custom Shopify pixel

Dynamic Loading of Configurations via Custom Code