Cookie Consent in Flare

Adding a cookie alert to Madcap Flare projects

With thanks to Wouter Veeken for feedback.

At one of my former employers we built our docs in Madcap Flare, and use Google Analytics to track user interaction with our documentation. It helped us know if the materials are actually being read, which topics are most used, and so on. In order to track users, Google Analytics stores cookies in users’ browsers. EU law requires any website or app that uses cookies to explicitly warn users and get their consent. To comply with this, I added an alert to all pages in all our projects. This post explains how I did that.

Go to Cookie Consent. This is a free, open source cookie consent javascript library, under MIT licence.

On their download page, configure your alert using their GUI. This includes setting the position of the alert, colours and text.

Copy the generated code, and paste it into the header on your Flare masterpage(s). In our projects we use two master pages, one for the homepage and one for all other topics. So the code has to be pasted in to both. The initial code will look something like this:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){     
     window.cookieconsent.initialise({
        "palette": {
            "popup": {
                "background": "#333f48",
                "text": "#ffffff"
            },
            "button": {
                "background": "#ffffff",
                "text": "#000000"
            }
        },
        "position": "top",
        "content": {
            "message": "<your cookie message>",
            "dismiss": "Continue",
            "link": "Privacy Policy",
            "href": "<url to your privacy policy>"
        }
    });
});    
</script>

Optional step: whenever possible, I like to host files myself, rather than pull them from a CDN. You can get the minified files from Cookie Consent’s github repo. Copy the files from the /build/ folder.

Place the files with your other CSS and JS files in your Flare project. Modify the paths accordingly:

<link rel="stylesheet" type="text/css" href="../Stylesheets/cookieconsent.min.css" />
<script src="../Javascript/cookieconsent.min.js"></script>

Ensure users only have to accept cookies once

We don’t want users to see this alert every time they come to the documentation. Cookie Consent automatically adds a cookie when the user clicks to accept cookies, but we need to modify the code to check for this. We wrap the existing code in the following:

if(window.cookieconsent.utils.getCookie("cookieconsent_status") != "dismiss")

Here is the full code:

<link rel="stylesheet" type="text/css" href="../Stylesheets/cookieconsent.min.css" />
<script src="../Javascript/cookieconsent.min.js"></script>
window.addEventListener("load", function(){         
    if(window.cookieconsent.utils.getCookie("cookieconsent_status") != "dismiss"){          
        window.cookieconsent.initialise({
            "palette": {
                "popup": {
                    "background": "#333f48",
                    "text": "#ffffff"
                },
                "button": {
                    "background": "#ffffff",
                    "text": "#000000"
                }
            },
            "position": "top",
                "content": {
                    "message": "<your cookie message>",
                    "dismiss": "Continue",
                    "link": "Privacy Policy",
                    "href": "<url to your privacy policy>"
                }
            });
        }
    });
</script>