Log in

View Full Version : Wanted: Script for cookie consent pop up message.


robertsaunders
08-20-2015, 06:09 PM
Google has told me that I need to obtain EU end users’ consent to the storing and accessing of cookies and other information if I want to continue using AdSense.

They have suggested links to various sites that offer scripts for pop up bars that disappear when you accept cookies (such as https://silktide.com/tools/cookie-consent/download/) but they don't allow me to customise the font and colours.

Can anyone suggest where I might be able to get a simple customiseable script? All I want is a simple bar at the top of the page with a message saying "This site uses cookies etc. " a link to "more info", and an "OK" button which makes the bar and message disappear when clicked.

Thanks

Rob
Beverleyh
08-21-2015, 12:22 PM
Hopefully this will help: http://www.dynamicdrive.com/forums/entry.php?319-Accept-Cookies-Cookie-Consent-Bar
robertsaunders
08-21-2015, 10:56 PM
Hopefully this will help: http://www.dynamicdrive.com/forums/entry.php?319-Accept-Cookies-Cookie-Consent-Bar

Thank you very much indeed, Beverley! That is just what I was after.

I understand all the HTML and CSS but I know very little about JS. Can I put the script into an external file and link to it, to save having to paste all the code into every page? And if so, how would I save the external file using notepad?

Also, if I've inserting the JS inline, does it matter where it goes or can I put it anywhere?

Thank you again.

Rob
Beverleyh
08-22-2015, 07:38 AM
Yes you can save it into an external file. For that you would open up Notepad (I think that's in Programs >> Accessories?) and copy+paste the JavaScript into it - just the code between the <script></script> tags - then save it with the .js extension. So you might call the file "cookie.js". You can type the full file name, including the .js extension, into the field for the file name when you save from Notepad. Then you upload the "cookies.js" file to your web server - let's say you save it in the main folder of your website. You would link to it from within your web page(s) like this;
<script src="/cookie.js"></script>You should put this JavaScript link reference above the closing </body> tag (it's preferred that way for almost all JavaScripts nowadays, so that the rest of the page can render without being blocked waiting for scripts to load).

Hope that helps
BorderTerroir
08-23-2015, 05:59 AM
Sorry Bev I can't get this to work.

Here's my test page;
http://www.castlefordheritagetrust.org.uk/zSandPit.php

I thought the problem might be with this line;
document.cookie = "consent=ok;path=/;expires="+d.toGMTString();

So I moved the js file to the root directory and it still doesn't work.

Where am I going wrong?

John
Beverleyh
08-23-2015, 06:16 AM
You've missed some of the code in the cookies.js file - there should be a line which adds a class of "js" to the <html> tag, and 3 lines where the variables are defined for cookie, btn and bar.

Have another look at the source of the demo page http://fofwebdesign.co.uk/template/_testing/cookie-consent.htm and copy+paste the whole code block (but not the block for my Google Analytics.
BorderTerroir
08-23-2015, 08:54 AM
Sorry Bev I'm still not there.

My js file now reads like this;


document.documentElement.className = 'js'; // adds .js class to <html> tag

var cookie = getCookie('consent'),
bar = document.getElementById('consent'),
btn = document.getElementById('ok');

btn.onclick = function() { // hide bar and set cookie when button is clicked
bar.style.display = 'none';
var d = new Date;
d.setTime(d.getTime()+24*60*60*1000*90); // 90 days
document.cookie = "consent=ok;path=/;expires="+d.toGMTString();
}

function getCookie(name) {
var v = new RegExp(name+"=([^;]+)").exec(document.cookie);
return (v != null) ? unescape(v[1]) : null;
}

bar.style.display = (cookie == 'ok') ? 'none' : 'table'; // hide bar if cookie is set

But it still doesn't work.

http://www.castlefordheritagetrust.org.uk/zSandPit.php

John
Beverleyh
08-23-2015, 09:06 AM
Correction - put the link reference to the JS file before the closing </body> tag.
BorderTerroir
08-23-2015, 09:31 AM
Many thanks that's sorted it.

You are a star!
robertsaunders
08-23-2015, 06:38 PM
Bev, thank you so much for your help. I've just added the code to http://www.curiouser.co.uk and it's working fine but I have a small issue. When I view the site on an iPad (Chrome and Safari) the bar does not stretch the full length of the screen - it only goes about 95% of the way across. Any ideas why this might be? I doesn't do it on your site but I can't work out what is making it do it on mine.

Rob
soundmonkey
08-29-2018, 03:44 PM
hi all new at all this

followed the instructions and got the cookies bar working but every time page refreshes or click to another page on site the bars back ? its not hiding for 90 days
any help greatly revived

thanks
soundmonkey