-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #32 from sunnyfeijen/v4.0.0-alpha.4
v4.0 | Update docs
- Loading branch information
Showing
6 changed files
with
348 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| # Gtag setup | ||
|
|
||
| Setup with use of Gtag & [@freshheads/analytics-essentials](https://github.com/freshheads/analytics-essentials) | ||
|
|
||
| #### **`components/GA4Loader.tsx`** | ||
|
|
||
| Add a component to load GA4 within the `<CookieGuardProvider />` so we have access to the analytics cookies. | ||
|
|
||
| ```jsx | ||
| import { | ||
| CookieConsentOptions, | ||
| CookieConsentValues, | ||
| LoadGA4, | ||
| } from '@freshheads/analytics-essentials'; | ||
| import { CookieCategorySettings, useCookies } from '@freshheads/cookie-guard'; | ||
|
|
||
| export const formatCookiesForGA = ( | ||
| cookieSettings: CookieCategorySettings | ||
| ): CookieConsentOptions | undefined => { | ||
| // formats cookies from Cookie Guard | ||
| if (!cookieSettings) return undefined; | ||
|
|
||
| return { | ||
| ad_storage: | ||
| cookieSettings.marketing === true | ||
| ? CookieConsentValues.GRANTED | ||
| : CookieConsentValues.DENIED, | ||
| analytics_storage: | ||
| cookieSettings.analytics === true | ||
| ? CookieConsentValues.GRANTED | ||
| : CookieConsentValues.DENIED, | ||
| functionality_storage: | ||
| cookieSettings.functional === true | ||
| ? CookieConsentValues.GRANTED | ||
| : CookieConsentValues.DENIED, | ||
| personalization_storage: | ||
| cookieSettings.marketing === true | ||
| ? CookieConsentValues.GRANTED | ||
| : CookieConsentValues.DENIED, | ||
| }; | ||
| }; | ||
|
|
||
| const GA4Loader = () => { | ||
| const { cookieSettings } = useCookies(); | ||
|
|
||
| return ( | ||
| <> | ||
| {process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID && ( | ||
| <LoadGA4 | ||
| measurementID={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID} | ||
| defaultConsent={formatCookiesForGA(cookieSettings)} // set default consent based on cookies that are already set | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| #### **`app.tsx`** | ||
|
|
||
| ```jsx | ||
| import { pushGaConsent } from '@freshheads/analytics-essentials'; | ||
| import { | ||
| CookieBanner, | ||
| CookieCategorySettings, | ||
| CookieGuardProvider, | ||
| } from '@freshheads/cookie-guard'; | ||
| import GA4Loader, { formatCookiesForGA } from '@/components/GA4Loader'; | ||
|
|
||
| const App = () => { | ||
| const onCookiesChanged = (cookieSettings: CookieCategorySettings) => { | ||
| if (!cookieSettings) return; | ||
| const formattedCookies = formatCookiesForGA(cookieSettings); | ||
| if (!formattedCookies) return; | ||
| pushGaConsent(formattedCookies); | ||
| }; | ||
|
|
||
| return ( | ||
| <CookieGuardProvider onCookieSettingsChange={onCookiesChanged}> | ||
| <GA4Loader /> | ||
| {/** your app components **/} | ||
| <CookieBanner | ||
| title="Onze site maakt gebruik van cookies." | ||
| description="Wij gebruiken cookies voor de werking van de website, analyse en verbetering en marketingdoeleinden." | ||
| acceptAllLabel="Alle cookies accepteren" | ||
| saveLabel="Opslaan" | ||
| requiredLabel="Noodzakelijke cookies" | ||
| functionalLabel="Functionele cookies" | ||
| analyticsLabel="Analytische cookies" | ||
| marketingLabel="Marketing cookies" | ||
| /> | ||
| </CookieGuardProvider> | ||
| ); | ||
| }; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| # Tag Manager setup | ||
|
|
||
| Setup with use of Tag Manager & [@freshheads/analytics-essentials](https://github.com/freshheads/analytics-essentials) | ||
|
|
||
| #### **`app.tsx`** | ||
|
|
||
| ```jsx | ||
| import { | ||
| CookieBanner, | ||
| CookieCategorySettings, | ||
| CookieGuardProvider, | ||
| } from '@freshheads/cookie-guard'; | ||
| import { | ||
| EventTypes, | ||
| LoadTagManager, | ||
| pushDataLayerEvent, | ||
| } from '@freshheads/analytics-essentials'; | ||
|
|
||
| const App = () => { | ||
| const onCookiesChanged = (cookieSettings: CookieCategorySettings) => { | ||
| if (!cookieSettings) return; | ||
|
|
||
| pushDataLayerEvent({ | ||
| type: EventTypes.CUSTOM, | ||
| name: 'cookie_settings_changed', | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| {process.env.NEXT_PUBLIC_GTM_ID && ( | ||
| <LoadTagManager | ||
| measurementID={process.env.NEXT_PUBLIC_GTM_ID} | ||
| /> | ||
| )} | ||
| <CookieGuardProvider onCookieSettingsChange={onCookiesChanged}> | ||
| {/** your app components **/} | ||
| <CookieBanner | ||
| title="Onze site maakt gebruik van cookies." | ||
| description="Wij gebruiken cookies voor de werking van de website, analyse en verbetering en marketingdoeleinden." | ||
| acceptAllLabel="Alle cookies accepteren" | ||
| saveLabel="Opslaan" | ||
| requiredLabel="Noodzakelijke cookies" | ||
| functionalLabel="Functionele cookies" | ||
| analyticsLabel="Analytische cookies" | ||
| marketingLabel="Marketing cookies" | ||
| /> | ||
| </CookieGuardProvider> | ||
| </> | ||
| ); | ||
| }; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| /node_modules | ||
|
|
||
| package-lock.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import { | ||
| Button, | ||
| Checkbox, | ||
| HStack, | ||
| Modal, | ||
| ModalBody, | ||
| ModalContent, | ||
| ModalHeader, | ||
| ModalOverlay, | ||
| Text, | ||
| VStack, | ||
| } from '@chakra-ui/react'; | ||
| import { useCookies } from '@freshheads/cookie-guard'; | ||
| import React from 'react'; | ||
| import { FC, useEffect, useState } from 'react'; | ||
|
|
||
| const CookieBannerPrimitive: FC = () => { | ||
| const { | ||
| cookieSettings, | ||
| setCookieSettings, | ||
| cookieBannerIsOpen, | ||
| setCookieBannerIsOpen, | ||
| } = useCookies(); | ||
| /* | ||
| To prevent the cookie banner changing the settings without pressing save, | ||
| we need to keep track of the options in the banner itself. | ||
| */ | ||
| const [cookieOptions, setCookieOptions] = useState<{ | ||
| required: boolean; | ||
| functional: boolean; | ||
| analytics: boolean; | ||
| marketing: boolean; | ||
| }>({ | ||
| required: cookieSettings?.required ?? true, | ||
| functional: cookieSettings?.functional ?? false, | ||
| analytics: cookieSettings?.analytics ?? false, | ||
| marketing: cookieSettings?.marketing ?? false, | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| setCookieOptions({ | ||
| required: cookieSettings?.required ?? true, | ||
| functional: cookieSettings?.functional ?? false, | ||
| analytics: cookieSettings?.analytics ?? false, | ||
| marketing: cookieSettings?.marketing ?? false, | ||
| }); | ||
| }, [cookieSettings]); | ||
|
|
||
| const onAcceptAll = () => { | ||
| setCookieSettings({ | ||
| functional: true, | ||
| analytics: true, | ||
| marketing: true, | ||
| }); | ||
| setCookieBannerIsOpen(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <Modal | ||
| isOpen={cookieBannerIsOpen} | ||
| onClose={() => {}} | ||
| isCentered | ||
| size={'2xl'} | ||
| closeOnEsc={false} | ||
| closeOnOverlayClick={false} | ||
| > | ||
| <ModalOverlay /> | ||
| <ModalContent> | ||
| <ModalHeader>Onze site maakt gebruik van cookies</ModalHeader> | ||
| <ModalBody> | ||
| <Text mb={4}> | ||
| Wij gebruiken cookies voor de werking van de website, | ||
| analyse en verbetering en marketingdoeleinden. | ||
| </Text> | ||
|
|
||
| <VStack alignItems={'flex-start'} mb={4}> | ||
| <Checkbox | ||
| isChecked={cookieOptions.required} | ||
| isDisabled={true} | ||
| > | ||
| Noodzakelijke cookies | ||
| </Checkbox> | ||
| <Checkbox | ||
| isChecked={cookieOptions.functional} | ||
| onChange={() => | ||
| setCookieOptions({ | ||
| ...cookieOptions, | ||
| functional: !cookieOptions.functional, | ||
| }) | ||
| } | ||
| > | ||
| Functionele cookies | ||
| </Checkbox> | ||
| <Checkbox | ||
| isChecked={cookieOptions.analytics} | ||
| onChange={() => | ||
| setCookieOptions({ | ||
| ...cookieOptions, | ||
| analytics: !cookieOptions.analytics, | ||
| }) | ||
| } | ||
| > | ||
| Analytische cookies | ||
| </Checkbox> | ||
| <Checkbox | ||
| isChecked={cookieOptions.marketing} | ||
| onChange={() => | ||
| setCookieOptions({ | ||
| ...cookieOptions, | ||
| marketing: !cookieOptions.marketing, | ||
| }) | ||
| } | ||
| > | ||
| Marketing cookies | ||
| </Checkbox> | ||
| </VStack> | ||
|
|
||
| <HStack alignItems={'center'}> | ||
| <Button | ||
| flex={1} | ||
| onClick={() => { | ||
| setCookieSettings(cookieOptions); | ||
| setCookieBannerIsOpen(false); | ||
| }} | ||
| > | ||
| Opslaan | ||
| </Button> | ||
| <Button | ||
| flex={1} | ||
| colorScheme="blue" | ||
| onClick={onAcceptAll} | ||
| > | ||
| Alles cookies accepteren | ||
| </Button> | ||
| </HStack> | ||
| </ModalBody> | ||
| </ModalContent> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default CookieBannerPrimitive; |
Oops, something went wrong.