forked from cdwharton/cookieCuttr
-
Notifications
You must be signed in to change notification settings - Fork 2
/
implementation-guide.txt
248 lines (152 loc) · 11.2 KB
/
implementation-guide.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
What is CuttACookie?
##########################
NEW!! Due to further developments on the EU Cookie law, I've added a slightly softer option, an accept/decline message that you can display on just your policy page. You can use this on its own or in conjunction with a standard (or discreet) message on the rest of your website by combining the options below, take a look at the demos.
I've been trying to come up with a way of implementing a sensible solution to the impending EU cookie law due to be enforced on 26th May. I wanted to develop something I could use easily and add to all of my client websites and my own websites with a really quick and configurable implementation.
I've come up with a tailorable solution, depending on how you or your client chooses to “interpret” the new law.
Now that the ICO have announced "implied consent" is acceptable as long as you clearly signpost the Privacy Policy, I have interpreted the law as follows:
The website is only going to store cookies that are seen as essential to the functionality of the website. e.g. a shopping cart requires cookies for login, remembering cart items - they’re ok
The website is going to store all other non essential cookies until the website visitor declines, as long as I have clearly signposted the Privacy Policy.
UPDATE!! Due to further developments on the EU Cookie law, I've added a slightly softer option, an accept/decline message that you can display on just your policy page.
You can read more about the EU Cookie Law here:
http://www.123-reg.co.uk/blog/security-issues/is-the-eus-cookie-law-confusing-you-too/
http://www.ico.gov.uk/for_organisations/privacy_and_electronic_communications/the_guide/cookies.aspx
http://chriswharton.me/2012/05/cookies-doing-nothing-isnt-the-right-answer/
To try and explain the impact of declining (or not accepting) cookies I've added the following on to my company website in the privacy policy:
"PLEASE NOTE, not accepting the below cookies will severely harm our business, we will no longer be able to track visits to our website, see what the most popular pages are or devices looking at our website, it will be the equivalent of running a sweet shop, blindfolded with no stock-taking facility available."
What do you need?
##########################
- jQuery library (http://jquery.com)
- The jQuery Cookie plugin (https://github.com/carhartl/jquery-cookie)
- This plugin - 1 JavaScript file and 1 CSS file
- Espresso or Notepad or your code editor of choice :)
Implementation
##########################
If you don't mind a number of http connections, include all of the above individually as follows in the <head> section of your HTML (HTML5 markup).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='assets/js/libs/jquery-1.7.1.min.js'>\x3C/script>")</script>
<script src="jquery.cookie.js"></script>
<script src="jquery.cookiecuttr.js"></script>
These files must all run BEFORE any other javascript on the page, I know some people like to add jQuery to the end of the document to speed up page load and you can do if you can control the third party software on your website, if you can’t its best to add it to the head, I’ll detail exactly why later.
Add in the link to the CSS file underneath all of your other CSS files
<link rel="stylesheet" href="cookiecuttr.css">
if you'd like to support IE7 and IE8 include the following CSS file
<link rel="stylesheet" href="cookiecuttr.ie8min.css">
For any JavaScript you want to disable, you need to wrap the following if statement around it:
if (jQuery.cookie('cc_cookie_accept') == "cc_cookie_accept") {
// insert the code you do not want to run UNTIL cookies are accepted here
}
For example, lets take the most common example, Google Analytics, you can do the following:
<script>
if (jQuery.cookie('cc_cookie_accept') == "cc_cookie_accept") {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
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);
})();
}
</script>
Or you can do the following to enabled UNTIL cookies are declined:
<script>
if (jQuery.cookie('cc_cookie_decline') == "cc_cookie_decline") {
// do nothing
} else {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
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);
})();
}
</script>
You just then need to call the function to run CookieCuttr - you can add this to your page, anywhere underneath the initial files you loaded in the head within the following code, the default setup will show the standard analytics message:
$(document).ready(function () {
$.cuttACookie();
});
You can also add this in to a central JavaScript file you may use to run your website.
I’ve included a generic CSS file which will give you some essence of style out of the box, with responsive media queries for tablet and mobile breakpoints.
I've also setup a jQuery variable that you can wrap around any jQuery elements:
if( $.cookieAccepted() ) {
// insert the code you do not want to run UNTIL cookies are accepted here
}
Options
##########################
I’ve added the following options within the plugin, these will give you ultimate control when deploying the plugin.
cookieCuttrCompatible - if you want to replace your current cookiecuttr implementation with CuttACookie set cookieCuttrCompatible to true in the options, and it should work out of the box.
cookieCutter - if you'd like to actively hide parts of your website set this to true, for example say you use a comments system that inserts cookies, you can put the div name in below to replace it with a cookie warning message.
cookieAnalytics - if you are just using a simple analytics package you can set this to true, it displays a simple default message with no privacy policy link - this is set to true by default.
cookieDeclineButton - if you'd like a decline button to (ironically) write a cookie into the browser then set this to true.
cookieAcceptButton - set this to true to hide the accept button, its set to false by default
cookieResetButton - if you'd like a reset button to delete the accept or decline cookies then set this to true.
cookieOverlayEnabled - don't want a discreet toolbar? this makes the whole message into a 100% height
cookiePolicyLink - if applicable, enter the link to your privacy policy in here - this is as soon as cookieAnalytics is set to false.
cookieMessage - edit the message you want to appear in the cookie bar, remember to keep the {{cookiePolicyLink}} variable in tact so it inserts your privacy policy link.
cookieAnalyticsMessage - edit the message you want to appear, this is the default message.
cookieWhatAreTheyLink - edit the link for the 'What are Cookies' link.
cookieErrorMessage - edit the message you'd like to appear in place of the functionality
cookieNotificationLocationBottom - this is false by default, change it to true and the cookie notification bar will show at the bottom of the page instead, please note this will remain at the top for mobile and iOS devices and Internet Explorer 6.
cookieDisable - list elements comma separated in here that you want to disable, this will only work if cookieCutter is set to true.
cookieAcceptButtonText - you can change the text of the green accept button.
cookieDeclineButtonText - you can change the text of the red decline button.
cookieResetButtonText - you can change the text of the orange reset button.
cookieWhatAreLinkText - you can change the text of the "What are Cookies" link shown on Google Analytics message.
cookiePolicyPage - set this to true to display the message you want to appear on your privacy or cookie policy page.
cookiePolicyPageMessage - edit the message you want to appear on your policy page.
cookieDiscreetLink - false by default, set to true to enable
cookieDiscreetLinkText - edit the text you want to appear on the discreet option.
cookieDiscreetPosition - set to topleft by default, you can also set topright, bottomleft, bottomright.
cookieDomain - empty by default, add your domain name in here without www. or https:// or http:// to remove Google Analytics cookies on decline.
cookieAcceptName : Name of "cookies accepted" cookie, default is "cc_cookie_accept".
cookieAcceptValue : Value of the "cookies accepted" cookie, default is "cc_cookie_accept".
cookieDeclineName : Name of "cookies declined" cookie, default is "cc_cookie_decline".
cookieDeclineValue : Value of the "cookies declined" cookie, default is "cc_cookie_decline".
cookieClickableOverlay : empty by default, set true to add a div with a onclick event for accepting cookies.
cookieClickableDiv : The id of a div to attach a accept onclick event to that div. Works in combination with cookieClickableOverlay. When empty a div "cc-cookies-bodywrapper" will be wrapped into the body.
cookieClickAnyLink : false by default, when true a onclick will be added to all links inside the page. Any link clicked inside the page will be seen as cookie acceptance
Implementing on a CMS?
##########################
I’ve tested the above on WordPress and it works fine, obviously you only need to load the files that the CMS doesn’t use. I’ve found that if you implement the code in the <head> of the HTML and you are using a third party plugin (that you don’t want to start hacking apart) that the third party cookie is not stored in the browser. Be warned though, I’ve only tested this on my implementations and you need to test this on every website you implement.
Demos
##########################
Just Analytics?
Options:
cookieAnalytics: true,
cookieAnalyticsMessage: "message",
cookieWhatAreTheyLink: '/insert-link/'
You have a privacy/cookie policy?
Options:
cookieAnalytics: false,
cookiePolicyLink: ‘/insert-link/’,
cookieMessage: Message <a href="{{cookiePolicyLink}}" title="read about our cookies">read about them here</a>
Disable parts of your page and display a message?
Options:
cookieCutter: true,
cookieAnalytics: false,
cookiePolicyLink: ‘/insert-link/’,
cookieDisable: ‘.divnamehere’
You want an explicit decline button?
Options:
cookieDeclineButton: true
You want an explicit cookie reset button?
Options:
cookieResetButton: true
You want a different message on your policy page?
Options:
cookiePolicyPage: true,
cookieDeclineButton: true,
cookiePolicyPageMessage: 'You can change the message here'
You want a really discreet box, which you can position? View
Options:
cookieDiscreetLink: true,
cookieDiscreetPosition: "topright",
cookiePolicyLink: "/privacy-policy/"
You want no message on any page, apart from the privacy policy page?
Options:
cookieNoMessage: true
You want to Delete Google Analytics Cookies when declined?
Options:
cookieDomain: "yourdomainhere.com"