https://github.com/generoi/genero-cmp
https://github.com/generoi/genero-cmp
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/generoi/genero-cmp
- Owner: generoi
- Created: 2024-05-06T16:12:46.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-10-31T17:30:15.000Z (8 months ago)
- Last Synced: 2025-10-31T19:20:47.507Z (8 months ago)
- Language: PHP
- Size: 848 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# genero-cmp
CMP Plugin
## Features
- YouTube block use `youtube-noockie.com` domain instead
- YouTube and Google Maps iframes require marketing and statistics consent before shown.
- [Event Tracking for Gravity Forms](https://wordpress.org/plugins/gravity-forms-google-analytics-event-tracking/) container code is removed.
- [Gravity Forms Analytics](https://www.gravityforms.com/add-ons/google-analytics/) analytics tag is removed.
- [CTX Feed](https://wordpress.org/plugins/webappick-product-feed-for-woocommerce/) pixel is removed.
- [WP Consent API](https://wordpress.org/plugins/wp-consent-api/) integration (required for GDPR compliant WooCommerce).
- [TikTok for Business](https://wordpress.org/plugins/tiktok-for-business/) pixel is removed until marketing consent has been given
- [Facebook for WooCommerce](https://wordpress.org/plugins/facebook-for-woocommerce/) pixel gets `fbq('consent', 'revoke');` when initialized
## Block consent settings (beta)
Blocks in the block editor are extended with an option to either hide/show based on one or multiple consents.
Note this is likely broken in some cases at the moment.
## PHP API
### Define necessary cookies
When withdrawing consent, all non-necessary cookies are removed. You can edit this set of cookies.
```php
add_filter('gds_cmp_necessary_cookies', function (array $cookies) {
$cookies[] = CartServiceProvider::CART_COUNT_COOKIE;
$cookies[] = CartServiceProvider::LOGGED_IN_COOKIE;
return $cookies;
});
```
### Alter consent categories
You can add or remove custom consent categories.
```php
add_filter('gds_cmp_consents', function (array $consents) {
$consents[] = new \GeneroWP\GeneroCmp\Models\Consent(
id: 'custom-consent',
label: __('Custom Consent'),
description: __('Custom consent'),
wpConsentApiCategory: 'marketing',
gtmConsentModes: ['ad_storage', 'ad_user_data', 'ad_personalization'],
);
return $consents;
});
```
### Block additional iframe embeds
By default iframes in `the_content` referencing _youtube.com_ get blocked using ``. You can extend this to other iframe matches or all of them.
```php
add_filter('gds_cmp_embed_consents', function (array $consents, string $tag) {
// Block all iframes by default
if (! $consents) {
$consents[] = 'preferences';
}
return $consents;
}, 10, 2);
```
## JavaScript API
```js
/**
* @param {HTMLElement} modal Reference to the element
* @returns {void}
*/
window.gdsCmp.modal
/**
* Show the consent dialog
*
* @returns {void}
*/
window.gdsCmp.show()
/**
* Hide the consent dialog
*
* @returns {void}
*/
window.gdsCmp.hide()
/**
* Withdraw current consent.
*
* @returns {void}
*/
window.gdsCmp.withdraw()
/**
* Return if user has granted the passed consents.
*
* @param {...Consent} consents Consent name eg. 'necessary`, `preferences`, `marketing`, `statistics`.
* @returns {boolean} if user has granted all the consents
*/
window.gdsCmp.hasConsent(...consents)
/**
* Evaluate and initialize all script tags using data-cmp-consent="" string
*
* @param {Node} context
* @returns void
*/
window.gdsCmp.evaluateTags(context = document)
```
### Events
```js
window.addEventListener('gds-cmp.consent', () => {
if (window.gdsCmp.hasConsent('marketing')) {
// ....
}
});
window.addEventListener('gds-cmp.consent.marketing', () => {
// ...
});
```
## Utilities
### Hide content using CSS
```html
Show when consent is given for necessary and marketing cookies.
Hide when consent is given for necessary and marketing cookies.
```
### Control cookie consent dialog
Add `.js-gds-cmp-show` class to any element (needs to be in DOM before DOMDocumentReady).
```html
Change consent
```
Add `[data-gds-cmp-trigger="show|hide|withdraw"]` selector to any element (delegates as a document click listener)
```html
Change consent
```
- Run manually with `window.gdsCmp.show()`
- Run `show()` on the `` element
### Block elements from being loaded using `[data-gds-cmp-consent]` attribute
You can add `data-gds-cmp-consent="marketing preferences"` to an element and once consent has been given, the element will evaluate.
Supported elements are ``, `<img>`, `<video>` and `<iframe>`.
This is useful if content is entirely opt-in and doesnt require prompting the user for consent.
```html
<script src="..." type="text/plain" data-gds-cmp-consent="marketing statistics">
![]()
```
### Block elements with a message using ``
```html
Content which gets rendered once consent has been given.
```
You can also use `as=""` attribute to replace eg an ``.
```html
```
If you need to run JS once the embed replace has taken place, you can listen for the `gds-cmp-embed.replaced` event.
```js
function init(el) {
if (el.tagName === 'GDS-CMP-EMBED') {
el.addEventListener('gds-cmp-embed.replaced', (e) => init(e.detail.element));
return;
}
// ... do stuff
}
init(document.querySelector('[data-custom-function]'));
```
### GTM events
Whenever users change consent the `gds-cmp.update` event will be sent to gtag. By creating a trigger for this event and adding it together with the _Consent initialization_ trigger, tags will run on the first page load after consent is updated.
## Development
Install dependencies
composer install
npm install
Run the tests
npm run test
Build assets
# Minified assets which are to be committed to git
npm run build:production
# Watch for changes and re-compile while developing the plugin
npm run start
## Translations
wp i18n make-pot . languages/genero-cmp.pot
wp i18n make-mo languages/