Piwik – iframe optOut Style anpassen
Piwik und WordPress zusammen um Statistiken zu sammeln.
Damit datenschutzrechtlich alles in Ordnung geht, kann man die Erfassung per Opt-Out deaktivieren. Dazu bindet man Code über ein iframe in die Webseite ein.
Problem ist jetzt, dass sich das zentrale CSS nicht auf das iframe auswirkt und somit die Darstellung auf der Webseite nicht schön aussieht.
Man muss also etwas Hand anlegen um den Style des Opt-Out iframe per CSS anzupassen.
Es soll aber in einem künftigen Release direkt in Piwik eine Möglichkeit geben -> siehe Ticket
Vorher ohne Styling
Piwik optOut Templatedatei bearbeiten
Das iframe von Piwik lässt sich durch direktes bearbeiten der Templatedatei anpassen.
- Datei optOut.tpl öffnen
piwik/plugins/CoreAdminHome/templates/optOut.tpl
- CSS direkt im Body-Tag per inline-Style einfügen
<body style="font-size:12px; font-family: Helvetica; color:#222222; line-height:20px;margin:0;">
Das Style-Tag lässt sich jetzt beliebig erweitern und an die eigenen Bedürfnisse anpassen
Bei einem Update von Piwik wird die Datei leider überschrieben und muss erneut angepasst werden!
Kleiner Tipp: Von der angepassten Datei eine Kopie machen und diese dann einfach nach dem Update wieder verwenden.
Piwik iframe einbinden
Den nötigen Code für das iframe findet man unter dem Register “Allgemeine Einstellungen”
<iframe frameborder="no" width="600px" height="200px" src="URL..."></iframe>
Bevor man den Code nun in die Webseite einbindet sollte man auch diesen anpassen, indem man die Werte für width und height an die eigenen Bedürfnisse anpasst.
<iframe frameborder="no" width="100%" height="180px" src="URL..."></iframe>
Nachher mit Styling
Ähnliche Artikel zu diesem Thema:
Vielen Dank für die kleine Anleitung. Leider ist bei mir alles im iFrame eingerückt. Wie bekomme isch es so hin, dass es mit dem normalen Text drüber bündig ist?
Besten Dank
Gruss Musterli
Wie genau meinst Du das mit dem Eingerückt?
Wenn Du für Firefox die Erweiterung Firebug installiert hast, könntest Du vielleicht genauer erkennen, ob es vom iFrame kommt, oder von der Platzierung des iFrames.
Evtl. ist ein Margin oder Padding definiert.
Hast du auch die Breite auf 100% festgelegt?
Wenns nicht klappt, kurz den Link zur Seite per Mail an mich, dann kann ich mir das genauer ansehen.
Danke! Werd ich gleich umsetzen …
Funktioniert einwandfrei. Danke.
Ich suche nach einer Lösung, in der ich nicht ein allgemeines Layout für das OupOut-Iframe festlege, sondern dies abhängig vom Webprojekt anpassen kann.
Klar liegt man sicherlich mit Arial und 12px Schriftgröße oft schon mal ganz gut, aber oftmals passt es am Ende doch nicht.
Hi Daniel,
verstehe ich es richtig, dass Du eine PIWIK-Installation für mehrere Projekte nutzt und jetzt gerne für jedes Projekt ein individuelles Template verwenden möchtest.
Wenn das so ist, ist mir leider keine Lösung bekannt.
Ja, genauso ist es. Betreue mehrere Piwik-Installationen, die jeweils zwischen 1 bis 100 Webprojekte tracken. Dafür wäre es halt nicht das Schlechteste, wenn zumindest unterschiedliche CSS-Dateien verwendet werden könnten.
Eine Möglichkeit bei der man Unterschiedliche css Dateien nutzen kann suche ich auch.
Leider bin ich bisher nicht fündig geworden.
Na hoffen wir mal, dass der CSS-GET-Parameter so schnell wie möglich Einzug hält. Sonst wird ja quasi jedes Impressum zum Schandfleck auf der Seite
So richtig weiss ich auch aktuell nciht wo es an http://dev.piwik.org/trac/ticket/1929 hakt… seit 2 monaten keine Bewegung mehr im Ticket…
Hoffen wir, dass es bald umgesetzt wird
Ich brauchte heute auch eine möglichkeit für verschiedene Piwik-Projekte auf einer Piwik Installation (extern gehostet) unterschiedliche Css Dateien verwenden zu können.
Dazu habe ich das Plugin: “CoreAdminHome” in Piwik etwas modifiziert und kann nun im iFrame die Url um den Paramter &appendCss=url_der_css_datei ergänzen.
Funktioniert bei mir soweit auch ganz gut.
Die modifizierten Dateien gibts hier zum Download: https://www.dropbox.com/s/i1kea7jlsx0k7h4/piwik_optOut_appendCss.zip?v=0swn-
(Piwik Version: 1.11.1)
die Einbindung sieht in der Praxis dann so aus:
@Tanyll
Super Tipp, Danke.
Kannst Du mir den Code per Mail schicken. Irgendwie hat das bei dem Kommentar nicht geklappt.
Ich hatte aufgrund deines Artikel nochmal intensiver nach einer Lösung gesucht und irgendwann eine Lösung zum Stylen des Iframes gefunden. Anleitung unter: http://www.redirect301.de/piwik-optout-iframe.html
Hierbei wird ein GET-Parameter an die Iframe-URL angehangen und so eine separate CSS-Datei übergeben.
@Daniel: Vielen Dank. Sehr gute Anleitung