"Piwik opt-out for your visitors" - without iframe

I have enjoyed installing and using Piwik on my site these last several months. However I have come up against a problem with the cookie opt-out facility. I am endeavouring to improve the overall functional accessibility of my site and am using two of the standard validators to assist with this. The problem arises on my Cookies Policy page because the Piwik opt-out is included as an iframe.

I have been able to comply with the requirments of WCAG / Section508 (Cynthia Says) by some gentle tweaking of the iframe code (mainly adding required “content”)

I have been unable to satisfy the requirements of FAE1.1 - the University of Illinois Functional Accessibility Evaluator. This is because it treats the data embedded by the iframe as a separate document - and that document is not properly formatted according to its requirements. As the content and the function of the iframe appears really very small (a short text statement and a single checkbox) could this not be converted to a form or other devise which will incorporate directly into the page?

If you wish to test this, the following is my Cookie Policy page:

Cookie Policies

and this is the FAE1.1 test page:

University of Illinois FAE1.1

Many thanks for your help.

Alan

Hello Alan,

Thank you for pointing in this direction.

For the integration of using a CSS file for the iframe I had already modified the following file:
Template plugins/CoreAdminHome/templates/optOut.tpl

In this template it is possible to modifiy/integrate the missing parts.

However, according to “never hack core” this is only recommended if you can oversee the consequences.
The modification will be overwritten during an update.

Thank you for this hint.

Juergen

Hi Juergen

I have modified the optOut.tpl file by deleting the initial 7 lines up to and including and the last 2 lines ()

I left the insertion code in my GREY pages cookie.php as it was as an iframe.

http://www.craxford-family.co.uk/themegrey/cookies.php

This seems to work - certainly the text alters when you check and uncheck the checkbox. The page also validates correctly against the FAE1.1 evaluator. The problem which the unchanged tpl file causes is the introduction of a second header to the page.

It just remains to be seen whether my own actions (when I have opted out as administrator) remain unrecorded in analytics.

I realise I will need to make sure I carry out this deletion whenever there is a Piwik update.

Many thanks

Alan

Hi Alan,

With the iframe you usually insert another complete html page into your page. So you could open the content of the iframe independently using the source of the iframe.

As you implemented it now, this doesn’t work properly using the following URL:
http://www.craxford-family.co.uk/analytics/index.php?module=CoreAdminHome&action=optOut&language=en
The header parts are missing. However a browser shows the content.
When building a complete html document using the original template with some modifications you could still open the URL properly.

It is shown here how to implement the iframe with its own CSS:
http://www.josupeit.com/weblog~informatik-und-technik~web,piwik-opt-out-iframe.html
(Google translator :wink: )

My insert code inside the page is then adding the path for the CSS to the attribute:


<object width="100%" height="180px" style="border: 0" type="text/html" data="http://CounterSample.com/folder_name/index.php?module=CoreAdminHome&action=optOut&language=de&css=http%3a%2f%2fwww.sample.com%2ffirst_folder%2fsecond_folder%2fcss_folder%2fpiwik_iframe.css"></object>

It’s important to use an URL encoder for the CSS-path as described in the document above.

Nice solution as I can adjust the design of the iframe to the style of each website.

This is the result using my modfied template:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<title>Piwik Opt-Out</title>
</head>
<body>
<h1>Piwik Opt-Out</h1>
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool.
<br/>
Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
<br/><br/> 
<form method="post" action="?module=CoreAdminHome&action=optOut&language=en">
<input type="hidden" name="nonce" value="0f3b3c8523fa806652046b275f3f9125" ></input>
<input type="hidden" name="fuzz" value="1350725628"></input>
<input onclick="this.form.submit()" type="checkbox" id="trackVisits" name="trackVisits" ></input>
<label for="trackVisits"><strong>
You are currently opted out. Click here to opt in.			</strong></label>
</form>
</body>
</html>

, language to and

were added to comply with FAE requirements.

is then hidden using CSS.

I hope this will help if you want to adjust it.

Juergen

Hi Juergen

What I really want to do is to build the form part of the optout into my existing page without the use of an iframe at all. My existing page already has the necessary declarations, language and

- so the optout must not duplicate them. I can see that it would be possible to add a link entitled “If you want to opt out, click here” and that would open a new page.

In a similar manner, I had a lot of trouble validating pages that had an embedded active Google map in them (these were iframes) - again because FAE reports that the page had two headers and two title attributes. Eventually I cured this by replacing the map on the page with an image and referred to the active map as a link.

This is one remaining example of a map built using an external facility built as a standard html page which is then “included” on the page itself. This page will not validate:

THE CRANE FAMILY: MAPS: The Craxford Family Genealogy Magazine

Kind regards

Alan