GPP Documentation

General Information

Configuration

1. Implementation

a) Version 2

In the regular version 2 script, please add the following data attribute:

Example of the full script:

<script
  id="usercentrics-cmp"
  data-settings-id="XXXXXXXX"
  src="https://app.usercentrics.eu/browser-ui/latest/loader.js"
  data-gpp-enabled
></script>

b) Version 3

In addition to the version 3 script, please add the GPP stub:

<!-- if TCF is enabled -->
<script src="https://web.cmp.usercentrics.eu/tcf/stub.js"></script>

<!-- if GPP is enabled -->
<script src="https://web.cmp.usercentrics.eu/gpp/stub.js"></script>

Examples of the full script:

CCPA (only GPP stub is required if GPP and CCPA are enabled):

<!-- if GPP is enabled -->
<script src="https://web.cmp.usercentrics.eu/gpp/stub.js"></script>
<script
  id="usercentrics-cmp"
  data-settings-id="XXXXXXXX"
  src="https://web.cmp.usercentrics.eu/ui/loader.js"
  async
></script>

TCF (both GPP & TCF stubs are required if GPP & TCF are enabled at the same time):

<!-- if TCF is enabled -->
<script src="https://web.cmp.usercentrics.eu/tcf/stub.js"></script>
<!-- if GPP is enabled -->
<script src="https://web.cmp.usercentrics.eu/gpp/stub.js"></script>
<script
  id="usercentrics-cmp"
  data-settings-id="XXXXXXXX"
  src="https://web.cmp.usercentrics.eu/ui/loader.js"
  async
></script>

2. Useful Functions:

For a more deep understanding of the GPP functions, we recommend checking the official documentation.

The following functions are available and have the same signature between version 2 and 3:

• ping

• addEventListener

• removeEventListener

• hasSection

• getSection

• getField

Currently we only support TCF and CCPA (uspv1), so whenever a version is required, please use uspv1 (for CCPA) or tcfeuv2 (for TCF)

a) ping

The ping command can be used to determine the state of the CMP.

window.__gpp('ping', (data, success) => {
  console.log('ping', data, success);
});

b) addEventListener

The addEventListener command can be used to define a callback function that can be used to detect changes in the CMP. The callback shall be called with an EventListener object immediately. The GPP script will then call the callback function and return a new EventListener object every time the CMP detects a change. A value of false will be passed as the argument to the success parameter if the CMP fails to process this command.

window.__gpp('addEventListener', (data, success) => {
  console.log('addEventListener', data, success);
});

the addEventListener call will return the EventListener object on the data property from the callback.

EventListener = {
  eventName : String, // for possible values see events below
  listenerId : Number, // Registered ID of the listener
  data: mixed, // data supplied by the underlying API.
  pingData : object // see PingReturn
}

The listenerId can be helpful in the case you need to call the removeEventListener function.

c) removeEventListener

The removeEventListener command can be used to remove an existing listener. The callback shall be called with false as the argument for the data parameter if the listener could not be removed (e.g the CMP cannot find a registered listener corresponding to listenerId). A value of false will be passed as the argument to the success parameter if the CMP fails to process the command.

window.__gpp('removeEventListener', (data, success) => {
    console.log('removeEventListener', data, success);
  }, 1000 // The listenerId that you want to remove
);

d) hasSection

The hasSection command can be used to detect if the CMP has generated a section of a certain specification. The callback shall be called with true as the argument for the data parameter if the CMP has generated a section for the requested API prefix string. The data parameter may be null when the CMP is not yet loaded. A value of false will be pressed as the argument to the success parameter if the CMP fails to process this command.

window.__gpp('hasSection', (data, success) => {
    console.log('hasSection', data, success);
  }, 'uspv1' // Or 'tcfeuv2' for TCF
);

e) getSection

The getSection command can be used to receive the (parsed) representation of a section of a certain specification. The callback shall be called with the (parsed) representation as the argument for the data parameter. The (parsed) representation of a section is an array of objects, where each object represents one sub-section of this section in the order that is given by the section specification.

window.__gpp('getSection', (data, success) => {
    console.log('getSection', data, success);
  }, 'uspv1' // Or 'tcfeuv2' for TCF
);

f) getField

The getField command can be used to receive a specific field out of a certain section

window.__gpp('getField', (data, success) => {
    console.log('getField', data, success);
  }, 'uspv1.Version' // Or the specific field
 );