Tag: JavaScript

Benutzerdefinierte Variablen in Piwik

by

Das Open Source Web Analyse Tool Piwik ist eine tolle Alternative zu Google Analytics und anderen kommerziellen Anbietern von Tracking Tools. Besonders für Leute/Firmen die die Kontrolle über die erhobenen Daten gerne selbst in der Hand haben, ist Piwik das Mittel der Wahl, da es auf dem eigenen Server betrieben wird.

Standardmäßig bietet Piwik schon eine Menge Analysemöglichkeiten, von besuchten Seiten über die Herkunft der Besucher bis zu Kampagnen. Besonders praktisch ist auch die Möglichkeit mehrere Webseiten mit einer Piwik Instanz zu überwachen. Allerdings sind die Funktionen von Piwik natürlich nicht so umfangreich wie das Angebot von kommerziellen Anbietern wie eTracker oder Econda.

Custom Variables

Wem die Standard-Analysewerte nicht reichen, der kann auch noch sogenannte “Benutzerdefinierte Variablen” (Custom Variables) einrichten. Mit diesen kann man bspw. eine Kategorie (Sport, Politik, …), oder einen Status (eingeloggt, nicht eingeloggt) mittracken. Die benutzerdefinierten Variablen werden ganz einfach dem JavaScript Tracking Code hinzugefügt.

Dabei gibt es zwei Unterscheidungsmöglichkeiten: Der Gültigkeitsbereich (scope) kann entweder auf “visit” (Zählung pro Besuch) oder auf “page” (Zählung pro Seitenaufruf) gesetzt werden.

Die Funktion zum Aufruf der benutzerdefinierten Variablen heißt setCustomVariable() und muss vor dem Standardaufruf trackPageView() ausgeführt werden.

piwikTracker.setCustomVariable(
1, // Index unter welchem die Variable gespeichert wird. Bis zu 5 Variablen sind möglich
"Kategorie", // Name der Variable
"Sport", // Wert der Variable
"page" // Gültigkeitsbereich. Hier pro Seitenaufruf
);
piwikTracker.trackPageView();

Die Namen und Werte der Custom Variables sind auf maximal 200 Zeichen Länge begrenzt.

In der Piwik Administrationsoberfläche findet man die Custom Variables unter Besucher->Benutzerdefinierte Variablen.

Hier die Links zur offiziellen Dokumentation:

jQuery Problem mit anderen JavaScript Bibliotheken

by

JavaScript Bibliotheken sind eine praktische Sache und erfreuen sich großer Beliebtheit. Besonders hervorgetan aus dem Wust von Libraries à la Prototype, Scriptaculous, Dojo, Mootools, etc. hat sich jQuery. jQuery ermöglicht einem ohne großen Aufwand zahlreiche Problemstellungen wie bspw. nette Effekte sehr schnell zu lösen. Die Bibliothek ist leicht in die eigene Website eingebunden und es kann losgehen. jQuery

Doch beim Einsatz in Content Management Systemen (CMS) kann es plötzlich zu Problemen kommen und die gewünschten Effekte treten nicht ein, oder manch andere Plugins funktionieren nicht mehr. Woran liegt das?

Nun jQuery arbeitet mit der Dollar-Syntax $(…) um DOM-Elemente anzusprechen. Leider verwenden andere JavaScript Bibliotheken auch diese Syntax. Deshalb kann es hier schnell zu Konflikten kommen. Joomla! ist z.B. so ein Kandidat. Joomla! verwendet intern Mootools, weshalb auch viele Joomla! Plugins mit Mootools arbeiten. Wenn Sie also zusätzlich noch jQuery in Ihre Website, bzw. Ihr Template eingebaut haben, dann kann schon mal was schief gehen.

Wie löst man nun diese Konflikte? Glücklicherweise gibt es in jQuery den sogenannten Kompatibilitätsmodus (compatibility mode), welcher einem den Einsatz neben anderen JavaScript Bibliotheken ermöglicht. Das sieht dann so aus:


<script>
jQuery.noConflict();

// Sprich jQuery mit jQuery(...) an statt mit $(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Hier kannst du die anderen JavaScripts mit $ nutzen $(...), etc.
$('someid').hide();
</script>

Das Ganze funktioniert so: erst ruft man die Funktion noConflict() auf, dann folgt der ganz normale jQuery Code, jedoch wird jQuery hier immer mit jQuery(…) angesprochen, statt wie üblich mit dem Dollar Zeichen $(…). Darunter kann man dann seine anderen Bibliotheken mit dem $ ansprechen. Hier die offizielle Dokumentation von jQuery.

Fullscreen Flash mit Browser Scrollbars

by

Wer schon mal eine Flashwebsite mit den Dimensionen 100% x 100% entwickelt hat, ist sicherlich schon auf das Problem gestoßen, dass die Browser keine Scrollbalken anzeigen, wenn das Browserfenster zu klein für den Inhalt ist, bzw. die Bildschirmauflösung zu klein ist.

Wie für die meisten Dinge gibt es auch hierfür eine nette kleine JavaScript Bibliothek namens “swffit“, die dieses Problem löst.

Continue reading →