CMP configuration with mobile / desktop differentiation

Having a different configuration of your CMP on mobile and on desktop can present several benefits, mainly related to the user experience and compliance.

The elements that differ from one device to another (screen size, navigation, accessibility, loading time, etc.) lead us to recommend the creation of distinct configurations per device in order to improve:

• consent rates

• ergonomics

• overall compliance

Here is how to proceed:

Creation of the custom variable “Device Type”

• Variable type: Custom JavaScript variable

• Variable name: Device Type

Code:

function() { var width = window.innerWidth; if (width <= 768) { return 'mobile'; } else { return 'desktop'; } }

Creation of two conditional triggers Create two triggers based on the Device Type variable:

• Mobile Trigger

  • Type: Custom trigger (condition)

  • Condition: Device Type equals mobile

• Desktop Trigger

  • Type: Custom trigger (condition)

  • Condition: Device Type equals desktop

These triggers will then be used to differentiate CMP tags depending on the device.

Creation of a second CMP configuration

• Duplicate the existing CMP configuration.

• Rename the second configuration (example: CMP - Mobile).

• Modify the display of the “Continue without accepting” button:

  • On Desktop: the button keeps its current position.

  • On Mobile: the button must be repositioned at the top right of the CMP (in order to improve visibility and ergonomics).

Association of triggers with CMP configurations

• Associate the Mobile trigger only with the CMP - Mobile tag.

• Associate the Desktop trigger only with the CMP - Desktop tag.

Thus, depending on the device, the right CMP configuration will be displayed with the right ergonomics.

Control CMP display:

• Desktop → “Continue without accepting” button in the same position.

• Mobile → button repositioned at the top right.

Mobile vs Desktop statistics:

Mobile

Desktop