omatech/oma-cookies

Cookie同意管理器

维护者

详细信息

github.com/omatech/oma-cookies

源代码

问题

安装次数: 4

依赖项: 0

建议者: 0

安全: 0

星级: 0

观察者: 6

分支: 0

开放问题: 0

语言:JavaScript

v1.3.1 2022-03-28 11:14 UTC

MIT b3a46625efa5540910badf8270fbf6b485ac65c1

  • OMA Technologies <info.woop@omatech.com>

This package is auto-updated.

Last update: 2024-08-28 16:32:39 UTC

README


Omatech Logo

Oma-cookies

内置解决方案，允许控制cookie，
使Omatech内部项目符合GDPR规定。

目录

安装

安装包

npm i @omatech/oma-cookies

JavaScript导入

将主js文件导入到项目中

require('@omatech/oma-cookies/dist/js/omacookies.min');

可选地，您可以复制位于 /node_modules/@omatech/oma-cookies/dist/js 文件夹内的JS文件到公共文件夹中，并在HTML布局中链接它

<script src="/path_to_copied_file/omacookies.min.js"></script>

CSS/SASS导入

根据您的样式方法，有两种方法

A) 如果您 仅 要覆盖CSS类 => 导入编译后的CSS文件

@import "~@omatech/oma-cookies/dist/css/omacookies.min.css"

可选地，您可以复制位于 /node_modules/@omatech/oma-cookies/dist/css 文件夹内的CSS文件到公共文件夹中，并在HTML布局中链接它

<link href="/path_to_copied_file/omacookies.min.css" rel="stylesheet">

B) 如果您想要覆盖变量和CSS类 => 导入所有单独的文件

@import "~@omatech/oma-cookies/dist/scss/base"
@import "~@omatech/oma-cookies/dist/scss/variables"
//Your own SCSS file overriding the variables from the file above
@import "variables"
@import "~@omatech/oma-cookies/dist/scss/styles"

无论您选择哪个选项，请确保此行在您的HTML布局中，以便响应式正常工作。

<meta name="viewport" content="width=device-width, initial-scale=1">

实现

要开始，您必须在HTML布局的某个位置添加以下内容（最好放在末尾）

<body>
...
<div id="omacookies"></div>
</body>

iframe

每个iframe都必须具有属性 data-omacookies-consent，该属性有两个可能的值 marketing 或 statistics。这指定了内容何时被解锁/锁定

YouTube视频

属性 data-omacookies-yt-video-id 是每个YouTube视频URL末尾找到的ID。在 /watch?v=uu5k19UaCT0 中，ID将是 uu5k19UaCT0

<div
    class="omac-iframe-youtube"
    data-omacookies-consent="marketing"
    data-omacookies-yt-video-id="uu5k19UaCT0"
></div>

通用iframe

属性 data-omacookies-src 将作为正常的iframe src 属性工作

您可以使用属性 data-omacookies-xxx 向渲染的iframe添加任何属性。只需将 xxx 替换为任何其他属性。请参见示例中显示的 width 属性。

<div
    class="omac-iframe"
    data-omacookies-consent="statistics"
    data-omacookies-src="https://example.com/"
    data-omacookies-width="720"
></div>

脚本

必须添加属性 type="text/plain"。

  • 对于 文件 JavaScript脚本
<script
    class="omac-script"
    type="text/plain"
    data-omacookies-consent="statistics"
    src="https://example.com/"
></script>
  • 对于 内联 JavaScript代码
<script
    class="omac-script"
    type="text/plain"
    data-omacookies-consent="statistics"
>
    console.log("Hello World!");
</script>

↑ 返回顶部

方法

打开cookie同意选择模态框

window.OMAC.SelectionModal.open();

↑ 返回顶部

配置

在导入 omacookies JS文件之后，我们将覆盖主对象的属性。

覆盖语言字符串

我们可以使用以下声明为任何语言字符串设置新值

window.OMAC.available_languages.es.select_box_title = 'Personalizar Cookies';

添加新语言

我们可以添加任意数量的语言，我们只需遵循我们已有的ES和EN对象结构。

您可以从 /node_modules/@omatech/oma-cookies/src/lang/en.json 复制结构

例如，我们将添加德语语言

window.OMAC.available_languages.de = {
    "constent_box_title": "Diese Website verwendet Cookies",
    ...
};

设置默认语言

请确保在修改 available_languages 对象之后设置语言 之后。

window.OMAC.setLang("en");

阅读更多链接

在这里，我们将添加用户阅读cookie政策的网站链接。

window.OMAC.readMoreLink = "https://omatech.com/cookies.html";

格式

在这里，我们可以设置初始cookie对话框的显示方式。允许的值是 modal（默认）或 banner。

window.OMAC.format = "banner";

启用/禁用快速链接

默认情况下启用快速链接。通过以下设置禁用它

window.OMAC.enableQuickLink = false;

要禁用时打开cookie选择模态框，请使用 此方法

快速链接位置

在此，我们可以配置快速链接将位于屏幕的哪个角落，使用值 top-right 、top-left、bottom-right 或 bottom-left。默认情况下，快速链接将出现在 bottom-right。

window.OMAC.quickLinkPosition = "bottom-left";

↑ 返回顶部

许可

本项目采用 MIT 许可证。如需更多信息，请阅读 LICENSE 文件。

↑ 返回顶部

联系

↑ 返回顶部