Basic plugin to easily add an opt-in for EU cookie compliance
Adds a container, a message, opt-in/opt-out links and a link to a read more/privacy page. The message will be displayed on the page it is installed on every time the page is loaded until the visitor opts-in. If/when the visitor opts-in, the message will be removed and a cookie will be set to stop the message being displayed on subsequent visits. By default, the Google Analytics async script will be inserted once the visitor opts-in and on subsequent visits.
This plugin is dependent on jQuery and the jquery.cookie.js plugin.
Hooks for styling are provided and you are encourged to decorate it using CSS.
For a visual demonstration of its behaviour, with a custom skin added independantly of the plugin itself, visit www.dhaus.com
To use without configuration simply include jQuery, the jQuery Cookie Plugin and this plugin (in that order) and then call $.cookieconsent() after page load.
Configurable options:
| Option | Default setting | Usage |
|---|---|---|
| containerId | "consentWidget" | The id attribute added to the widget container |
| message | "This site wishes to use cookies in order to provide a better experience." | The message displayed in the widget |
| messageContainer | "span" | The container element for the message |
| messageClass | "message" | The class name added to the message container |
| addReadMoreLink | false | Adds a link to a read more page to the widget |
| readMoreHref | "" | Sets the href of the read more link. This option must be configured if a read more link is added |
| readMoreClass | "read-more" | Adds a class name to the read more link |
| readMoreText | "Find out more" | The text for the read more link |
| readMoreContainer | "" | A container for the read more link |
| readMoreContainerClass | "" | Adds a class name to the read more link container |
| readMoreRel | "" | Sets a rel attribute to the read more link |
| uiContainer | "fieldset" | A wrapping element for the question and yes/no links |
| uiClass | "" | A class name for the UI container |
| questionText | "Do you consent?" | The text of the consent question |
| questionClass | "" | Adds a class name to the question element (a ) |
| confirmLinkId | "yes" | The id attribute added to the 'yes' consent link |
| confirmLinkText | "Yes" | The text added to the 'yes' consent link |
| confirmLinkClass | "" | Adds a class name to the 'yes' consent link |
| denyLinkId | "no" | The id attribute added to the 'no' consent link |
| denyLinkText | "No" | The text added to the 'no' consent link |
| denyLinkClass | "" | Adds a class name to the 'no' consent link |
| widgetContainer | "#form1" | The container element the consent widget is added to (works out of the box with .net webforms) |
| insertAtBeginning | true | Appends the widget to the container element. Set to false to prepend instead |
| cookieExpiry | 3650 | The number of days the cookie will live for |
| analyticsInject | [see below*] | The analytics script injected in the <head> of the page |
Events:
| Event | Fired when... | Lifecycle |
|---|---|---|
| displayed | The consent bar is displayed | Fired once, only if cookie not already set |
| consented | The consent link is clicked | Fired once, only if cookie not already set |
| denied | The deny link is clicked | Fired once per session, only if cookie not already set |
| cookieset | The consent cookie is saved | Fired once, whencookie is set the first time |
| analyticsInjected | The analytics script is injected | Fired once per session when cookie is set |
By default this plugin injects the standard async Google Analytics tracking code into the head of the page once consent to set cookies has been provided, e.g:
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
The widget does not set the UA account number; this, along with other GA requirements such as trackPageview, should be set in the normal way.
Other analytic scripts may be used by overriding the analyticsInject option, for example, to use Get Clicky, you could use this:
$.cookieconsent({
analyticsInject: function() {
var gc = document.createElement('script');
gc.type = 'text/javascript';
gc.src = ('//static.getclicky.com/js');
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gc, s);
try { clicky.init(#########); } catch (e) {}
}
});
Where ######### is your Get Clicky account number.