# Configuration CMP avec différenciation mobile / desktop

Avoir une configuration différente de votre **CMP** sur **mobile** et sur **desktop** peut présenter plusieurs intérêts, principalement liés à l’**expérience utilisateur** et à la **conformité.**\
\
Les éléments qui différent d'un device à l'autre (taille de l'écran, navigation, accessibilité, temps de chargement, etc.) nous poussent à vous recommander la création de **configurations distinctes par support** afin d'améliorer:\
\- les taux de consentement\
\- l'ergonomie\
\- la conformité globale\
\
Voici comment procéder :

### Création de la variable personnalisée “Device Type”

* **Type de variable** : Variable JavaScript personnalisée
* **Nom de la variable** : `Device Type`

Code :

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

### Création de deux déclencheurs conditionnels

Créer deux déclencheurs basés sur la variable `Device Type` :

1. **Déclencheur Mobile**
   * Type : Déclencheur personnalisé (condition)
   * Condition : `Device Type` **égale** `mobile`
2. **Déclencheur Desktop**
   * Type : Déclencheur personnalisé (condition)
   * Condition : `Device Type` **égale** `desktop`

Ces déclencheurs serviront ensuite pour différencier les balises CMP selon le device.

### Création d’une deuxième configuration CMP

1. **Dupliquer la configuration CMP existante.**
2. **Renommer la deuxième configuration** (exemple : `CMP - Mobile`).
3. **Modifier l’affichage du bouton “Continuer sans accepter”** :
   * Sur **Desktop** : le bouton conserve son emplacement actuel.
   * Sur **Mobile** : le bouton doit être repositionné en **haut à droite** de la CMP (afin d’améliorer la visibilité et l’ergonomie).

### Association des déclencheurs aux configurations CMP

* Associer le déclencheur **Mobile** uniquement à la balise `CMP - Mobile`.
* Associer le déclencheur **Desktop** uniquement à la balise `CMP - Desktop`.

Ainsi, en fonction du device, la bonne configuration de CMP s’affichera avec la bonne ergonomie.

**Contrôler l’affichage CMP** :

* Desktop → bouton “Continuer sans accepter” au même emplacement.
* Mobile → bouton repositionné en haut à droite.

### **Statistiques Mobile vs Desktop :**

**Mobile**

<figure><img src="/files/Jckyw4YfwmGC9C1ucqSn" alt=""><figcaption></figcaption></figure>

**Desktop**

<figure><img src="/files/jvDpUe7ir5MqCs0xKbbf" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cmp.docs.sirdata.net/fonctionnalites-avancees/configuration-cmp-avec-differenciation-mobile-desktop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.