sgalinski/sg-cookie-optin

此扩展为前端添加了cookie同意功能。

安装: 173 377

依赖者: 0

建议者: 1

安全: 0

类型:typo3-cms-extension


README

安装

  1. 使用扩展管理器或composer安装此扩展。

  2. 转到扩展配置并设置您的许可证密钥和输出文件夹。如果您的TYPO3安装位于相对于Web服务器文档根的子目录中,您必须相应地设置此文件夹。

  3. 使用“模板”后端模块将名为“Cookie Consent”的静态TypoScript添加到您的实例中。

    • 在TYPO3后端打开“模板”模块。
    • 转到页面树中的根站点页面。
    • 在顶部选择“信息/修改”。
    • 单击“编辑整个模板记录”按钮。
    • 选择“包含”标签页。
    • 在“包含静态(从扩展)”的复选框中选择模板“Cookie Consent (sg_cookie_optin)”
    • 保存
  4. 进入“Cookie Consent”后端模块,进行配置并保存一次。

如何添加脚本 / 如何重写脚本HTML?

遗憾的是,由于安全原因,我们无法支持cookie脚本的HTML代码。因此,您需要将HTML代码重写为javascript。以下是一个Google Tag Manager的示例

HTML

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://#/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];

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

    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
</script>

JavaScript

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('async', true);
script.setAttribute('src', 'https://#/gtag/js?id=GA_MEASUREMENT_ID');
document.body.appendChild(script);

window.dataLayer = window.dataLayer || [];

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

gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');

我们的cookie结构是怎样的?

为了我们知道用户已接受哪些cookie组,我们还必须存储一个基本cookie。结构如下

名称: cookie_optin 示例数据: essential:1|analytics:0|performance:1 说明: 用户已接受基本和性能组,但没有接受分析组。

附加功能

打开页面不显示cookie同意

只需将参数"?disableOptIn=1"添加到您的URL中,这样显示对话框所需的JavaScript和CSS就不会再加载。以下是一个示例

https://www.sgalinski.de/?disableOptIn=1

在同意后显示cookie同意

只需将参数"?showOptIn=1"添加到您的URL中,对话框就会再次出现,可以修改接受的cookie。以下是一个示例

https://www.sgalinski.de/?showOptIn=1

外部内容

为opt in上的iframe添加附加描述

只需将数据属性"data-consent-description"添加到iframe HTML标签中,如下例所示


<iframe width="560" height="315" src="https://www.youtube-nocookie.com/XYZ"
        data-consent-description="An additional description about this video!"></iframe>

更改特定外部内容元素的按钮文本

将数据属性"data-consent-button-text"添加到iframe HTML标签中,如下例所示


<iframe width="560" height="315" src="https://www.youtube-nocookie.com/XYZ"
        data-consent-button-text="Custom text here"></iframe>

为外部内容opt in逻辑中的元素添加白名单

有三种方法可以实现,所有这些方法都会使该元素及其所有子元素白名单化以保护外部内容

  1. 只需将数据属性"data-iframe-allow-always"或"data-external-content-no-protection"添加到iframe HTML标签中,如下例所示

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/XYZ" data-iframe-allow-always="1"></iframe>
  1. 将类"frame-external-content-no-protection"添加到HTML标签中。

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/XYZ"
        class="frame-external-content-no-protection"></iframe>
  1. 从TYPO3后端页面模块编辑元素的显示并设置框架类“未受保护的外部内容”

使用外部内容保护(强制opt-in)保护任何类型的DOM元素

有三种方法可以实现,所有这些方法都会使该元素及其所有内容替换为opt-in对话框

  1. 将数据属性"data-external-content-protection"添加到HTML标签中。

<div class="test-content-protection" data-external-content-protection="1">
    Content comes here
</div>
  1. 将类"frame-external-content-protection"添加到HTML标签中。

<div class="test-content-protection frame-external-content-protection">
    Content comes here
</div>
  1. 从TYPO3后端页面模块编辑元素的显示并设置框架类“外部内容”

修改生成的JSON文件

您可以通过附加到钩子 $GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['sg_cookie_optin']['GenerateFilesAfterTcaSave']['preSaveJsonProc'] 来实现这一点。它会发送一个包含以下条目的数组 $params

  • pObj = 一个 StaticFileGenerationService 实例。它包含站点根 ID 以及一些有用的公共方法。
  • data = 一个指向将被写入 JSON 文件的数组的引用。
  • languageUid = 当前语言的 uid

示例

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['sg_cookie_optin']['GenerateFilesAfterTcaSave']['preSaveJsonProc'][] =
    function ($params) {
        $params['data']['newDataEntry'] = 'newValue';
    };