Voeg de laadlogica van uw services toe in uw code

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 in te laden.

Hiervoor zijn 2 dingen nodig :

De volledige lijst van vendors in uw configuratie
De scripts van elk vendor ophalen: deze bevinden zich meestal in het beheergedeelte 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 functies om het script van elk vendor in 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"); // Remplacer XXXXX par votre ID GA4
}

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');

  // Modifier la valeur 000000000000000 par votre id
    fbq('init', '000000000000000');
    fbq('track', 'PageView');
}

Laten we nu de gebeurtenissen gebruiken die door de Axeptio SDK worden verzonden om de scripts in 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, dient u nog de Consent Mode v2 in te stellen. U vindt alle informatie over het instellen van de Consent Mode v2 hier: Installatie van Google Consent Mode v2

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

✅ Samenvattend: uw pagina moet het volgende bevatten: een <script> tag met de logica voor het inladen van uw services, gevolgd door het Axeptio-script van uw project.

<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"); // Remplacer XXXXX par votre ID GA4
  }

  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');

    // Modifier la valeur 000000000000000 par votre 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>

<!-- Collez ici le script copié depuis votre projet Axeptio (Intégration > Générale). Il ressemble à ceci : -->
<script>
  window.axeptioSettings = {
    // … contenu propre à votre projet …
  })(document, "script");
</script>