如何添加："Cookies EU banner" 到 Rails 6 站点

Question

我正在尝试将此 https://github.com/Alex-D/Cookies-EU-banner 添加到我的 rails 6 站点。这应该很容易，但我错过了一些东西，我想不通，那是什么。

这是我所做的：

yarn 添加 cookies-eu-banner（没问题）。
在正文部分的开头插入此 div（没问题 - 部分完成）。

<div id="cookies-eu-banner" style="display: none;">
    By continuing to visit this site, you accept the use of cookies by Google Analytics for statistical purposes.
    <a href="./read-more.html" id="cookies-eu-more">Read more</a>
    <button id="cookies-eu-reject">Reject</button>
    <button id="cookies-eu-accept">Accept</button>
</div>

将此 div 插入正文部分结尾之前（也用部分完成）。

<%= javascript_pack_tag '../src/cookies-eu-banner' %>
<script>
    new CookiesEuBanner(function () {
        // Your code to launch when user accept cookies
    });
</script>

在 application.js 我添加了这一行：进口（'src/index'）
in app/javascript/src/index.js 我添加了这一行：导入 'cookies-eu-banner'
我已将 cookies-eu-banner.js 脚本复制到 app/javascript/src 文件夹。
然后预编译资产，完成bin/webpack并重启服务器。

但是在刷新页面时，我仍然收到一条错误消息：“CookiesEuBanner 不是一个函数”，或者：“未捕获的 ReferenceError：cookiesEuBanner 未定义”

非常欢迎对我遗漏的内容提出任何建议。

提前致谢

Answer 1

为了与 webpack/Webpacker 一起使用，用法将不同于 cookies-eu-banner 自述文件中当前描述的内容。您的 JavaScript 代码必须导入到 webpack 依赖关系图中，而不是在视图的 <script> 标签中嵌入 JS。

首先，确保以下标签在您的布局中以导入 Webpacker-bundled JavaScript 和 CSS:

<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>

横幅 HTML 应该在您的 layout/view 中，即根据自述文件 <div id="cookies-eu-banner" style="display: none;">...</div>。

然后，在 app/javascript/ 的某处添加一个用于初始化横幅的 JS 文件（但不在 app/javascript/packs），例如 app/javascript/src/add-eu-banner.js。在这里，您将导入库（如果需要，默认 css）并在 DOM 内容加载后初始化它：

// app/javascript/src/add-eu-banner.js

import CookiesEuBanner from 'cookies-eu-banner'
import 'cookies-eu-banner/css/cookies-eu-banner.default.css'

document.addEventListener('DOMContentLoaded', () => {
  new CookiesEuBanner(() => {
    console.log('Cookies EU Banner accepted')
  })
})

现在，通过在“application.js”包文件中添加导入语句，将那个文件添加到 webpack 依赖关系图中：

// app/javascript/packs/application.js

import '../src/add-eu-banner'

那应该显示横幅。您可能需要刷新页面或重新启动 webpack-dev-server，具体取决于您在本地的开发方式。

我还在 Rails 6 Webpacker 演示存储库的一个分支中创建了这个示例：https://github.com/rossta/rails6-webpacker-demo/compare/example/cookies-eu-banner

Answer 2

因为我的名声还不能评论:

's answer is the correct one. To answer 后续问题如何添加Google分析：只需要在CookiesEuBanner的init中调整代码如下：

document.addEventListener('DOMContentLoaded', () => {
    new CookiesEuBanner(function () {
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        // Don't forget to put your own UA-XXXXXXXX-X code
        ga('create', 'UA-XXXXXXXX-X', 'auto');
        ga('send', 'pageview');
    }), true; 
})

我的横幅也没有显示。确保您还没有 cookie“hasConsent=true”and/or 检查您的浏览器安全设置。即 Firefox：Website cookie settings

如何添加："Cookies EU banner" 到 Rails 6 站点

How to add the: "Cookies EU banner" to Rails 6 site

javascript

ruby-on-rails

webpacker