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 nicht angepasst

Piwik optOut Templatedatei bearbeiten

Das iframe von Piwik lässt sich durch direktes bearbeiten der Templatedatei anpassen.

  • Datei optOut.twig öffnen
    piwik/plugins/CoreAdminHome/templates/optOut.twig
  • 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

Piwik OptOut angepasst

18 Kommentare
  1. Musterli sagt:

    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

  2. Christian sagt:

    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.

  3. Simon sagt:

    Danke! Werd ich gleich umsetzen …

  4. Mat sagt:

    Funktioniert einwandfrei. Danke.

  5. 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.

  6. Christian sagt:

    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.

  7. 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.

  8. Denis sagt:

    Eine Möglichkeit bei der man Unterschiedliche css Dateien nutzen kann suche ich auch.
    Leider bin ich bisher nicht fündig geworden.

  9. Florian sagt:

    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…

  10. Christian sagt:

    Hoffen wir, dass es bald umgesetzt wird :-)

  11. Tanyll sagt:

    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)

  12. Tanyll sagt:

    die Einbindung sieht in der Praxis dann so aus:

  13. Christian sagt:

    @Tanyll
    Super Tipp, Danke.
    Kannst Du mir den Code per Mail schicken. Irgendwie hat das bei dem Kommentar nicht geklappt.

  14. 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.

  15. Christian sagt:

    @Daniel: Vielen Dank. Sehr gute Anleitung

  16. Jörg sagt:

    Seit Piwik 2.0.1 ist diese Änderung in die Datei:

    piwik/plugins/CoreAdminHome/templates/optOut.twig

    gewechselt.

  17. Hallo Jörg,

    vielen Dank für den Hinweis. Ich werde das gleich abändern.

  18. Martin Piontek sagt:

    Pro Domain ist doch auch kein Problem nehme ich mal an. Einfach den Host abfragen und entsprechend über eine case Abfrage entsprechende CSS Datei einbinden. Oder eben einen GET Parameter im Template Abfragen in dem der absolute Pfad zur CSS Datei serialisiert drin steht und den dann ausgeben (wobei sicher ein Fallback nötig wäre, falls der Parameter nicht gesetzt ist oder entsprechende Datei nicht gefunden wird).

Hinterlasse eine Antwort

Deine Email-Adresse wird niemals veröffentlicht. Pflichtfelder sind mit * gekennzeichnet.
Spam oder ein Keyword als Username wird nicht freigeschaltet.

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Copyright © 2009 - 2014 Fene-Blog by Feneberg Christian | Design und Umsetzung by Fenepedia