Info
Content

Clickio CMP Simplified API

By default, all publishers are encouraged to use standard TCF v2.2 API (__tcfapi) to get end-user consent information, such as per-vendor settings, specific purposes consent, etc. This is a future-proof solution if you choose to switch to another consent tool solution, as any IAB certified CMP should support this. But Clickio Consent (CMP) also offers simplified API for publishers' convenience.

By default, __tcfapi is not available for non-EEA users for optimization reasons. If you choose to utilize it or want to have it anyway, please contact our support.

Clickio simplified API

There are several methods available for your convenience, all are present for both EEA and non-EEA users (based on our geo-aware CDN response), but for EEA users all state methods return actual value only after user consent state is determined, so must be used wisely.

An example of API usage can be found on this page.

Base global object

Before calling any methods we must be sure that Clickio Consent (CMP) global object is instantiated correctly:

consentCallback method

Clickio Consent (CMP) allows a specially named function is defined on the page and will call it once the user consent state is determined:

window.__lxG__consent__.consentCallback = function (consentState) {
  if (consentState === null) {
    // consent not applicable, non-eu user
  } else if (consentState === -1) {
    // eu user, consent interface shown, cmp loaded, user has not decided yet, waiting for user consent
  } else if (consentState === 0) {
	// is not reported from Clickio code, may be used for different timeout fallbacks
  } else if (consentState === 1) {
    // eu user, user consented
	// mind consentState === 1 does not mean, that user consented to everything
  }
};

This callback can be combined with the __tcfapi calls for EEA users, it is called once the CMP API is available for usage.

clickioConsentEvent event

The second method to trigger any logic when the consent state is determined is the clickioConsentEvent event dispatched on the html tag:

let consentCallback = function (consentState) {
  if (consentState === null) {
    // consent not applicable, non-eu user
  } else if (consentState === -1) {
    // eu user, consent interface shown, cmp loaded, user has not decided yet, waiting for user consent
  } else if (consentState === 0) {
	// is not reported from Clickio code, may be used for different timeout fallbacks
  } else if (consentState === 1) {
    // eu user, user consented
	// mind consentState === 1 does not mean, that user consented to everything
  }
};

document.documentElement.addEventListener(
  'clickioConsentEvent',
  function(event){
    // event.detail.state will report the consent state
    consentCallback(event.detail.state);
  },
  false
);

The events approach is handy when having multiple entry points for consent-based logic as you may subscribe to it as many times as needed.

For fallback calls (such as timeouts), you may use the following code:

document.documentElement.dispatchEvent(new CustomEvent('clickioConsentEvent', {'detail': {'state': 0}}));
showConsent method

This method is used to trigger a consent popup UI display and is intended only for usage inside "Change privacy settings" link on the page. Do not call it manually unless you are rock-solid sure that you need it. The consent popup UI is shown automatically when/if it is needed on every page where Clickio Consent (CMP) .js is included. Of course, the event on manual call,  the UI will be shown only for EEA users, as the logic is not present in the non-EEA code version.

// show Clickio consent popup
window.__lxG__consent__.showConsent();

Additionally, you can use optional parameters to directly open specific tabs in the consent dialog:

  • showConsent() to open initial screen.

  • showConsent('options-purposes') to open the "Purposes" tab.
  • showConsent('options-li') to open the "Legitimate Interest" tab.
  • showConsent('options-vendors') to open the "Manage Partners" tab.
getState method

This method is used to get user consent state, the same which is passed to consentCallback method and clickioConsentEvent event. The possible values are the same:

let consentState = window.__lxG__consent__.getState();

if (consentState === null) {
  // consent not applicable, non-eu user
} else if (consentState === -1) {
  // eu user, consent interface shown, cmp loaded, user has not decided yet, waiting for user consent
} else if (consentState === 1) {
  // eu user, user consented
  // mind consentState === 1 does not mean, that user consented to everything
}
getGoogleConsentMode method

This method is used to get Google vendor state based on user consent permissions:

let googleConsent = window.__lxG__consent__.getGoogleConsentMode();

if (googleConsent === null) {
  // consent state unknown, user have not consented yet
} else if (googleConsent === 0) {
  // user has declined consent for Google Inc. or not all needed permissions given
} else if (googleConsent === 1) {
  // user has allowed Google non-personalized ads
  // conditions met: https://support.google.com/admanager/answer/9805023?hl=en
  // there is no need to explicitly call googletag.pubads().setRequestNonPersonalizedAds(0)
  // Google gets the information from consent string
} else if (googleConsent === 2) {
  // user has allowed Google personalized ads
  // conditions met: https://support.google.com/admanager/answer/9805023?hl=en
  // there is no need to explicitly call googletag.pubads().setRequestNonPersonalizedAds(1)
  // Google gets the information from consent string  
} else if (googleConsent === 3) {
  // user has allowed Google requests
  // neither of conditions met: https://support.google.com/admanager/answer/9805023?hl=en
  // but there is consent for Google Inc. vendor and Purpose 1
} else if (googleConsent === 4) {
  // Google Limited Ads can be shown
  // neither of previousconditions met: https://support.google.com/admanager/answer/9882911?hl=en
  // there is no consent for Google Inc. vendor or Purpose 1, but legitimate interest not objected
}
getPurposeOneAllowed method

This method is to determine user consent for Purpose 1 exclusively, it can be used to call different tracker pixels, etc.

let purposeOneConsent = window.__lxG__consent__.getPurposeOneAllowed();

if (purposeOneConsent === null) {
  // consent state unknown, user have not consented yet
} else if (purposeOneConsent === 0) {
  // no user consent for Purpose 1
} else if (purposeOneConsent === 1) {
  // user has consented to Purpose 1
}

 

 

Back to top