After installing our JavaScript SDK on your website, it's time to dynamically load the scripts associated with each vendor in your configuration.
There are two things necessary to do this:
Have a complete list of the vendors included in your configuration.
Retrieve the scripts associated with each of the vendors. These can usually be found in the administration area or in the vendor documentation.
Now, let's take a look at the integration. Consider a scenario in which we have an Axeptio project with a configuration that includes two vendors:
Google Analytics
Facebook Pixel
Let's start by writing the functions for loading 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 from the Axeptio SDK to load the scripts based on a visitor's choices:
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: How to setup Google Consent Mode v2
The scripts are now loaded dynamically based on your visitors' selections.
✅ To recap, here is what you should find in the script tag after installing Axeptio:
<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>