README

CMP 插件

功能

• YouTube 块使用 youtube-noockie.com 域名代替
• YouTube 和 Google Maps iframe 在显示前需要营销和统计同意。
• Gravity Forms 事件跟踪 容器代码已移除。
• Gravity Forms 分析 分析标记已移除。
• CTX Feed 像素已移除。
• WP Consent API 集成（适用于符合 GDPR 的 WooCommerce 所必需）。
• TikTok for Business 像素在给予营销同意之前已移除。
• Facebook for WooCommerce 像素在初始化时调用 fbq('consent', 'revoke');。

块同意设置（beta）

块编辑器中的块可以通过一个选项来扩展，以根据一个或多个同意来隐藏/显示。

请注意，目前这可能在某些情况下存在问题。

PHP API

定义必要的 Cookie

在撤回同意时，所有非必要的 Cookie 都将被移除。您可以编辑这组 Cookie。

add_filter('gds_cmp_necessary_cookies', function (array $cookies) {
    $cookies[] = CartServiceProvider::CART_COUNT_COOKIE;
    $cookies[] = CartServiceProvider::LOGGED_IN_COOKIE;
    return $cookies;
});

修改同意类别

您可以添加或删除自定义同意类别。

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;
});

阻止额外的 iframe 嵌入

默认情况下，the_content 中的 iframe（引用 youtube.com）会使用 <gds-cmp-consent consent="marketing"> 被阻止。您可以将其扩展到其他 iframe 匹配或全部。

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

/**
 * @param {HTMLElement} modal Reference to the <gds-cmp-modal-dialog> 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)

事件

window.addEventListener('gds-cmp.consent', () => {
  if (window.gdsCmp.hasConsent('marketing')) {
    // ....
  }
});

window.addEventListener('gds-cmp.consent.marketing', () => {
  // ...
});

工具

使用 CSS 隐藏内容

<div data-gds-cmp-consent-optin="necessary marketing">
  Show when consent is given for necessary and marketing cookies.
</div>
<div data-gds-cmp-consent-optout="necessary marketing">
  Hide when consent is given for necessary and marketing cookies.
</div>

控制 Cookie 同意对话框

将 .js-gds-cmp-show 类添加到任何元素（需要在 DOMDocumentReady 之前存在于 DOM 中）。

<a class="js-gds-cmp-show">Change consent</a>

将 [data-gds-cmp-trigger="show|hide|withdraw"] 选择器添加到任何元素（作为文档点击监听器代理）

<button data-gds-cmp-trigger="show">Change consent</button>

• 使用 window.gdsCmp.show() 手动运行
• 在 <gds-cmp-modal-dialog> 元素上运行 show()

使用 [data-gds-cmp-consent] 属性阻止元素被加载

您可以将 data-gds-cmp-consent="marketing preferences" 添加到元素中，一旦同意被给出，该元素将进行评估。

支持的元素有 <script>、<img>、<video> 和 <iframe>。

如果内容完全是可选的，并且不需要提示用户同意，这很有用。

<script src="..." type="text/plain" data-gds-cmp-consent="marketing statistics"></script>

<iframe data-gds-cmp-src="..." data-gds-cmp-consent="marketing"></iframe>
<img data-gds-cmp-src="..." data-gds-cmp-consent="marketing" />
<video data-gds-cmp-src="..." data-gds-cmp-consent="marketing"></video>

使用 <gds-cmp-embed> 阻止带消息的元素

<gds-cmp-embed
  consent="{{ \GeneroWP\GeneroCmp\Models\Consent::MARKETING }}"
  description="{{ sprintf(__('Viewing this embed loads content from a third party and thus requires <em>%s</em> consent.', 'wp-gds-theme'), __('Marketing', 'genero-cmp')) }}"
  button="{{ __('Modify preferences', 'genero-cmp') }}"
>
  Content which gets rendered once consent has been given.
</gds-cmp-embed>

您也可以使用 as="" 属性来替换例如 <iframe>。

<gds-cmp-embed
  as="iframe"
  consent="{{ \GeneroWP\GeneroCmp\Models\Consent::MARKETING }}"
  description="{{ sprintf(__('Viewing this embed loads content from a third party and thus requires <em>%s</em> consent.', 'wp-gds-theme'), __('Marketing', 'genero-cmp')) }}"
  button="{{ __('Modify preferences', 'genero-cmp') }}"
  class="embed-youtube"
  frameborder="0"
  allowfullscreen=""
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  src="https://www.youtube.com/embed/..."
>
</gds-cmp-embed>

如果您需要在嵌入替换发生后运行 JS，可以监听 gds-cmp-embed.replaced 事件。

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 事件

每次用户更改同意时，gds-cmp.update 事件都会发送到 gtag。通过为此事件创建触发器并将其与 Consent 初始化 触发器一起添加，标签将在同意更新后的第一次页面加载时运行。

开发

安装依赖项

composer install
npm install

运行测试

npm run test

构建资源

# 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

翻译

wp i18n make-pot . languages/genero-cmp.pot
wp i18n make-mo languages/