# 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;\
&#x20; if (width <= 768) {\
&#x20;   return 'mobile';\
&#x20; } else {\
&#x20;   return 'desktop';\
&#x20; }\
}

### 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 :**&#x20;

**Mobile**

<figure><img src="https://2240931758-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUspPnkTFMlMDdGxvAb-2584506019%2Fuploads%2FZnoKNvAklY76t4ZUXsFo%2Fimage%20(3).png?alt=media&#x26;token=169bd15f-a78f-4743-92d1-3b57cbcfa6d7" alt=""><figcaption></figcaption></figure>

**Desktop**

<figure><img src="https://2240931758-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUspPnkTFMlMDdGxvAb-2584506019%2Fuploads%2FQLanspRSBdngpNJHOaku%2Fimage%20(4).png?alt=media&#x26;token=b4496172-c4ee-486f-8449-51789131eb99" alt=""><figcaption></figcaption></figure>