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

Question

I am trying to add this: https://github.com/Alex-D/Cookies-EU-banner to my rails 6 site. It ought to be easy, but there is something I have missed, and I can not figure out, what it is.

This is what I have done:

1. yarn add cookies-eu-banner (no problem).
2. insert this div at the beginning of the body part (no problem - done with a partial).

<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>

3. insert this div just before the end of the body part (also done with a partial).

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

4. in application.js I have added this line: import('src/index')

5. in app/javascript/src/index.js I have added this line: import 'cookies-eu-banner'

6. I have copied the cookies-eu-banner.js script to the app/javascript/src folder.

7. Then precompiled assets, done bin/webpack and restarted the server.

However on refreshing the page, I still get either an errormessage saying that: "CookiesEuBanner is not a function", or: "Uncaught ReferenceError: cookiesEuBanner is not defined"

Any suggestions to what I have missed are more than welcome.

Thanks in advance

Answer 1

To make this work with webpack/Webpacker, usage will be different than what's currently described in the cookies-eu-banner README. Your JavaScript code must be imported in the webpack dependency graph instead of embedding JS in <script> tags in the view.

First, make sure that following tags are in your layout to import Webpacker-bundled JavaScript and CSS:

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

The banner HTML should be in your layout/view, i.e., <div id="cookies-eu-banner" style="display: none;">...</div> per the README.

Then, add a JS file for initializing the banner somewhere in app/javascript/, (but not in app/javascript/packs), like app/javascript/src/add-eu-banner.js. Here, you'll import the library (and default css if desired) and initialize it when the DOM content has loaded:

// 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')
  })
})

Now, add that file to the webpack dependency graph by adding an import statement in the "application.js" pack file:

// app/javascript/packs/application.js

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

That should display the banner. You might need to refresh the page or restart the webpack-dev-server depending on how you're developing locally.

I also created this as an example in a branch in my Rails 6 Webpacker demo repo: https://github.com/rossta/rails6-webpacker-demo/compare/example/cookies-eu-banner

Answer 2

As I cannot comment yet because of my reputation:

@rossta 's answer is the correct one. To answer @Mhon follow up question about how to add Google Analytics: Just adjust the code in the init of CookiesEuBanner as following:

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; 
})

My banner was not showing either. Make sure that you don't already have the cookie "hasConsent=true" and/or check your browser security settings. i.e. Firefox: Website cookie settings