Ne pas charger l'encart "Avez-vous trouvé la réponse à votre question ?" si matomo n'est pas lancé

[carolineBda]

Aujourd'hui si l'utilisateur a un adblock, on lui laisse entrer son feedback sur le site mais derrière rien n'est envoyé !

• [x] Le faire que sur le DSFR
• [x] Prévoir un message si l'utilisateur a un adblock quand il répond oui/non

[maxgfr]

Pour information, @gary-van-woerkens a réussi à contourner le adblock via un proxy : https://github.com/SocialGouv/support/issues/653#issuecomment-2414466598

Est-ce nécessaire de mettre cela en place ?

[maxgfr]

D'autant plus si on implémente comme ce que nous a partagé Gary

[maxgfr]

L'approche utilisé par les détecteurs d'adblocker est de lancer un call sur un serveur de tracking Google. Sous le capot, cela fait ça :

import { useEffect, useState } from "react";

export const useDetectAdBlock = () => {
  const [adBlockDetected, setAdBlockDetected] = useState(false);

  useEffect(() => {
    // grab a domain from https://github1s.com/gorhill/uBlock/blob/master/docs/tests/hostname-pool.js
    const url = "https://www3.doubleclick.net";
    fetch(url, {
      method: "HEAD",
      mode: "no-cors",
      cache: "no-store",
    })
      .then(({ redirected }) => {
        if (redirected) setAdBlockDetected(true);
      })
      .catch(() => {
        setAdBlockDetected(true);
      });
  }, []);

  return adBlockDetected;
};

Premièrement, on doit, donc modifier nos CSP en ajoutant :

https://www3.doubleclick.net https://marketingplatform.google.com/about/enterprise/

Deuxiement, cela signifie qu'à chaque page, on lance une requête au serveur Google de la sorte pour tester si cela fonctionne ou non...

Donc à chaque page où on a ce bandeau Avez-vous trouvé la réponse, on fait un call supplémentaire....

Ce n'est pas viable pour moi....

Pour moi, il serait plus intéressant de mettre le proxy que propose @gary-van-woerkens ou alors mettre un proxy sur ce composant de sorte que ce soit le serveur qui envoie la réponse du questionnaire

[maxgfr]

Il y a ce repository qui propose différente approche : https://github.com/arjun-menon/multi-adblock-detect

Cela revient au même, car on a deux approches globalement :

1) Utilisation du fetch sur un provider publicitaire 2) Chargement d'un script publicitaire localement, cela évite de faire un call, mais la contrepartie est d'avoir du code dans notre folder public

[maxgfr]

J'ai trouvé une approche en me basant sur celle plus haut qui permet d'utiliser notre matomo afin d'éviter de call la régie publicitaire de Google pour savoir si le call est bloqué ou non

Même pas besoin d'une librairie externe, la PR est dispo là : https://github.com/SocialGouv/code-du-travail-numerique/pull/6227

L'approche est bien meilleure, c'est clean et je pense que là oui ça peut valoir le coup de l'intégrer de la sorte :)