xingtwittersharerefreshplay-buttonpicture as pdflogo--invertedlinkedinkununuinstagram icon blackShapeGroup 3 Copy 2Group 2 Copydepartment_productdepartment_datascienceuserclosebasic clockblogShapearrows slim right copy 3arrows slim right copy 3arrows slim right copy 3

Asynchrones SiteCatalyst Skript

|

13. Mar 2013 |

- min Lesezeit

Forscht man im Internet nach Vergleichen zwischen Google Analytics (GA) und Adobe SiteCatalyst (SC), so stößt man auf dutzende Diskussionen. Fachlich gehen die Meinungen zu den beiden Tools oft auseinander. Zu fast jedem Feature gibt es Verfechter auf beiden Seiten, die dafür argumentieren, dass ihr jeweiliges Tool das bessere ist.

Fragt man jedoch die Entwickler welches Tool sie bevorzugen, so sind die Antworten eindeutig. Hier gewinnt stets Google.

Dazu gibt es zwei wesentliche Begründungen:

  1. Das Google Skript wird asynchron geladen.
  2. Die Einbindung von SC wird als deutlich komplexer wahrgenommen als die von Google Analytics.

Warum asynchron?

Stößt der Browser beim Laden einer Website auf ein verlinktes JavaScript (“< script >” Tag), wird erst das Skript geladen und ausgeführt, bevor die Seite weiter geparst wird. Insbesondere wenn viele Skripte in der Seite eingebunden sind kann so die Ladezeit der Seite merklich ausgebremst werden. Noch schlimmer wird es, wenn ein Skript gar nicht lädt (Timeout). Während dieser Zeit muss der User geduldig auf den eigentlichen Inhalt der Seite warten.

Durch asynchrones Einbinden von JavaScripts wird dieses Problem umgangen. Durch die asynchrone Einbindung ist der Browser nicht länger gezwungen auf die Lieferung des Skriptes zu warten und setzt das Laden der Seite fort.

Da Trackingtools keine Relevanz für die Darstellung des Content haben, sollten diese das Laden der Seite auch nicht blockieren. Deshalb ist bei ihnen eine asynchrone Einbindung klar vorzuziehen.

Leider bringt das asynchrone Laden aber auch neue Herausforderungen mit sich. Da nicht festgelegt ist, wann und in welcher Reihenfolge asynchron geladene Skripte ausgeführt werden, muss sichergestellt sein, dass auf deren Funktionalität erst zugegriffen wird, wenn sie vollständig zur Verfügung steht und das es bei Ladeproblemen nicht zu Fehlern kommt.

Die von Google in 2009 eingeführte neue Skriptversion löste beide Probleme. Das Skript wird asynchron geladen und es ist sichergestellt, dass es bei Problemen nicht zu Fehlern kommen kann.

Die Standardeinbindung der meisten Tracking Tools (und so auch Adobe SiteCatalyst) ist nach wie vor für eine synchrones Einbindung konzipiert.

Warum so kompliziert?

Vergleicht man die Standardeinbindung von GA mit SC so sieht die SC Einbindung auf den ersten Blick sehr viel umständlicher aus.

Einbindung GA

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Einbindung SC

<!-- SiteCatalyst code version: H.25.2.
Copyright 1996-2013 Adobe, Inc. All Rights Reserved
More info available at http://www.omniture.com -->
<script language="JavaScript" type="text/javascript" src="http://INSERT-DOMAIN-AND-PATH-TO-CODE-HERE/s_code.js"></script>
<script language="JavaScript" type="text/javascript"><!--
/* You may give each page an identifying name, server, and channel on
the next lines. */
s.pageName=""
s.server=""
s.channel=""
s.pageType=""
s.prop1=""
s.prop2=""
s.prop3=""
s.prop4=""
s.prop5=""
/* Conversion Variables */
s.campaign=""
s.state=""
s.zip=""
s.events=""
s.products=""
s.purchaseID=""
s.eVar1=""
s.eVar2=""
s.eVar3=""
s.eVar4=""
s.eVar5=""
/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
var s_code=s.t();if(s_code)document.write(s_code)//--></script>
<script language="JavaScript" type="text/javascript"><!--
if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'!-'+'-')
//--></script><noscript><img src="http://namespace.112.2o7.net/b/ss/rsid/1/H.25.2--NS/0"
height="1" width="1" border="0" alt="" /></noscript><!--/DO NOT REMOVE/-->
<!-- End SiteCatalyst code version: H.25.2. -->

Kennt man sich mit SC etwas besser aus, erkennt man, dass viele Bestandteile der Einbindung optional sind. Reduziert man die SC Einbindung auf den absolut notwendigen Teil, wird die Komplexität der Einbindung deutlich vergleichbarer:

<script type="text/javascript" src="http://INSERT-DOMAIN-AND-PATH-TO-CODE-HERE/s_code.js" language="JavaScript"></script>
<script type="text/javascript" language="JavaScript">
   var s_code=s.t();if(s_code)document.write(s_code)
</script>

Leider ist aber das Tracking von Page Views nur ein kleiner Bestandteil der Gesamtkomplexität.

Beginnt man damit, auch Userinteraktionen zu “verpixeln” steigt die Komplexität deutlich an. Google spricht in diesem Kontext von Event Tracking, während SiteCatalyst hauptsächlich den Term Link Tracking verwendet.

Googles Event Tracking ist von der Syntax und Komplexität vergleichbar mit dem Tracking von Page Views.

_gaq.push(['_trackEvent', 'category', 'action']);

Bei SC unterscheidet sich das Link Tracking leider erheblich vom Page View Tracking. War die Komplexität beim Page Tracking noch vergleichbar, so ist das bei der Verwendung des Link Trackings leider nicht mehr der Fall.

Typische Link Tracking Einbindung

var s=s_gi('rsid');
s.linkTrackVars='prop1,events';
s.linkTrackEvents='event1';
s.prop1='Custom Property of Link';
s.events='event1';
s.tl(this,'o','Link Name');

Hier wird der Unterschied zu GA sofort sichtbar. Das Handling von “linkTrackVars” und “linkTrackEvents” ist umständlich und kompliziert. Und warum muss die Reportsuite ID jedes Mal erneut angegeben werden?

Was tun?

Durchforstet man das Internet zu diesem Thema, so findet man viele gute Ansätze. Aber keinen Vorschlag, der beide genannten Kritikpunkte beseitigt und gleichzeitig die volle Funktionalität von SiteCatalyst erhält.

Aus diesem Grunde haben wir ein Skript programmiert, dass sich dieser Punkte annimmt. Unsere Ziele bei der Entwicklung waren dabei folgende

  1. Das SiteCatalyst Skript soll asynchron geladen werden
  2. Die Einbindung soll konsistenter gestaltet und vereinfacht werden
  3. Es soll möglich sein, das von Adobe ausgelieferte Library s_code.js möglichst unverändert zu übernehmen
  4. Es soll nicht nur Page Tracking, sondern auch Link Tracking unterstützt werden.

Die Lösung - asyncSC

Um den Entwicklern die Arbeit mit dem Skript so einfach wie möglich zu machen, haben wir uns bei der Syntax an die Vorgehensweise von GA angelehnt.

Der Ergebnis ist ein eigenes kleines (< 5 KB) Skript, das als Wrapper für das SC Skript dient und eine einfache Schnittstelle zur Verwendung der ursprünglichen Funktionalität von SC zur Verfügung stellt.

Die Einbindung des Skriptes selber ist asynchron. Das SC Skript (s_code.js) wird ebenfalls asynchron geladen, und dies auch nur wenn es definitiv benötigt wird.

Hier wird der minimal notwendige Code zur Einbindung dargestellt


var _asc = _asc || []; _asc.push(['setAccount', 'rsid']); _asc.push(['trackPageview']); (function() { var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.src = '//path-to/asyncSC.js'; sc.async = true; var h = document.getElementsByTagName('script')[0]; h.parentNode.insertBefore(sc, h); })();

Konfiguration

Da das Skript sowie das SC Skript (s_code.js) selbstgehostet sind, ist ein klein wenig Konfiguration für den ersten Einsatz notwendig.

  1. Der Pfad zum asyncSC Skript muss angepasst werden
  2. In der Datei asyncSC muss der Pfad zur verwendeten s_code.js eingetragen werden.

Einbindung Page Tracking

Die minimale Einbindung von asyncSC wird oben gezeigt. Adobe empfiehlt aber für ein ausgewogenes Tracking das zumindest ein eindeutiger Seitenname definiert wird. (Eine konsistente Strategie bei der Seitenbenennung erhöht deutlich die Lesbarkeit von Reports)


var _asc = _asc || []; _asc.push(['setAccount', 'rsid']); _asc.push(['setCustomVars', {pageName: 'MeineSeite'}]); _asc.push(['trackPageview']);

Selbstverständlich ist es auch möglich, alle übrigen SiteCatalyst Variablen durch das Skript zu setzen.

Außerdem gibt es die Möglichkeit, die Konfiguration des Skriptes auf einzelnen Seiten zu überschreiben. Hier einige Beispiele

// Setzen einer neuen Report Suite
_asc.push(['setAccount', 'rsid']);

// Setzen einer alternativen SC Variable
_asc.push(['setSCVariable', 'sObj']);

// Deaktivieren des Trackings
_asc.push(['disableTracking', true]);

// Setzen eines neuen Skriptpfades zur s_code.js
_asc.push(['scodePath', '//new-path-to/s_code.js']);

Einbindung Link Tracking

Ein besonderes Highlight von asyncSC ist die Vereinfachung des Link Tracking. Das Skript kümmert sich intern um die notwendigen Einstellungen und stellt sicher, dass immer nur die gewünschten Variablen übertragen werden.

Hier die minimal notwendige Einbindung eines Link Tracking Aufrufs.

_asc.push(['trackLink', 'Linkname']);

Das Setzen von zusätzlichen Parametern erfolgt analog zum Page Tracking.

_asc.push(
 ['setCustomVars', {eVar19: 'Wert2', events: 'even6,event4'}],
 ['trackLink', 'Linkname']
);

Wo finde ich das Skript?

Wir haben das Skript auf GitHub unter der LGPL veröffentlicht. Hier könnt ihr es finden:

Habt ihr noch Fragen? Braucht ihr Hilfe beim Einbau? Wendet euch einfach an uns.


Ähnliche Artikel

Ähnliche Artikel