如何向您的网站添加 Cookie 横幅:无需代码(使用模板!)

已发表: 2018-10-02

您可能已经注意到,如今您访问的每个网站似乎都包含一些有关使用 cookie 的通知。 现在您可能想知道……我的网站是否需要其中一份 cookie 同意通知? 如果是这样,我如何才能为我的网站创建一个 cookie 横幅?

第一个问题的答案是“可能”。 至于第二个问题,这就是这篇文章的全部内容!

在本文的其余部分,您将快速了解您的网站是否确实需要 cookie 同意横幅。 然后,我们将分享一个分步教程,介绍如何使用 Getsitecontrol 为您的网站创建 cookie 同意横幅,而无需任何特殊知识。


由 Getsitecontrol 提供支持的 Cookie 同意横幅模板 查看实时预览 →

什么类型的网站需要 cookie 横幅?

如果您的网站接收来自欧盟的访问者,如果您想遵守欧盟法规,您可能需要一个 cookie 同意横幅。

最初于 2011 年采用并在 2018 年随着 GDPR 进行扩展,欧盟关于 cookie 的规则本质上要求您获得访问者的“明确、知情同意”,以便使用跟踪用户数据的 cookie。

技术上讲,并非每个网站都如此,但随着 Google Analytics、Facebook Pixel、社交媒体共享按钮等工具的流行,您的网站很有可能至少使用一些跟踪 cookie。

因此,在实践中,大多数接收来自欧盟的访问者的网站都需要 cookie 同意横幅。 在这个全球化的世界中,这是大多数网站——时期。

长话短说……如果您想遵守欧盟的规定,您可能需要一个 cookie 同意横幅

以下是您需要在 cookie 同意通知中包含的内容

cookie 横幅的目的是在访问者开始使用您的网站之前获得使用 cookie 的知情同意

所以你需要:

  • 在用户第一次访问时立即显示 cookie 同意横幅。
  • 从访问者那里获得使用 cookie 的知情同意。 通常,这是通过链接到您的隐私/cookie 政策以及表示同意的按钮来完成的。

三个很好的 cookie 横幅示例(您将学习如何重新创建所有这些!)

好的,所以你需要一个 cookie 横幅。 现在——你把它放在哪里?

您可以将 cookie 横幅放在任何您想要的位置,只要它足够醒目以吸引读者的注意力并获得知情同意。

让我们从几个示例开始,然后我们将向您展示如何在您自己的站点上复制这些示例中的任何一个,而无需编写一行代码。

1.底部栏cookie同意横幅

乙烯基工厂使用简约的底部栏来表示同意 cookie:

乙烯基工厂使用底部横幅来显示他们的 cookie 同意消息

2. 顶部栏 cookie 同意横幅

ASI,广告专业研究所通过将 cookie 横幅移动到页面顶部来改变事物:

ASI 已将他们的 cookie 横幅放在页面顶部

3. 插入式 cookie 同意横幅

INUSUAL 选择在左下角将 cookie 同意横幅显示为滑入式(您可以轻松地将其切换到右侧):

INUSUAL 使用滑入式显示他们的 cookie 横幅

只需点击几下即可添加这些 cookie 横幅

如果您喜欢这些示例中的任何一个,您可以在几分钟内将它们直接添加到您的网站。 查看下面的 cookie 同意横幅库,然后单击“查看实时预览”按钮以查看它们的实际效果。 然后选择要放置在网站上的一个,并在实时预览模式下,按照简要的分步说明进行操作。

浮动条

Cookie 政策横幅模板 - 浮动底栏 查看实时预览 →

简约酒吧

横幅模板 - 浮动底栏 查看实时预览 →

粘条

Cookie 同意消息模板 - 粘滞条 查看实时预览 →

简约的滑入式

带有 cookie 同意消息的幻灯片 查看实时预览 →

插入图像

Cookie 横幅模板。图像滑入 查看实时预览 →

想建立自己的横幅吗? 你也能做到。 按照下面的分步指南创建 cookie 横幅。

如何在不编写一行代码的情况下创建自己的 cookie 横幅

现在是有趣的部分 - 如何为您自己的网站创建像这些示例一样的 cookie 同意横幅。

以上四个模板均由 Getsitecontrol 提供支持,该工具可让您向网站添加多个弹出窗口。 小部件可以是浮动联系按钮、电子邮件弹出窗口、在线反馈表,或者……您猜对了 - cookie 同意横幅

使用简单的界面,您将能够自定义您的 cookie 横幅:

  • 放置
    包括上面的所有示例,以及更多
  • 文本
    包括链接到您的隐私政策的选项
  • 按钮
    按钮的文本和颜色
  • 颜色
    与您网站的设计相匹配

它还包括一种特殊的响应模式,可确保您的 cookie 同意通知也适用于移动访问者。 以下是如何使用 Getsitecontrol 创建 cookie 同意通知...

第 1 步:将 Getsitecontrol 添加到您的网站

虽然您将在 Getsitecontrol Web 界面中完成大部分工作,但您首先需要将 Getsitecontrol 添加到您的网站,以便您可以在发布后实际显示您的 cookie 同意横幅。

为此,您需要创建一个 Getsitecontrol 帐户。 然后,您需要将 Getsitecontrol 代码段添加到您的站点。 如果您使用 WordPress,添加代码段的最简单方法是通过官方 Getsitecontrol 插件。 它将为您处理集成。 对于其他网站,您需要在网站的</body>标记之前手动添加代码。

如果您不确定如何执行此操作,Getsitecontrol 文档提供了适用于大多数流行平台的详细教程,包括:

  • Shopify
  • Joomla
  • 方空间

完成该过程后,您可以使用安装代码按钮在您的 Getsitecontrol 仪表板中验证代码是否正常工作:

获取sitecontrol安装代码

现在,您已准备好创建实际的 cookie 同意通知!

第 2 步:从图库中选择一个模板

向您的网站添加 cookie 同意通知的最快方法是从模板开始。 登录到您的 Getsitecontrol 仪表板并单击+创建小部件Getsitecontrol 仪表板中的按钮,然后继续模板库.

cookie 横幅模板库

请注意,图库中的 cookie 横幅模板已经包含一些通用文本,但是请记住,您可以根据需要修改副本和设计。

准备好后,选择您喜欢的模板并按照右侧的提示将其添加到您的 Getsitecontrol 仪表板。

第 3 步:更改您的颜色主题(可选)

模板有两种默认颜色主题:黑色和白色。 但是,如果您希望同意横幅的颜色与网站的其余部分相匹配,则可以使用主题设置来实现。 Getsitecontrol 允许您设置颜色:

  • 背景
  • 按钮
  • 常规文本
  • 按钮文字

Getsitecontrol 允许您更改 cookie 横幅颜色主题

您还可以从图库添加图像或从计算机上传图像。

第 4 步:添加您的内容

现在您已经确定了同意横幅的样式和位置,是时候调整访问者的同意消息了。 已包含通用文本,但您可以自行决定对其进行编辑。 另外,您需要添加指向 cookie 政策的链接。

要配置横幅的内容,请打开文本编辑菜单。

对您使用的确切文本没有要求——但同样,这里的目标是获得“明确、知情的同意”。 因此,这是您可能想要使用的替代副本:

  • 标题— 本网站使用 cookie
  • 说明— 通过继续使用我们的网站,您了解我们使用 cookie 来改善您的体验并收集分析数据。 在我们的隐私政策中了解更多信息。
  • 按钮文字— 我同意

使用直观的文本编辑器更改 cookie 横幅上的副本

如果您切换到预览窗口下方的移动模式,您可以看到您的文本对移动访问者的显示方式。

第 5 步:控制何时出现您的 cookie 同意通知

为避免在访问者在您的网站上移动时纠缠他们,您需要确保您的 cookie 同意通知在访问者单击我同意按钮。 为此,您可以使用定位标签。

前往停止以显示小部件菜单并选择+添加条件. 然后,选择关闭.

设置适当的目标设置,以确保接受您的 cookie 政策的人不会再次看到横幅

在这种情况下,“关闭”是访问者单击按钮同意使用 cookie。 您无需更改任何其他设置定位标签。

第 6 步:激活您的 cookie 同意横幅

现在,你已经大功告成了! 要使您的 cookie 同意通知生效,您只需单击保存并关闭按钮完成横幅的配置。

然后,选择选项立即激活正如应用程序所建议的:

Cookie 横幅已激活

一旦你这样做了,访问者应该开始看到 cookie 同意通知。 一旦他们单击按钮同意使用 cookie,他们将不再看到 cookie 横幅。

添加 cookie 同意通知并不困难

让您的网站保持 cookie 同意法的良好一面并不是您需要开发人员的事情。 通过使用 Getsitecontrol 和本文中概述的原则,您可以设置自己的可自定义 cookie 同意横幅,而无需编写一行代码。

Colin Newcomer 是一名自由撰稿人,具有 SEO 和联盟营销背景。 他主要撰写有关 WordPress 和数字营销的文章,帮助客户提高网络知名度。

您正在阅读 Getsitecontrol 博客,其中营销专家分享经过验证的策略来发展您的在线业务。 本文是客户参与部分的一部分。

订阅我们的时事通讯 → Icons8 的主要插图