Google-cmp-addon NPM

🏠 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.