web-dev-qa-db-fra.com

Comment configurer une bannière de consentement pour les cookies Gatsby avec gatsby-plugin-gdpr-cookies

Mon site Web recueille des informations pour Google Analytics, je dois donc inclure une bannière de consentement aux cookies pour que les utilisateurs puissent accepter/refuser.

J'ai vu le plugin gatsby-plugin-gdpr-cookies et j'ai pensé que c'était parfait. J'ai suivi le démarrage et l'ai dans mon fichier de configuration. Cependant, je ne sais pas quoi faire ensuite. Dois-je créer un composant de bannière et tout lier d'une manière ou d'une autre? J'ai essayé de chercher d'autres exemples mais je n'en vois aucun.

Toute aide appréciée, merci.

javascriptreactjscookiesgoogle-analyticsgatsby
3
James Brightman

Depuis le plugin page

Tout d'abord, le plugin vérifie dans quel environnement votre site fonctionne. S'il s'exécute actuellement dans l'un de vos environnements définis, il ajoutera le javascript Facebook Pixel par défaut au de votre site. Il ne sera ni activé ni initialisé par cela.

Par défaut, ce plugin n'enverra aucune donnée à Google ou Facebook pour le rendre conforme au RGPD. L'utilisateur doit d'abord accepter votre politique de cookies. En acceptant cela, vous devez définir deux cookies - gatsby-gdpr-google-analytics et gatsby-gdpr-facebook-pixel. En fonction de l'entrée de l'utilisateur, la valeur de chacun des cookies doit être vraie ou fausse.

Si le cookie gatsby-gdpr-google-analytics est défini sur true, Google Analytics sera initialisé surClientEntry. Il en va de même pour le pixel Facebook.

La page vue sera ensuite suivie sur onRouteUpdate.

Vous devez donc créer un composant de bannière et définir les cookies sur vrai ou faux, cela dépend du choix de l'utilisateur.

1
AskaNor_29

Attention, j'ai eu un problème de suivi via Google Analytics. Après de nombreuses recherches, j'ai trouvé la solution dans reactGaOptions qui est utilisé sous le capot par gatsby-plugin-google-analytics-gdpr. Utilisez l'option sampleRate pour activer le suivi à 100% afin que téléphones mobiles envoie également les demandes à Google. En mode normal, il est réglé sur 1%, donc en bande passante basse, vous perdrez beaucoup d'informations utilisateur.

reactGaOptions: {
  debug: false,
  gaOptions: {
    sampleRate: 100,
    siteSpeedSampleRate: 100
  }
}
0
Mitch