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() {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
// Replace the value UA-XXXXX-Y with your UA
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
}
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!
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() {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
// Replace the value UA-XXXXX-Y with your UA
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
}
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>