Voeg de laadlogica van uw services in uw code in

Na het installeren van onze Javascript SDK op uw website, is het tijd om de scripts die aan elk van de vendors in uw configuratie zijn gekoppeld, dynamisch te laden.

Hiervoor zijn 2 dingen nodig:

De volledige lijst van vendors in uw configuratie hebben
De scripts voor elk van de vendors ophalen: deze bevinden zich meestal in de beheerdersruimte of in de documentatie van de vendor.

Laten we nu overgaan tot de integratie. Stel je voor dat we een Axeptio-project hebben met een configuratie die twee vendors bevat:

Google Analytics
Facebook Pixel

Laten we beginnen met het schrijven van de functies om het script van elke vendor te laden:

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"); // Vervang XXXXX door uw 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');

  // Vervang de waarde 000000000000000 door uw ID
    fbq('init', '000000000000000');
    fbq('track', 'PageView');
}

Laten we nu de events gebruiken die door de Axeptio SDK worden geëmitteerd om de scripts in te laden op basis van de keuzes die een bezoeker maakt:

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!

📌 Als u Google Analytics 4 en/of Google Ads gebruikt, moet u nog de Consent Mode v2 configureren. Alle informatie over de implementatie van Consent Mode v2 vindt u hier: Installatie van Google Consent Mode v2

De scripts worden nu dynamisch geladen op basis van de keuzes die uw bezoekers maken.

✅ Ter samenvatting, hier is wat u na de installatie van Axeptio in de scripttag moet terugvinden:

<script>
  window.axeptioSettings = {
    clientId: "uw-project-id-axeptio",
    cookiesVersion: "naam-van-uw-configuratie",
  };
  (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"); // Vervang XXXXX door uw 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');

    // Vervang de waarde 000000000000000 door uw 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>