Tuesday, 28 July 2015

Change Blogger's "Cookie Consent" bar


If like me you are a user of blogger you will have no doubt notice that Google have kindly added a cookie consent message to your blog.


You may have also seen the announcement when signing into the blogger


Leading you to here to find about more information, including details on how to change the cookie consent bar to be appropriate for your blog.

If you want to change the values in the pop-up bar you can do so by adding a <script> tag into your templates <head>.

Log into Blogger, select Template from the menu and choose "Edit HTML" under the template.

In between the <head> and </head> tags you need to add a script tag and set a variable called "cookieOptions" which contains a json data e.g.:

<script>cookieOptions = {"msg": "This website uses cookies to ensure you get the best experience", "link": "http://www.stuffaboutcode.com/p/about.html", "close": "Ok", "learn": "More" };</script>

Will change the bar to:


The tags all change particular elements of the bar:
  • msg = the message displayed in the box
  • link = the url which clicking "Learn More" will redirect too
  • learn = the text in the "Learn More" button
  • close = the text in the "Got it" button
Note - the official page says the "msg" tag is actually "message", this is incorrect, changing "message" wont affect it.

You don't have to change all the elements, if you just wanted to change the message you could use:

<script>cookieOptions = {"msg": "This website uses cookies to ensure you get the best experience"};</script>

and all the other elements would remain the same.

You can also disable the bar setting cookieChoices to a blank json document using:

<script>cookieChoices = {};</script>


12 comments:

  1. Hi! do you know if we can change with same the color and size of it? And the place? I prefer the bottom?

    Thanks
    Aurélie

    ReplyDelete
    Replies
    1. I dont think so... You can turn it off though and use a different one. I would recommend https://silktide.com/tools/cookie-consent/, this is what I was using prior to blogger introducing their own.

      Delete
    2. Thanks so much, I will wait if I find a reply on the web ;) kiss

      Delete
  2. In the code example you put a semicolon instead of a comma, so you have:

    "[...] experience";

    but it should be:

    "[...] experience",

    It's only a tiny mistake, but since I'm not very experienced with this code, it took quite a while for me, to understand what I had to change.

    ReplyDelete
    Replies
    1. Thanks, it looks like a cut and paste error... Post updated.

      Delete
  3. Actually, to disable the bar use cookieChoices
    cookieOptions won't work

    ReplyDelete
    Replies
    1. I also found cookieOptions doesn't work.
      I solve this problem in my blog until I see your comment. Thanks.

      Delete
  4. excuse my lack of knowledge, but which lines in the html edit should i be looking at to insert the edit? or is there a widget i add?

    ReplyDelete
    Replies
    1. 'Log into Blogger, select Template from the menu and choose "Edit HTML"'

      and

      'In between the head and /head tags'

      Delete
  5. You've actually taught me something. I didn't realize you could share custom stuff. Then I found this post of theirs that indicates you can. Sharing is only with friends and I don't see any way to add a barcode, but that would be a good idea for packaged stuff.
    Buy UPC Bar Codes Online

    ReplyDelete
  6. In mobile version cookies bar is still visible when you put cookieOptions = {"msg": "This website uses cookies to ensure you get the best experience"};

    Any idea how to fix it?

    Thanks

    ReplyDelete