I am trying to add this: 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>

I am trying to add this: https://github./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 prepiled 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 wele.

Thanks in advance

• javascript
• ruby-on-rails
• webpacker

• My guess would be that javascript_pack_tag cannot take a relative path, or that the path is wrong – Eyeslandic Commented Jul 8, 2020 at 8:10
• I have also tried having the script directly in the app/javascript folder, and having this line in application.js: import './cookies-eu-banner'; - and then this in application.html.erb: <%= javascript_pack_tag 'application', 'cookies-eu-banner', 'data-turbolinks-track': 'reload' %>. - same result. – Mhon Commented Jul 8, 2020 at 8:14
• Perhaps you should do this: <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'cookies-eu-banner', 'data-turbolinks-track': 'reload' %> For every javascript file a separate tag. – Smek Commented Jul 8, 2020 at 9:41
• With the cookies-eu-banner directly in the packs folder, I get this in the source (html): <script src="/packs/js/cookies-eu-banner-fb929106868b767edaac.js"></script> <script type="text/javascript"> new CookiesEuBanner(function () { }); </script> So the js file is found by webpacker. – Mhon Commented Jul 8, 2020 at 9:55
• Would I need to export CookiesEuBanner from the original js script, or do I need to do something like import CookiesEuBanner from cookies-eu-banner, to access that function? – Mhon Commented Jul 8, 2020 at 9:58

2 Answers 2

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./rossta/rails6-webpacker-demo/pare/example/cookies-eu-banner

As I cannot ment 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./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