Die Möglichkeit bei der Webanalyse-Software Piwik eine OptOut-Option den Webseiten-Besuchern anzubieten, wurde von Anfang an von den Datenschützern in Deutschland sehr begrüßt. Auf vielen mit Piwik arbeitenden Internetpräsentationen findet sich irgendwo im Impressum oder in den Datenschutzhinweisen ein mehr oder weniger passend gestaltetes Inhaltselement, das dem Besucher das Aktivieren bzw. Deaktivieren einer statistischen Erfassung auf der jeweiligen Webseite ermöglicht.

Dieser Artikel beantwortet Fragen, die mir immer wieder beim Thema „Piwik & OptOut“ begegnen. Fragen zum Styling des Iframes per CSS, zur Einbindung in eine Webseite wie zum Beispiel WordPress und anderen Content Management Systemen, zum Piwik OptOut-Cookie sowie zu inhaltlichen Anpassungen des OptOut-Templates (optOut.tpl).

Antworten auf häufig gestellte Fragen zum Piwik OptOut-Iframe


Überarbeiteter HTML-Code für das OptOut-Iframe

Wer den von Piwik unter Einstellungen/ Privatsphäre bereitgestellten HTML-Code eins zu eins in seine Webseite einbindet, wird sicherlich sofort merken, dass dieser – neben den Schriftformatierung und den Farben – nicht zu 100% passt. Es sind nur ein paar Pixel, die die Frame-Inhalte zu weit nach rechts verschieben und auch die Breite passt oft nur bedingt. Diesen Code-Schnipsel einfach um ein paar Anweisungen erweitern und schon fügt sich das Iframe besser in die eigene Seite ein:

<iframe src="http://die-eigene-piwik-domain.de/index.php?module=CoreAdminHome&action=optOut&language=de" height="220" width="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

Eine kurze Erläuterung der hier genutzten Attribute:

  • width=“100%“ – nutzt die komplette, zur Verfügung stehende Breite im eingefügten Bereich der Webseite
  • height=“220″ – die Höhe des Iframes (hier 220 Pixel) richtet sich nach der Länge des OptOut-Textes, der zur Verfügung stehenden Breite sowie der Schriftgröße und -art (ausprobieren und an die eigenen Bedürfnisse anpassen, in unterschiedlichen Browsern und in beiden Varianten, mit und ohne Tracking, testen)
  • frameborder=“0″ marginwidth=“0″ marginheight=“0″ vspace=“0″ hspace=“0″ – sind zwar alles in HTML5 nicht mehr offiziell unterstützte Angaben zu Rahmenbreiten und Abständen innerhalb des Frames, aber sie sorgen für eine optimale Ausrichtung innerhalb des Iframes und funktionieren
  • scrolling=“no“ – verhindert die Anzeige eines Scrollbalkens innerhalb des Iframes

Das Piwik OptOut-Iframe formatieren

Wer seine Piwik-Installation lediglich für einen Internetauftritt oder optisch ähnliche Websites betreibt, kann das Layout des OptOut-Iframes sehr schnell anpassen. Hierfür die Template-Datei optOut.tpl unter /plugins/CoreAdminHome/templates bearbeiten und mit einem allgemeingültigen Sytle versehen.

Zum Beispiel zwischen <head> und </head> ein paar, an das eigene Design anzupassende, Grundformatierungen vornehmen:

<style type="text/css">
<!--
body {
    background: #cc0000;
    font-family: Arial, Verdana, sans-serif;
    font-size: 13px;
    color: #111;
    line-height: 22px;
}
-->
</style>

Eine andere Möglichkeit ist, eine zusätzliche CSS-Datei einzubinden, in der die Stlye-Angaben für das OptOut-Iframe hinterlegt werden. Dazu eine Datei mit dem Namen optOut.css unter /plugins/CoreAdminHome/templates ablegen und in /plugins/CoreAdminHome/templates/optOut.tpl zwischen <head> und </head> die folgende Zeile schreiben:

<link href="http://die-eigene-piwik-domain.de/plugins/CoreAdminHome/templates/optOut.css" rel="stylesheet" type="text/css" />

Unter HTML5 sollte eigentlich das Attribut seamless dafür sorgen, dass ein Iframe das Look & Feel von der umgebenden Seite übernimmt. Wenn alle Webseiten-Besucher mit dem Chrome unterwegs wären, würde ich diese Alternative bevorzugen und auf ein zusätzliches Style verzichten.

Unterschiedliche CSS-Styles für das Piwik OptOut-Iframe

Wer mehrere Domains mit einer Piwik-Installation betreibt, kommt irgendwann an den Punkt, wo das Standard-Layout des Piwik OptOut-Iframes einfach nicht zum Design der Webseite passt, in der die OptOut-Möglichkeit eingebunden ist. Begnügte ich mich anfänglich noch mit der Einbindung einer CSS-Datei im OptOut-Template, scheitert diese Lösung aber spätestens dann, wenn das Design eben mal nicht „Standard“ ist, sondern andere Farben, Schriften usw. verwendet werden.

Die Lösung des Problems: Eine eigene CSS-Datei wird per get-Parameter mit der Iframe-URL übergeben und im optOut-Template kümmern sich 2 zusätzliche Smarty-Code-Zeilen um die entsprechende Verarbeitung.

<iframe src="http://die-eigene-piwik-domain.de/index.php?module=CoreAdminHome&action=optOut&language=de&cssfile=http://www.die-eigene-webadresse.de/pfad/zum/css/piwik.css" height="200" width="100%" frameborder="no"></iframe>
  • &cssfile=http://www.die-eigene-webadresse.de/pfad/zum/css/piwik.css – der Parameter cssfile bekommt an dieser Stelle die Webadresse zu einer individuellen CSS-Datei (durch die eigene URL ersetzen)

Die Web-Adresse zu eurer eigenen Piwik-Installation sowie den Pfad zur jeweiligen CSS-Datei müsst ihr natürlich anpassen!

Individuelle CSS-Datei für OptOut-Iframe

body {
    background:transparent;
    letter-spacing:0.1em;
    text-align:justify;
    font-family:Georgia, sans-serif;
    font-size:13px;
    color:#444;
    line-height:22px;
}

Das CSS an die eigenen Bedürfnisse anpassen und per FTP auf den Webspace laden, in dem es verwendet werden soll. Im hier verwendeten Beispiel habe ich diese kleine CSS-Datei einfach piwik.css genannt. Prinzipiell ist es völlig egal wo die CSS-Datei liegt und wie sie heißt, sie muss lediglich im Browser erreichbar sein.

Aufruf der piwik.css im Browser

Aufruf der piwik.css im Browser

Anpassung der Template-Datei optOut.tpl

Zum einen wird der hier fett geschriebene Bereich zwischen <head> und </head> eingebunden. Die verwendete PHP Template Engine Smarty prüft hierbei, ob der Parameter cssfile übergeben wurde und wenn ja, dann wird der Stylesheet-Aufruf in die HTML-Seite, dem OptOut-Iframe, eingebunden. Falls der Parameter nicht an die Iframe-URL angehangen wurde, überspringt/ ignoriert Smarty diese Anweisung.

<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″ />
{if isset($smarty.request.cssfile)}
<link rel=“stylesheet“ type=“text/css“ href=“{$smarty.request.cssfile|strip_tags|escape}“ />
{/if}

</head>

Weiter unten im optOut.tpl, im Bereich des Formulars, wird ein verstecktes (hidden) Formularfeld eingefügt. Dies sorgt dafür, dass die eigene CSS-Datei auch dann geladen wird, wenn das Formular abgeschickt – die Checkbox an- bzw. abgewählt – wurde.

<form method=“post“
{if isset($smarty.request.cssfile)}
<input type=“hidden“ name=“cssfile“ value=“{$smarty.request.cssfile|strip_tags|escape}“></input>
{/if}

Die vollständige Template-Datei könnt ihr euch hier als Text-File herunter laden. Die Datei optOut.txt in optOut.tpl umbenennen und in euer Piwik-Verzeichnis unter /plugins/CoreAdminHome/templates auf den Server laden.

Individuelle Texte für das OptOut-Iframe

Wem die Texte innerhalb des OptOut-Iframes nicht zusagen, kann diese problemlos in Piwik an die eigenen Bedürfnisse anpassen. Unter /lang im Piwik-Verzeichnis lassen sich praktisch alle Textpassagen in rund 50 Sprachen individuell einrichten. Die Datei de.php steht dabei für deutsch, in der sich der angezeigte Iframe-Text aus mehreren Teilen zusammen setzt.
Zum Beispiel aus CoreAdminHome_YouMayOptOut, CoreAdminHome_YouMayOptOutBis, CoreAdminHome_YouAreOptedIn und so weiter. Eine Suche nach den jeweiligen Textbausteinen und deren Ersetzungen mit Hilfe eines Text-Editors ist sicherlich die praktikabelste Lösung.

Einbindung des OptOut-Iframes in einen CMS-Artikel

Egal ob bei WordPress, Joomla, Typo3 oder einem beliebigen anderen Content Management System mit einem Editor zum Verfassen neuer Beiträge. Sobald das System es zulässt, Inhalte im HTML-Modus einzugeben, stellt die Einbindung des Piwik OptOut-Iframes auch kein Problem mehr dar.

Dazu den gewünschten Text zum Beispiel innerhalb der Datenschutzerklärung verfassen und im Abschnitt „Piwik“ in den HTML-Modus des Editor wechseln. Nun an der gewünschten Position den o.g. und anzupassenden Code-Schnipsel einfügen. Zurück zur visuellen Editor-Ansicht wechseln, speichern, fertig.

Piwik OptOut-Iframe in WordPress einbinden

Piwik OptOut-Iframe in WordPress einbinden

Das Iframe lässt sich natürlich auch direkt im Template (bei WordPress z.B. in der sidebar.php) bzw. als Widget nutzen. Bei Typo3 ist sicherlich ein eigenes Content-Element die bessere Lösung.

Per Cookie dem Tracking widersprechen

Besucher einer Webseite können dem Tracking ihrer Seitenaufrufe „widersprechen“, indem sie durch das OptOut-Verfahren einen entsprechenden Cookie auf ihrem Rechner speichern. Das Entfernen des Hakens im OptOut-Kontrollkästchen des Iframes bewirkt, dass ein Cookie (eine kleine Textdatei) namens piwik_ignore abgelegt wird und für 1 Jahr gültig bleibt. Solange der Cookie nicht gelöscht wird, verzichtet Piwik bei diesem Rechner und Browser auf eine statistische Erfassung der Aktivitäten.

Cookie: Piwik Ignore

Cookie: Piwik Ignore

Das Setzen dieses Cookies wirkt sich übrigens auf alle Webseiten aus, die eine gemeinsame Piwik-Installation nutzen und dabei die selbe URL für die Einbindung des Piwik-Scripts verwenden. Möchte man dies bei einer Multisite-Verwendung von Piwik ausschließen, empfiehlt es sich Server-Aliase für die Piwik-Einbindung zu nutzen.

Ein paar abschließende Worte

Achtung! Die vorgenommen Änderungen im Template oder in den Sprachdateien werden bei künftigen Piwik-Updates derzeit überschrieben und müssen erneut vorgenommen werden.

Wer hierfür eine praktikable Lösung oder noch etwas zu diesen Artikel beizutragen hat kann diese Informationen gern in den Kommentaren hinterlassen.

Die Hinweise zur Nutzung eines eigenen Styles habe ich bei www.datenreise.de gefunden, sofort ausprobiert und als die von mir schon seit längerem gesuchte Problemlösung empfunden. Danke an dieser Stelle an den Verfasser Manuel Dietrich.