¡Estoy siguiendo este tutorial sobre cómo implementar el modo de consentimiento de Google para agregar cookies a mi sitio web! Al usar Gatsby.js, no estoy seguro de cómo agregar estos códigos:
<!-- The initial config of Consent Mode --> <script type="text/javascript"> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('consent', 'default', { ad_storage: 'denied', analytics_storage: 'denied', wait_for_update: 1500, }); gtag('set', 'ads_data_redaction', true); </script> <!-- Cookie Information Pop-up Script is required for the SDK --> <script id="CookieConsent" src="https://policy.app.cookieinformation.com/uc.js" data-culture="EN" type="text/javascript"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script> <script type="text/javascript"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'TRACKING-ID'); </script> </head> <body>¿Tiene alguna idea de cómo implementar este código en Gatsby, hay alguna biblioteca o algo que ayude a implementar estos scripts? Gracias
Use este complemento del Gatsby Plugin Hub gatsby-plugin-gdpr-cookies
Le proporcionará lo que está buscando y también puede enumerar en las opciones del complemento qué cookies desea rastrear + un nombre de cookie que desea proporcionar con el que luego puede trabajar desde un nivel de componente al crear una barra de herramientas de cookies como como:
{ resolve: `gatsby-plugin-gdpr-cookies`, options: { googleAnalytics: { trackingId: process.env.UA_TAG, // your UA tag goes here cookieName: `gatsby-gdpr-google-analytics`, anonymize: true, allowAdFeatures: false }, environments: [`production`, `development`] }, },Elimina el uso de tener que inyectar un script en el encabezado del sitio web con React-Helmet, ya que el complemento se encargará de la inyección del script por usted.
Este componente se utiliza como la pantalla inicial que se aplica cuando se carga la página.
import React, { useState, useEffect } from 'react'; import { useLocation } from '@reach/router'; import { initializeAndTrack } from 'gatsby-plugin-gdpr-cookies'; import Cookies from 'js-cookie'; import CookieSettings from './Settings'; const CookieBanner = () => { const [showBanner, setShowBanner] = useState(false); const [showSettings, setShowSettings] = useState(false); const location = useLocation(); // showSettings -> use this state property to open a configuration // window which may open up more information on the cookie(s) being applied useEffect(() => { setShowBanner(Cookies.get('gatsby-gdpr-responded') !== 'true'); }, []) useEffect(() => { initTracking(); }, [Cookies.get('gatsby-gdpr-responded')]) const initTracking = () => { initializeAndTrack(location) } const handleAccept = () => { Cookies.set('gatsby-gdpr-google-analytics', true, { expires: 365 }) handleCloseAll(); } const handleDecline = () => { Cookies.remove('gatsby-gdpr-google-analytics'); handleCloseAll(); } const handleCloseAll = () => { setShowSettings(false); setShowBanner(false); Cookies.set('gatsby-gdpr-responded', true, { expires: 365 }); } return ( // add your component logic here // Take not of the different functions that are available above, like handleAccept / handleDecline / handleCloseAll // handleCloseAll -> if a user declines / closes the banner // handleAccept -> a button to accept by default // handleDecline -> a button to decline the cookies ) } export default CookieBannerEl siguiente componente es más una pantalla de Configuración, que proporciona más información sobre las cookies que se aplican, si toma nota de la importación de Toggle, usamos un interruptor para permitir a los usuarios activar o desactivar específicamente sus cookies en cualquier momento, usted por supuesto, si tiene muchos cumplimientos de GDPR, es posible que desee crear funciones separadas que manejen la eliminación de cookies o una función reutilizable que pase el nombre de la cookie que se eliminará/aplicará.
import React, { useState } from 'react'; import Cookies from 'js-cookie'; import Button from '@components/Button'; import Toggle from '@components/Inputs/Toggle'; const CookieSettings = ({ handleAccept, handleDecline, initTracking, handleCloseAll }) => { const [trackAnalytics, setTrackAnalytics] = useState(Cookies.get('gatsby-gdpr-google-analytics') === 'true') const handleToggle = () => { Cookies.set('gatsby-gdpr-responded', true, { expires: 365 }); setTrackAnalytics((prevState) => { if (prevState) { Cookies.remove('gatsby-gdpr-google-analytics'); } else { Cookies.set('gatsby-gdpr-google-analytics', true, { expires: 365 }) } return !prevState }) initTracking(); } return ( // your JSX code here ) } export default CookieSettings;