@eo/next-ccm

@eo/next-ccm

Easy use of the NPO Cookie Consent Module within React projects.

Originally a clone of @bnnvara/ccm version 1.1.0. We removed all non-react npm dependencies, changed the module to TypeScript, added a README, and added Tailwind.

Usage

Installation and configuration

Execute the following:

pnpm install @eo/next-ccm

Add @eo/next-ccm to your project's tailwind content configuration, like so:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    ...
    './node_modules/@eo/next-ccm/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    colors: ...,
    fontFamily: ...,
  },
  plugins: ...,
}
export default config

Initialization

Implement the CookieConsentModule in your root layout.

import { CookieConsentModule } from '@eo/next-ccm';

export default const () => (
    // Using cookies.eo.nl instead of (the default) ccm.npo.nl,
    // because we want to use 1st party cookies instead of 3rd party
    <CookieConsentModule 
        organisation="EO" 
        site="eo.nl"
        ccmDomain="https://cookies.eo.nl"
    />
)

Consent Placeholder

import { CookieConsentPlaceholder, api } from '@eo/next-ccm';

// The `ssr={true}` (default) will render the placeholder during Server Rendering.
// Consequently, `ssr={false}` will render the placeholder during Client Rendering.
export default const () => (
    <CookieConsentPlaceholder
        renderPlaceholder={<p>OOPS! No permission given!</p>} 
        permissions={[
            api.permissionTypes.SOCIAL, 
            api.permissionTypes.ANALYTICS,
        ]}
        ssr={true}
    >
        Granted content
    </CookieConsentPlaceholder>
)

To make sure a user doesn't get cookies they have not given permission for, be sure to always place your external content within the <CookieConsentPlaceholder></CookieConsentPlaceholder> tags. Always classify what permissions are required to view the wrapped content. See #permissions.

If CookieConsentPlaceholder determines not all required permissions were given, the value of renderPlaceholder is rendered instead, until the required permissions have been given. If no renderPlaceholder is given, a default placeholder is rendered. A custom renderPlaceholder is probably preferred.

Interacting with NPO CCM script and popup

If you want to interact with the NPO cookie management, you can place buttons within your placeholder (or anywhere else on your site for that matter) with specific properties to do so.

Opening the NPO cookie popup can be done by adding the ccm_message_link class to a button or anchor tag. Suppose your content cannot be showed and you want to highlight the specific cookie categories for which permission is required, you can bring up the NPO CCM popup and highlight those specific categories with class ccm_message_highlight_link and property data-ccm-categories="social,analytics".

Examples:

<!-- Triggers NPO cookie popup -->
<a href="#" className="ccm_message_link">Aanpassen</a>

<!-- Triggers NPO cookie popup, highlights the categories for which permission is needed -->
<a href="#" className="ccm_message_highlight_link" data-ccm-categories="social,analytics">Aanpassen</a>

Permissions

Cookies can be classified in multiple categories. To use a cookie within a category X, the user must have given the permission belonging to X.

Category	Permission key	Permission value
po_cc_necessary	api.permissionTypes.NECESSARY	necessary
po_cc_analytics	api.permissionTypes.ANALYTICS	analytics
po_cc_social	api.permissionTypes.SOCIAL	social
po_cc_advertising	api.permissionTypes.ADVERTISING	advertising
po_cc_recommendations	api.permissionTypes.RECOMMENDATIONS	recommendations
po_cc_miscellaneous	api.permissionTypes.MISCELLANEOUS	miscellaneous