🏠 Homepage

About

If you use google adsense and the new google "Privacy & Message" CMP feature and need to add custom purposes - This is for you. This library adds the missing functionality to en- and disable custom services (Google maps, analytics, ...) according to the user selected purposes. It works just like any other CMP. Configure and match the purpose and let the library do the rest

NOTE: This library is still BETA and experimental since Google is changing the way their CMP works - Besides its still full of bugs!

Getting started

Javascript usage

To use the widget on your website, simply embed the js as well as a valid config.

```html
<!-- make sure the config gets after the libary code -->
<script defer type="text/javascript" src="/path/to/js"></script>
<script defer type="text/javascript" src="/path/to/config.js"></script>

The config file should be in the format:

window.gcmp.init({
  debug: true,
  reloadAfterUserAction: true,
  onLoad: function () {
  },
  onUi: function () {
  },
  purposes: [{
    purpose: 2,
    selectors: '[data-consent="affiliate-ad"]',
    cookies: [/^UI$/i, /^PI$/i, /^BT$/i]
  }, {
    purpose: 10,
    selectors: '[data-name="analytics"],[data-consent="analytics"]',
    cookies: [/^ga/i, /^_ga/i, /^_gid/i],
  }, {
    purpose: 7,
    selectors: '[data-name="externalmedia"],[data-consent="externalmedia"]',
  }, {
    purpose: 7,
    selectors: '[data-name="security"],[data-consent="security"]',
  }]
});

React usage

npm install google-cmp-addon
yarn install google-cmp-addon

Use with react provider

import React from 'react';
import {GcmpProvider} from "google-cmp-addon";

export const App = () => {
  const config = {
    // your config here - see above´s javascript usage
  }
  return (<GcmpProvider config={config}>
    Hello React
  </GcmpProvider>)
}

See all the options and configurations here. Please also consult the IAB official documentation: IAB And the google JavaScript API https://developers.google.com/funding-choices/fc-api-docs.

property | type | default | Description -----------------------|----------------------------|-------------|-------------------------------------------------------------------------------------------------------- debug | Boolean | false | Enable debug mode tcfVersion | Number | 2.2 | The TCF version to use waitForDom | Boolean | false | Waits for the DOM to be fully loaded to run initWithGoogle | Boolean | true | Run when goggle has issued ready event (default) root | Document | Element; | Document | Define the root element from where to look for placeholders purposes | Purposes[] | [] | Requires the purpose object (see below) embedOptions | EmbedOptions | undefined | Optional options for embedded objects elementOptions | ElementOptions | undefined | Optional options for elements reloadAfterUserAction | boolean | false | Hard reload after user has confirmed purpose choices in google UI onInit | (app: App) => void | undefined | Fires when the google CONSENT_DATA_READY and IAB window.__tcfapi.addEventListener() has been fired onLoad | (app: App) => void | undefined | Fires when the google CONSENT_DATA_READY and IAB window.__tcfapi.addEventListener() has been fired onUi | (app: App) => void | undefined | Fires when the google UI is mounted in the parent DOM onAdStatus | (status: number) => void | undefined | Fires when the google AD_BLOCK_DATA_READY has fired

The purpose object has the following configurations:

property | type | default | Description ----------------|------------------------------------------------------------------------------------------|-------------|---------------------------------------------------------------------------------------------------------------------------- purpose | Number | | Expects the a number between 1-11 - according to the google IAB purposes mode | "hide" | "remove" | "disable" | undefined | The mode to use on elements where "hide" hides the element, "remove" removes it from DOM and "disable" tries to disable it tags | String[] | undefined | A list of allowed html tag names selectors | String | | Expects the HTML selectors to target cookies | RegExp[] | undefined | Array of regexp expression for cookie names to remove localStorage | RegExp[] | undefined | Array of regexp expression to remove entries from local storage sessionStorage | RegExp[] | undefined | Array of regexp expression to remove entries from session storage onRender | onRender?: (consent: boolean, nodes: NodeListOf,app: App,) => void | false | undefined | Hook in custom render function for this purpose

<script type="text/plain"
        data-type="text/javascript"
        data-consent="optimizely"
        data-src="https://cdn.optimizely.com/js/10196010078.js">
</script>

The same method also works for images, stylesheets and other elements with a src or type attribute.

Configure

Install

yarn install

Usage

yarn run dev

Run tests

yarn run test

Author

👤 Frank Mueller [email protected]

• Website: http://set.cooki.me
• Github: @setcooki

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2024 Frank Mueller [email protected]. This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator