Donnerstag, 23. Juni 2011

Mehrsprachige TYPO3 Website: Seltsame L-Werte

Kürzlich ist mir aufgefallen, dass seltsame L-Werte in den URLs von mehrsprachigen TYPO3 Websites auftauchen. Zum Beispiel L=azcdkefuds anstatt L=1 oder L=0

Irgendwo habe ich gelesen, dass es mit RealURL und dem Cache zusammenhängt. Ob das Problem nur bei gewissen Versionen von TYPO3 und/oder RealURL auftritt, habe ich nicht untersucht.

Mühsam war, dass bei der aktuellen Konfiguration diese seltsamen L-Wert bei jedem weiteren Link gesetzt war. Auch Google hatte bereits einige Seiten mit seltsamen L-Werten im Index.

Eine kleine Änderung bei der linkVars Definition schafft immerhin zum Teil Abhilfe. "Falsche" L-Werte werden bei Links nicht weiterverwendet.

Anstatt

config.linkVars = L

verwendet man bei z.B 3 Sprachen

config.linkVars = L(1-2)

Diese Einstellung hilft auch doppelte URLs für eine bestimmte Seite zu minimieren.
http://www.domain.com/seite.html und http://www.domain.com/seite.html?L=0 ist die gleiche Seite wird aber bei Google Analytics separat aufgelistet. Der canonical Tag soll/kann dabei auch helfen.

Donnerstag, 16. Juni 2011

Thumbnails bei Facebook Status Links

Verwendet man config.baseURL bzw. keine absoluten URLs zu Bildern, dann findet Facebook beim Posten von Links zu TYPO3 Webseiten keine Bilder und stellt daher auch keine Thumbnails zur Verfügung.

Abhilfe schafft config.absRefPrefix
config.absRefPrefix = http://www.domain.com/

Wenn man hauptsächlich Statusmeldungen mit Links zu News erstellt, kann man diese Einstellung auch nur bei der Detailansicht von News verwenden.

Donnerstag, 9. Juni 2011

Downloads in der Google Analytics Statistik

Wenn Google Analytics verwendet wird und auch Downloads von z.B. PDF Dateien überwacht werden sollen, kann man die _trackPageview Funktion verwenden.

Für normale Dateilisten (Inhaltselement für Dateien/Downloads) reicht ein kleines TypoScript Snippet aus.

tt_content.uploads.20 {
 layout.file = <div class="###CLASS###"><span><a href="###URL###" onclick="javascript:pageTracker._trackPageview('Download ###TITLE###'); ">###TITLE###</a> ###FILESIZE### ###CRID### ###MYMARK###</span><span>###DESCRIPTION###</span></div>
}

Eingefügt wurde nur:

onclick="javascript:pageTracker._trackPageview('Download ###TITLE###');"

Der Prefix "Download " ist optional, kann aber helfen im GA die Statistik für alle Downloads zu finden oder auch für Filter-Funktionen.

Spezielle Konfigurationen für tt_news und RTE Links
Damit auch Downloads bei News (tt_news) und via RTE verlinkte Dateien von Google Analytics erfasst werden, benötigt man zusätzlich eine JavaScript Funktion damit der Dateiname der _trackPageview() Funktion übergeben werden kann.

JavaScript Funktion
function getDownloadFileName(url) {
 var strFilename;
 var strHref = url;
 strHref = strHref.replace(/\//g,"\\");
 var index = strHref.lastIndexOf("\\");
 if (-1<index) {
  strFilename = strHref.substring(index+1);
 } else {
  strFilename = strHref;
 }
 return strFilename;
}

TypoScript Snippet für tt_news
plugin.tt_news {
 newsFiles {
  ATagParams = onClick="javascript:pageTracker._trackPageview(getDownloadFileName(this.href));"
 }
}

TypoScript Snippet für RTE Links
lib.parseFunc_RTE.tags.link.typolink.ATagParams {
  cObject = TEXT
  cObject {
    value = getDownloadFileName(this.href)
    wrap (
      onclick="javascript:pageTracker._trackPageview(|);"
    )
  }
}

Donnerstag, 2. Juni 2011

Syntax Highlighting in den Blog Posts

Damit Code Snippets in den Blog Posts schön dargestellt werden können, ist der Einsatz des SyntaxHighligher Pakets nützlich.

Installation
Bei Blogger.com geht man wie folgt vor. Design > HTML bearbeiten auswählen. Vor dem schliessenden </head> Tag folgenden Code einfügen.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>

Und vor dem schliessenden </body> Tag den Highlighter aufrufen.

<script language='javascript'>
    SyntaxHighlighter.all()
</script>

That's it.

Verwendung
Um ein Code Snippet in den Post integrieren zu können, wechselt man in die HTML Ansicht (HTML bearbeiten) und platziert den Code in ein pre-Tag.

<pre class="brush: php">
[code here]
</pre>

Brushes stehen für CSS (brush: css), JavaScript (brush: jscript), HTML und XML (brush: xml), PHP (brush: php), SQL (brush: sql) und viele weitere Sprachen zur Verfügung.

[code here] Encode HTML Entities !
HTML Entities müssen bei z.B. HTML Code umgewandelt werden, da bei der Eingabe von <i>text in italic</i> die Ausgabe text in italic sein wird. Daher müssen < in &lt; und > in &gt; umgewandelt werden. Ein nützliches Tool dafür ist z.B. Encode / Decode HTML Entities.