Working test page

After deciding to go with JQuery instead of JavaScript with Ajax, I started initial coding for the solution. I created two buttons (one for accept the other for declining), then added event handlers onto each to run a function based on the user accepting/declining the use of cookies. Then I created a function to set a cookie to show the person had accepted the rules and attached this to the accept event.

I then created a function to check if a cookie already exists to show that the user has accepted the use of cookies on the website. The next stage was to write a function which would add/load to the end of the body tag dynamically, google analytic files and account code also with the JavaScript file for our affiliate system. Although my coding worked and inserted the files thy would not execute properly and thus not track in Google Analytics. A quick search online discovered many other developers who had tried the same thing as myself and came up against the same issue. I did find a solution online with I modified slightly to work on our website.

Once I had all of this functioning properly, I started to code a function that would dynamically create box at the top of the page (this would sit on top over the website) telling the user about the law change and asking if they want to accept or decline. The box also has a funky transition to appear on the page.

When this was all working and I switched the event handlers to the new buttons on the dynamically loaded page. I also create a call once the page was loaded to check if there was a cookie already set that the user had accept cookies. If they had then the box does not appear and the Google analytic code is inserted into the page dynamically and tracks. If there is no cookie (this has to happen if they set to decline as you can’t set a cookie to say they decline cookies), the box appears and the question is asked. Finally I also added a slide out to the box once the user had accepted or declined.

With the way this is coded there is minimum amount f amends to existing pages. There need only be 2 new lines of code added in the head of the html page to load the JQuery library and the script and it works automatically. Obviously with this solution it relies on the user having JavaScript switched on, but unfortunately due the way the site works/is built this is our only solution. Thankfully in coding the solution this way we have more range with it and ability to amend and adapt it rather than using the online solution we found.

Here is a test page showing the stript, Open it here