TCF 2.2 Wait for consent

adtag.js

// example loading adtag.js , 755 is the google vendor id
loadWithConsent(755, [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], function() {
  var adtag = document.createElement('script');
  adtag.type = 'module'; adtag.async = true;
  adtag.src = 'https://studis.h5v.eu/latest/moli.min.mjs';
  var outs = document.getElementsByTagName('script')[0];
  outs.parentNode.insertBefore(adtag, outs);
});

google-analytics.js

// example loading outbrain.js
loadWithConsent(775, [ 1, 3, 4, 7, 9, 10 ], function() {
  // optional - you can also load the gtag.js directly on page
  /*
   * var analytics = document.createElement('script');
   * analytics.type = 'text/javascript'; out.async = true;
   * analytics.src = 'https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x"';
   * var scripts = document.getElementsByTagName('script')[0];
   * scripts.parentNode.insertBefore(analytics, scripts);
   */
  
  gtag('consent', 'update', {'ad_storage': 'granted','analytics_storage': 'granted'});
});

hasAcceptedAll.js

/**
 *
 * @param hasAcceptedAllCallback invoked with true if all vendors have been accepted, false otherwise
 *
 * @see https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework/blob/master/TCFv2/IAB%20Tech%20Lab%20-%20CMP%20API%20v2.md#gettcdata
 */
function hasAcceptedAll(hasAcceptedAllCallback) {
  if (window.__tcfapi) {
    var listener = (tcData) => {
      if (
        tcData.cmpStatus !== "error" && (
          tcData.eventStatus === "useractioncomplete" ||
          tcData.eventStatus === "tcloaded"
        )
      ) {
        
        const hasAcceptedAll = [1,2,3,4,5,6,7,8,9,10].every(purposeId => !!tcData.purpose.consents[purposeId]);
        hasAcceptedAllCallback(hasAcceptedAll);

        // remove listener if consent is available
        if (tcData.listenerId) {
          window.__tcfapi("removeEventListener", 2, function() {
          }, tcData.listenerId);
        }
      }
    };
    window.__tcfapi("addEventListener", 2, listener);
  }
}

loadWithConsent.js

/**
 *
 * @param vendorId the IAB assigned vendor id
 * @param requiredPurposes the IAB purpose IDs 1 to 10
 * @param onConsentCallback invoked when consent is available and granted
 *
 * @see https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework/blob/master/TCFv2/IAB%20Tech%20Lab%20-%20CMP%20API%20v2.md#gettcdata
 */
function loadWithConsent(vendorId, requiredPurposes, onConsentCallback) {
  if (window.__tcfapi) {
    var listener = (tcData) => {
      if (
        tcData.cmpStatus !== "error" && (
          tcData.eventStatus === "useractioncomplete" ||
          tcData.eventStatus === "tcloaded"
        )
      ) {
        // check if consent is required and if the user has given it
        if (
          // gdpr does not apply, so we can always invoke 3rd party code
          !tcData.gdprApplies ||
          // check the specific vendor for consent
          (!!tcData.vendor.consents[vendorId] &&
            // check all required purposes for the vendor
            requiredPurposes.every(function(purposeId) {
              return !!tcData.purpose.consents[purposeId];
            })
          )
        ) {
          onConsentCallback();
        }

        // remove listener if consent is available
        if (tcData.listenerId) {
          window.__tcfapi("removeEventListener", 2, function() {
          }, tcData.listenerId);
        }
      }
    };
    window.__tcfapi("addEventListener", 2, listener);
  }
}

loadWithCustomConsent.js

/**
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 * NOTE: This works ONLY with consentmanager !!!
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 *
 * NOTE: We usually recommend the native consentmanager integration.
 *       See https://help.consentmanager.net/books/cmp/page/how-to-block-third-party-codes-cookies-if-no-consent-is-given
 *
 * @param vendorId the IAB assigned vendor id
 * @param requiredPurposes the IAB purpose IDs 1 to 10
 * @param onConsentCallback invoked when consent is available and granted
 *
 * @see https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework/blob/master/TCFv2/IAB%20Tech%20Lab%20-%20CMP%20API%20v2.md#gettcdata
 * @see https://help.consentmanager.net/books/cmp/page/how-to-block-third-party-codes-cookies-if-no-consent-is-given
 */
function loadWithCustomConsent(vendorId, onConsentCallback) {
  if (window.__tcfapi) {
    var listener = (tcData) => {
      if (
        tcData.cmpStatus !== "error" && (
          tcData.eventStatus === "useractioncomplete" ||
          tcData.eventStatus === "tcloaded"
        )
      ) {
        // check if consent is required and if the user has given it
        if (
          // gdpr does not apply, so we can always invoke 3rd party code
          !tcData.gdprApplies ||
          // check the specific custom vendor for consent
          !!tcData.customVendorConsents[vendorId]
        ) {
          onConsentCallback();
        }

        // remove listener if consent is available
        if (tcData.listenerId) {
          window.__tcfapi("removeEventListener", 2, function() {
          }, tcData.listenerId);
        }
      }
    };
    window.__tcfapi("addEventListener", 2, listener);
  }
}

// example calls
//  MATOMO
loadWithCustomConsent('s974', () => {
  // s974 is Matomo - run matomo code here
});

// INSTAGRAM
loadWithCustomConsent('s14', () => {
  // s14 is Instagram - run stuff here
});

outbrain.js

// example loading outbrain.js
loadWithConsent(164, [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], function() {
  var out = document.createElement('script');
  out.type = 'text/javascript'; out.async = true;
  out.src = 'https://widgets.outbrain.com/outbrain.js';
  var outs = document.getElementsByTagName('script')[0];
  outs.parentNode.insertBefore(out, outs);
});