README

setup

在配置中定义同意

dcc:
    consents:
        - analytics
        - youtube
        - my-consent

包含js

{% do pimcore_inline_script().appendFile(asset(dcc().jsFile())) %}

或

{{ dcc().jsScript()|raw }}

如果需要，也可以提供基本样式

{% do pimcore_head_link().appendStylesheet(dcc().cssFile()) %}

css变量

  --dcc-clr-white: #FBFAF5;
  --dcc-clr-black: #2A363B;
  --dcc-clr-green: #99B898;

  --dcc-body-w: 50rem;
  --dcc-gap: 2rem;
  --dcc-my: 3rem;
  --dcc-mx: auto;

  --dcc-yt-width: 50rem;
  --dcc-yt-ratio: 16/9;

  --dcc-switch-size: 1.5rem;

同意对话框

创建您喜欢的同意对话框。只需确保

• 主要容器具有id "dc-consent"
• "接受基本"按钮具有id "accept-essential"
• "接受所选同意"按钮具有id "accept-selected"
• 复选框响应名称与定义的同意相匹配

{% do dcc().dialog() %}
<div id="dc-consent" data-ttl="48">
    <div class="dcc-body">
        <h3>{{ 'dcc.dialog.title'|trans }}</h3>
        <p>
            {{ ('dcc.dialog.text'|trans)|raw }}
        </p>

        <div class="dcc-consents">
            <label>
                <div class="dcc-slider">
                    <input type="checkbox" name="essential" checked disabled>
                    <div class="slider"></div>
                </div>

                {{ ('dcc.consent.essential')|trans }}
            </label>

            {% for permission in dcc().permissionList() %}
                <label>
                    <div class="dcc-slider">
                        <input type="checkbox" checked name="{{ permission }}">
                        <div class="slider"></div>
                    </div>

                    {{ ('dcc.consent.' ~ permission)|trans }}
                </label>
            {% endfor %}
        </div>


        <div class="dcc-actions">
            <button id="accept-essential" class="dcc-button -inverted">{{ 'dcc.button.essential'|trans }}</button>
            <button id="accept-selected" class="dcc-button -selected">{{ 'dcc.button.selected'|trans }}</button>
        </div>
    </div>
</div>
{{ dcc().endDialog()|raw }}

JavaScript

要防止执行任何JavaScript，例如google analytics，使用JS功能：将"data-consent"设置为所需的同意名称。

{% do dcc().js().start() %}
<script
        data-consent="analytics"
        src="https://#/gtag/js?id=UA-xxxxx"
        async
></script>
{{ dcc().js().end()|raw }}

"src"属性将被替换为"data-src"。如果同意给出，脚本将被加载。

或

{% do dcc().js().start() %}
<script data-consent="analytics" type="text/javascript">
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments)
    }

    gtag('consent', 'default', {ad_storage: 'denied', analytics_storage: 'denied'});
    gtag('set', 'ads_data_redaction', true);
    gtag('set', 'url_passthrough', true);
    gtag('js', new Date());
    gtag('config', 'xxxx');
</script>
{{ dcc().js().end()|raw }}

脚本的"type"属性值将被替换为"text/plain"，这可以防止脚本执行。如果同意给出，脚本标签将被执行。

Youtube

使用youtube助手，您确保从客户端浏览器不会发出对youtube的调用。如果"youtube"同意未接受，将显示带有base64缩略图的占位符。如果缩略图被点击，将显示该视频的同意提示。

样式

• 容器: .dcc-youtube
• 播放图标: .dcc-youtube__play
• 同意提示: .dcc-youtube__consent
• 同意提示按钮: .consent-youtube__decline, .consent-youtube__accept

翻译

• dcc.youtube.message
• dcc.youtube.decline
• dcc.youtube.accept

{{ dcc().youtube('https://www.youtube-nocookie.com/embed/xxxxxx?controls=0')|raw }}

或通过getHtml(thumbnailQuality='high', attributes=[])获取HTML标签

{{ dcc().youtube('https://www.youtube-nocookie.com/embed/xxxxxx?controls=0').getHtml('low', {role: 'video'})|raw }}

插槽

如果您只想在同意接受时显示任何内容，那么有插槽

<% do dcc().slot('mySlot').start('requiredConsent') %}
<div>
    content if 'requiredConsent' is accepted
</div>
{{ dcc().slot('mySlot').end()|raw }}}

cookie拦截器

集成了一个cookie拦截器，如果名称不在白名单中，则阻止所有cookie。要阻止所有cookie，需要在js中包含行内，以确保它首先执行。

{{ dcc().jsScript()|raw }}

激活拦截器并注册一个包含所有cookie名称的cookie命名空间

<script>
    window.dccBlock = true
    window.dccData = window.dccData || []

    function dcc() {
        window.dccData.push(arguments)
    }

    dcc('my-cookie-namespace', ['cookie-name-one', 'cookie-name-two'])
</script>

将cookie命名空间绑定到同意

<input type="checkbox" checked name="my-consent" data-dcc-cn="my-cookie-namespace">

还有预定义的包含所有必要cookie名称的cookie命名空间

• matomo
• google-analytics
• google-tag-manager
• google-ad-sense