Matomo-Javascript Tracking Code auslagern

Samstag, 3. Oktober, 2020

Matomo empfiehlt zum Tracken einer Webseite den Einbau des Codeschnipsels innerhalb des HTML Dokuments … im Head Bereich. [1]

Aber: das Hineinschreiben von Javascript Code in das HTML Dokument ist nicht so recht günstig, wenn man im CSP Security Header das Attribut script-src sicher und ohne unsafe-inline konfigurieren will. [3]

Die Abhilfe besteht darin, dass man [2]

  1. das Snippet in eine Javascript Datei auslagert.
  2. den Aufruf des Trackens im Onload Event einfügt - der ebenfalls in der Javascript-Datei ist und nicht im HTML-Code einer Webseite.

Hier einmal ist die Funktion embedTrackingCode benannt:

function embedTrackingCode() {
	var _paq = window._paq = window._paq || [];
	_paq.push(["trackPageView"]);
	_paq.push(["enableLinkTracking"]);

	var u="/matomo/";
	_paq.push(['setTrackerUrl', u+'matomo.php']);
	_paq.push(['setSiteId', 1]);

	var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
	g.defer=true; g.async=true; g.src=u+"matomo.js"; s.parentNode.insertBefore(g,s);    
}

… welche bei Abschluss des Ladevorgangs initialisiert wird:

window.onload = (event) => {
	embedTrackingCode();
};

Hinweis:

Wenn der Tracking Code in einer Javascript-Datei ist, muss man das Http-Caching der JS Datei bei einem expires= im Http Response Header beachten. Man ist u.U. nicht mehr so flexibel, wenn man den Code anpassen wollte, weil Browser das Javascript aus dem Cache nehmen, statt frisch vom Server die angepasste Version zu holen. Man kann per ETag cachen lassen … oder kann die JS-Datei mit Versionsnummer benennen.

weiterführende Links:

  1. Matomo Guide: JavaScript Tracking Client (en)
  2. Matomo Blog: Different ways of embedding the Matomo tracking code for faster website performance (en)
  3. developer.mozilla.org: CSP Header - script-src (en)

Osterkarte 2015

Mittwoch, 1. April, 2015

Seit gestern ist meine Osterkarte 2015 online.
2015-04-01-osterkarte.jpg

Links

Axels Weihnachtskarte 2014

Sonntag, 14. Dezember, 2014

Nun nun rücken sie also doch endlich in greifbare Nähe: die Fest (und Fress-?) Tage. Ich wünsche meinen Besuchern eine schöne Weihnachtszeit! Geniesst die erholsamen Tage zwischen den Jahren. Nach einem Guten Rutsch ins Jahr 2015 … mögen sich neben privaten und berüflichen Wünschen auch einige der guten alten Vorsätze erfüllen!

2014-12-14-weihnachtskarte-01.png

Axel hat sich wieder ins Zeug gelegt :-)
Ich habe - zum Glück - wieder eine einfache Idee gehabt: ich brauchte nur 2 Dinge zeichnen und scannen. Und weil ich mich mit Webseiten ein klein wenig auskenne, konnte ich es auch animieren.

Für die Hintergrundmusik wurden vor Allem klassische Instrumente ins Musikprogramm gekippt - und wer denn kann: gar in 5.1 surround lässt es sich herunterladen (s. “über” auf der rechten Seite).

Viel Spass!

weiterführende Links:

  1. Weihnachtskarte 2014
  2. Hintergrundmusik zum Download in stereo mp3 ogg … und 5.1 surround: m4a ogg
  3. Hintergrundmusik auf Soundcloud

Bootstrap 3.3 unter Concrete 5.6

Montag, 3. November, 2014

Meine Webseite verwendet Concrete 5 als CMS.
Auf aktuelle Version 5.7 kann man dummerweise nicht upgraden, weil man im Unterbau zuviel geändert hat. Toll. Ich will einige Komponenten trotzdem aktualisieren.

Ich hatte so die famose Idee, auf meiner Webseite Bootstrap auszutauschen
VON v3.0
AUF v3.3

Der Konflikt besteht darin, dass das Backend mit Bootstrap 2 arbeitet und mit jQuery v1.7 daherkommt.

Bootstrap 3.3 braucht nun aber mind. jQuery 1.9. Mit vermeintlich gutem Gewissen habe ich die letzte 1-er Version von jquery heruntergeladen. Und mit jQuery 1.11 läuft wiederum das Bootstrap 2 Backend nicht mehr sauber.

Ein Teufelskreis ;-)

Erschwerend kommt hinzu, dass C5 das jQuery innerhalb

Loader::element('header_required');

irgendwo lädt (damit werden mehrere Html-Header Zeilen per echo rausgeschrieben).

Entweder man modifiziert Originale (davon rate ich per se ab), macht Custom-Elemente - oder ersetzt es in seinem Template. Letzters habe ich gemacht - mit Hilfe der ob_ Funktionen wird der Content abgegriffen und darin der Pfad zum jQuery File ersetzt.

        // 2014-11-01 hahn
        // HACK to use bootstrap 3.3 in live mode and concrete5 cms mode
        // --> load specific jquery version
        ob_start();
        Loader::element('header_required'); 
        $sHeadcontent = ob_get_contents();
        ob_end_clean();
        
        $u = new User();
         if (!$u->isRegistered()) {
             $sHeadcontent=str_replace(
                     '/concrete/js/jquery.js', // or '/updates/concrete[version]_updater/concrete/js/jquery.js',
                     $this->getThemePath() . '/js/jquery_1.11.1.js',
                     $sHeadcontent
             );
         }
        echo $sHeadcontent;
        // ENDE jquery HACK

Eine andere Folge des jQuery Updates war die Inkompatibilität mit colorbox (Addon Lightboxed Image - 0.9.2).
Durch Aktualisieren der Dateien unter

[webroot]/packages/lightboxed_image/blocks/lightboxed_image

mit den aktuellen colorbox-Sourcen lief auch das wieder.

Update:
Eine andere Variante (die Auswirkung auf alle Themes hätte) wäre, die Datei concrete/elements/header_required.php in das Verzeichnis elements zu kopieren und dort anzupassen. So kommt man auch ohne die ob_-Funktionen aus.

weiterführende Links:

Html5 Audio: schnelles Wiederholen eines Sounds

Donnerstag, 1. Mai, 2014

Kürzlich hatte ich etwas zur Wiederholung von loopenden HTML5 Audios geschrieben. Beim Schreiben der elektronischen Osterkarte kämpfte ich noch mit einem anderen Audio-Problem: Mit Klick auf ein Element sollte ein Sound wiedergegeben werden. Im Onclick Event eines Bildes wird nachfolgende Funktion aufgerufen. Diese holt aus einem Spielfeld-Array die Information, ob es ein neu aufgedecktes Feld ist und spielt einen entsprechenden Sound durch Ansteuern eines (in der Seite bereits vorhandenen) Audioobjektes:

function clickimage(oLink) {
    (...)
    iClickCounter++;
    var oAudio = false;
    var oField = aFields[oLink.id];
    (...)
    if (oField["active"]) {
        // scream yeah!
        (...)
        oAudio=document.getElementById("audioclickok");
        oAudio.currentTime=0;
        oAudio.play();
        (...)
    } else {
        // oh no!
        (...)
        var sSoundid=oField["done"]?"audioclickremoved":"audioclickfailed";
        oAudio=document.getElementById(sSoundid);
        oAudio.play();
        (...)
    }
    (...)
}

Hey es spielt! Aber eher schlecht als recht. Bei mehrfachen Klicks gibt es äusserst unschöne Effekte. Es hakt - die Wiedergabe ist nicht synchron.

Eine Abhilfe wäre web-API. Oder man stehert die Wiedergabe ein und desselben Audiofiles über mehrere Audio-Objekte.

Oder: man setzt vor der Play-Methode die Abspielposition auf Null.

    (...)
        oAudio=document.getElementById(sSoundid);
        oAudio.currentTime=0;
        oAudio.play();
    (...)

Der Unterschied ist wirklich frappant!

Weiterführende Links