Voeg de laadlogica van uw services toe aan uw code

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

Hiervoor zijn 2 dingen nodig:

Beschik over de volledige lijst met vendors in uw configuratie
Haal de scripts voor elk van de vendors op: deze bevinden zich meestal in de beheerdersruimte of in de documentatie van de vendor.

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

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 gebeurtenissen gebruiken die door de Axeptio SDK worden verzonden om de scripts te laden op basis van de keuzes van een bezoeker:

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

Klaar!

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

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

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

<script>
  window.axeptioSettings = {
    clientId: "uw-axeptio-project-id",
    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>