Tracking Dokumentation

Installation und Setup

Damit Stetic Daten für Sie messen kann, muss unser Tracking-Code in Ihre Webseite integriert werden.
Bitte fügen Sie folgenden HTML-Code in Ihre Webseite über dem schliessenden Head-Tag </head> ein.
Ersetzen Sie dabei XXXXX mit Ihrem Projekt-Token.

<script type="text/javascript">
var _fss=_fss||{}; _fss.v = 3; _fss.token = 'XXXXX';
(function(){var e="stetic",a=window,c=["track","config","ab"],b=function(){var d=0,f=this;for(f._fs=[],d=0;c.length>d;d++){(function(j){f[j]=function(){return f._fs.push([j].concat(Array.prototype.slice.call(arguments,0))),f}})(c[d])}};a[e]=a[e]||new b;a.fourstats=a.fourstats||new b;var i=document;var h=i.createElement("script");h.type="text/javascript";h.async=true;h.defer=true;h.src="//stetic.com/t.js";var g=i.getElementsByTagName("script")[0];g.parentNode.insertBefore(h,g)})();
</script>

Kann ich den Tracking-Code auch ganz unten auf meiner Seite integrieren?

Technisch gesehen stellt dies kein Problem dar. Wir empfehlen jedoch, den Tracking-Code soweit oben wie möglich zu platzieren, damit auch Besucher gemessen werden, die Ihre Seite sehr schnell wieder verlassen und hierdurch das Laden Ihrer Webseite abbrechen. Dies kann unter Umständen zur Folge haben, dass der Besucher nicht den kompletten HTML-Code Ihrer Webseite ausgeliefert bekommt.

Wird meine Webseite durch den Tracking-Code langsamer?

Der Tracking-Code wird asynchron bzw. parallel zu allen anderen Elementen auf Ihrer Webseite geladen. Das bedeutet, dass der Aufbau und die Anzeige Ihrer Webseite unabhängig vom Laden unseres Tracking-Codes und dem letzendlichen Tracking passiert. Die Ladezeit Ihrer Webseite wird daher nicht negativ beeinträchtigt.

Konfiguration

Um das Tracking und Ihre Statistik anzupassen und zu erweitern, ist es möglich den Tracking-Code um folgende Attribute zu erweitern.

Diese Attribute müssen dem im Tracking-Code bereits vorhandenen JSON-Objekt hinzugefügt werden. Dabei können die Attribute einzeln oder das Objekt als Ganzes definiert werden.

Beispiel für Tracking mit erweiterten Daten

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Ihr Projekt-Token für das Tracking.
  _fss.pageUri = '/beispiel/uri?mit=suche';
  _fss.pageTitle = 'Beispiel-Titel der Seite';
  _fss.cookieDomain = '.example.com';
  // Rest des Tracking-Codes ab Zeile 3 (siehe oben)
</script>

Beispiel für Tracking mit erweiterten Daten als ganzes Objekt

Das Objekt kann auch als Ganzes definiert werden. Beachten Sie hierbei bitte, das das Objekt fehlerfrei definiert ist, da das gesamte Tracking ansonsten fehlerhaft oder gar nicht funktioniert.

<script type="text/javascript">
  var _fss = {
    token:XXXXX, // Ihr Projekt-Token für das Tracking.
    pageUri: '/beispiel/uri?mit=suche', 
    pageTitle: 'Beispiel-Titel der Seite', 
  };
  // Rest des Tracking-Codes ab Zeile 3 (siehe oben)
</script>

pageUri

Wenn Sie aus irgend einem Grund die URL Ihrer Seite ändern möchten, weil sich beispielsweisse die URL-Struktur Ihrer Webseite bald ändern wird oder die URL zu viele Variablen enthält, können Sie die URI mit dem Attribut pageUri überschreiben.

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Ihr Projekt-Token für das Tracking.
  _fss.pageUri = '/ein/beispiel/uri?mit=suche';
  // Rest des Tracking-Codes ab Zeile 3 (siehe oben)
</script>

pageTitle

Für die Anzeige des Titels einer Seite lesen wir den Title-Tag Ihrer Seite aus. Mit dem Attribut pageTitle können Sie den Title Ihrer Seite für die Statistik überschreiben. Beachten Sie hierbei für die Seiten-Statistik bitte, dass diese Angabe nur beim ersten Aufruf gespeichert und danach nicht mehr überschrieben wird. Wenn Sie den Titel einer Seite ändern möchten, können Sie dies in der jeweiligen Detailseite der Seiten-Statistik über den Button [Titel ändern] tun.

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Ihr Projekt-Token für das Tracking.
  _fss.pageTitle = 'Ihr eigener Titel der Seite';
  // Rest des Tracking-Codes ab Zeile 3 (siehe oben)
</script>

referrer

Mit dieser Option kann der Referrer der aktuellen Seite überschrieben werden. Dies ist zum Beispiel bei Weiterleitungen oder Ajax-Requests hilfreich.

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Ihr Projekt-Token für das Tracking.
  _fss.referrer = 'http://www.example.com/referrer.htm';
  // Rest des Tracking-Codes ab Zeile 3 (siehe oben)
</script>

cookieDomain

Diese Option können Sie verwenden, um das Tracking über mehrere verschiedene Subdomains zu ermöglichen. Um beispielsweisse das Tracking für die Domain example.com über alle Subdomains nutzen zu können, wird der Wert auf .example.com gesetzt. Wichtig hierbei ist der führende Punkt, um alle Subdomains für die Tracking-Cookies zu zulassen. Ohne Punkt würde kein Cookie gesetzt werden, da die meisten Browser den Domainnamen mit nur einem Punkt als ungültig erkennen würden.

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Ihr Projekt-Token für das Tracking.
  _fss.cookieDomain = '.example.com';
  // Rest des Tracking-Codes ab Zeile 3 (siehe oben)
</script>

scrollElement

Ermöglicht die Angabe der ID eines HTML-Elementes für die Messung der Scrolltiefe. Sollte das Scrollen innerhalb eines bestimmten Elements erfolgen, beispielsweisse einem fixierten Layer, in dem die Inhalte der Webseite nach unten gescrollt werden können, kann dieses HTML-Element mit diesem Parameter konfiguriert werden. Geben Sie als Wert bitte die ID des HTML-Elementes an.

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Ihr Projekt-Token für das Tracking.
  _fss.scrollElement = "elementID";
  // Rest des Tracking-Codes ab Zeile 3 (siehe oben)
</script>

Nutzung von Cookies auf Webseiten

Stetic ermöglicht es Webseiten-Besitzern zu erfahren, wie Besucher ihre Webseite nutzen. Cookies werden dazu genutzt, um Besucher und Besuche über mehrere Seiten und Besuche hinweg anonym zu differenzieren.

Alle hier genannten Cookies werden von unserem Javascript als HTTP-Cookie im First-Party Context unter der Domain der Webseite gesetzt, die unseren Javascript-Tracking-Code eingebunden hat.

Optionale Cookies

Die folgenden Cookies werden nur gesetzt, sofern das im Zweck genannte Tool von Stetic genutzt wird.

Event-Tracking

Mit Stetic ist es möglich einzelne Ereignisse auf einer Webseite - genannt Events - zu tracken. Dabei kann es sich um eine Registrierung eines neuen Benutzers, eine Bestellung in einem Online-Shop, das Hinzufügen eines Artikels zum Warenkorb, das Abspielen eines Videos oder jede andere beliebige Aktion handeln.

Um ein Event zu messen, fügen Sie bitte folgenden, auf Ihre Bedürfnisse angepassten, Javascript-Code in Ihre Webseite ein. Wichtig! Der Code muss unter dem normalen Tracking-Code (siehe oben) eingefügt werden.

stetic.track('event_name');

Passen Sie hierbei bitte den Eventnamen event_name auf Ihre Bedürfnisse an. Achten Sie bei der Vergabe des Namen darauf, nicht zu viele verschiedene Events pro Webseite zu nutzen, um den Überblick zu behalten.

Zur Unterscheidung und Segmentierung können Sie jedem Event verschiedene Attribute als JavaScript-Objekt mitgeben.

stetic.track('event_name', {
  key: 'value',
  key2: 'value2'
});

So könnte das Event für die Registrierung eines neuen Benutzers zum Beispiel so aussehen:

stetic.track('account_create', {
  created_at: '2014-10-16 08:45:12'
});

Unterobjekte und Arrays sind ebenso möglich und können zur Auswertung genutzt werden. Hier zum Beispiel das Hinzufügen eines Artikels in den Warenkorb:

stetic.track('basket', {
  product: {
	  id: 123, 
	  name: 'iPhone 6', 
	  price: 768.00,
	  category: ['Smartphone/Apple', 'New arrivals']
  }
});

Messen Sie alle Events und zugehörige Attribute, die Ihnen bei der Auswertung und Optimierung Ihrer Webseite behiflich sein können. Das Event für das Abspielen eines Videos sollte mindestens den Titel des Videos enthalten, um später auswerten zu können, welches Video am meisten abgespielt wurde.

stetic.track('play_video', {
  title: 'My awesome video', 
  author: 'Jimmy Schmidt',
  length: 1800
});

Events sollten in die Interaktion Ihrer Webseite integriert werden. So könnte man zum Beispiel ein Event tracken, sobald ein Klick auf ein wichtiges Element passiert. Hier realisiert mit jQuery:

$(element).on('click', function () {
  
  stetic.track('button_click', {
	  title: $(this).text(),
	  href: $(this).attr('href')
  });
  
});

Ein weiteres interessantes und durchaus nützliches Beipiel ist das Tracken von 404 Page Not Found und generell allen Fehlerseiten. Sie könnte man mit Hilfe der Attribute url und referer auswerten, auf welcher Seite der Fehler passiert und woher der Besucher kam.

stetic.track('404', {
  url: window.location.pathname,
  referer: document.referrer
});

Reservierte Eventnamen sind derzeit order, basket und experiment, die für spezielle Auswertungen genutzt werden können. Siehe E-Commerce-Tracking & A/B Tests.

Callback

Um eine Funktion auszuführen, wenn das Event erfolgreich an Stetic übermittelt wurde, können Sie der Funktion track als 3. Attribut eine Callback-Funktion übergeben:

stetic.track('My event', {
  key: 'value'
}, function() {
    alert('Event successfully tracked!');
});

E-Commerce-Tracking

Für unsere E-Commerce-Analysen verwenden Sie bitte die speziellen Events order und basket, um Warenkorb-Aktionen und Bestellungen in Ihrem Online-Shop messen und auswerten zu können. Dabei ist es wichtig, so viele Informationen wie möglich anzugeben, um eine bestmögliche Auswertung zu erhalten.

Warenkorb

Für das Hinzufügen eines Artikels in den Warenkorb ist das Event basket zu verwenden. In dem Attribut products geben Sie bitte ein Array mit einem oder mehreren Produkten an, die dem Warenkorb hinzugefügt wurden. Beachten Sie bitte, dass Sie dieses Event nur einmalig nach dem Hinzufügen des Artikels zum Warenkorb tracken.

stetic.track('basket', {
  products:[
  {
    id: 123,
    name: 'iPhone 5s',
    category: ['Smartphone', 'Apple'],
    quantity: 1,
    price: 768.00
  }]
});

Alternativ kann auch das Attribut product für ein einzelnes Objekt verwendet werden.

stetic.track('basket', {
  product:{
    id: 123,
    name: 'iPhone 5s',
    category: ['Smartphone', 'Apple'],
    quantity: 1,
    price: 768.00
  }
});

Bestellung

Für die Auswertung von Bestellungen verwenden Sie bitte das Event order. Eine Erklärung der einzelnen Attribute finden Sie im nachfolgenden Code-Beispiel: Beachten Sie bitte auch hier, dass Sie dieses Event nur einmalig nach dem Absenden der Bestellung tracken.

stetic.track('order', {
  id: '12345',                // Aufrags- bzw. Transaktions-ID. Erforderlich
  products: [                 // Array der bestellten Produkte.
  {
    id: 'A123',               // SKU oder ID. Erforderlich
    quantity: 1,              // Menge. Erforderlich wenn grösser 1
    name: 'iPhone 5s',        // Produktname. Erforderlich
    category: 'Smartphone',   // Kategorie - String oder Array. Optional
    price: 768.00,            // Produktpreis. Erforderlich
    revenue: 150.00           // Einnahmen (Optional, ansonsten wird 'price' verwendet)
  }, 
  {
    id: '234',
    quantity: 2, 
    name: 'Samsung Galaxy S4', 
    category: ['Smartphones/Samsung', 'Hot Price'], 
    price: 512.00,
    revenue: 200.00
  }],
  shipping: {                 // Versand. Objekt oder Float (Versandkosten)
    type: 'Hermes',           // Versender, Logistiker
    amount: 6.90              // Versandkosten
  }, 
  payment: {                  // Zahlart. Objekt oder Float (Kosten für Zahlart)
    type: 'Paypal',           // Zahlart
    amount: 1.20              // Kosten für Zahlart
  },
  affiliate: {                // Affiliate (Werber des Auftrages, optional.)
    name: 'Paypal',           // Name des Affiliates
    commission: 50.00         // Provision
  },
  weight: 1.00,               // Gesamtgewicht (Optional)
  sub_total: 1792.00,         // Zwischensumme (Optional)
  coupon: 'RTL25OFF',         // Gutschein-Code (Optional)
  discount: 180.10,           // Rabatt (Optional)
  total: 1620.00,             // Gesamtwert der Bestellung
  revenue: 350.00,            // Einnahmen (Optional, ansonsten wird 'total' verwendet)
  created: 1421241584,        // Unix-Timestamp der Transaktion in der Vergangenheit. (Optional)
  recurring: true,            // Wiederkehrende Zahlung (Boolean, optional).
  recurring_months: 1         // Anzahl der Monate für wiederkehrende Zahlung (Optional)
});

Kampagnen-Tracking

Um den Erfolg von Werbemaßnahmen oder Online-Marketing-Kampagnen zu messen, können Sie unser Kampagnen-Tracking nutzen. Hiermit besteht die Möglichkeit, die Anzahl der Besucher, Seiten-Impressionen, Besuchszeit oder Absprungrate gezielt pro Kampagne zu messen und auszuwerten.

So können Sie auswerten, wie viele Besucher zum Beispiel über einen Werbebanner, einen Newsletter oder andere Werbemaßnahmen auf Ihre Webseite gelangen.

Steigt ein Besucher über einen Kampagnen-Link auf Ihre Webseite ein, so wird der Besucher mit der Kampagne in der Statistik gekennzeichnet und die jeweiligen Statistikdaten werden für diese Kampagne gezählt.

Kampagnen-Tracking über URL-Parameter

Über den URL-Parameter fs_campaign können Sie den Namen der gewünschten Kampagne jeder beliebigen URL mitgeben, über die auf Ihre Webseite von der jeweiligen Kampagne eingestiegen wird. Optional können Sie auch den von Google verwendeten Parameter utm_campaign nutzen.

Wichtig hierbei ist, das der Wert des Parameters URL-kodiert ist.

Zusätzlich können folgende Parameter angegeben werden:

http://www.ihreseite.de/landingpage.html?fs_campaign=Werbebanner%2BPortal%2BXY

http://www.ihreseite.de/?fs_campaign=Newsletter%2BDecember%2B2012

Conversion-Tracking

Mit dem Stetic-Conversion-Tracking können Sie den Erfolg Ihres Kontakt-Formulares, Ihrer Bestellung, Ihrer Registrierung oder jeden anderen gewünschten Aktion messen. Hierzu müssen Sie nur ein Stück HTML vor dem eigentlichen Stetic-HTML-Code auf der Bestätigungs-Seite, also die Seite, die den Erfolg der Aktion bestätigt, einbinden. Im Tracking-Code selbst muß ein Name für den Erfolg der Aktion (z.B. Bestellung, Registrierung, Formluar abgeschickt) und ein Name der Kategorie der Aktion (z.B. Webshop, Forum, Kontakt-Formular) vergeben werden.

Das Tracking der Conversions funktioniert wie das Tracking eines Events mit den beien zusätzlichen Parametern category für die Kategorie und goal für die Bezeichnung des Zieles.

stetic.track('conversion', {category:'Webshop', goal: 'Bestellung'});

A/B Test

A/B Tests können Sie für Experimente nutzen, um verschiedene Varianten von Elementen Ihrer Webseite zu testen und deren Erfolg auswerten. Dabei wird mit dem Ergebnis des Tests die beste Variante bestimmt, die in Zukunft genutzt werden sollte. Bei der Anzahl der Varianten sind keine Grenzen gesetzt.

Die Ergebnisse Ihrer Experimente können über die Berichte der A/B Tests, Funnel, Segmente oder im E-Commerce-Bereich analysiert werden.

Um einen Test zu starten, binden Sie einfach einen Tracking-Code in Ihre Webseite auf der Seite ein, die das Experiment enthält. Im Code definieren Sie den Titel und die verschiedenen Varianten des Tests. Pro Besucher wird eine Variante gewählt und gemessen. Die Werte des Experiments werden automatisch an alle folgenden Events, die Sie an uns senden, angehängt.

Inhalt

1. A/B Test Tool
2. Manuelles Tracking
3. Experiment beenden
4. Serverseitiger A/B Test

Stetic A/B Test Tool

Für das automatische Handling des A/B Tests in JavaScript stellen wir Ihnen in dem bereits in Ihre Webseite eingebundenen Tracking-Code eine Funktion zur Verfügung, die folgendes für Sie erledigt:

1. Auswahl einer Variante per Zufall
2. Speichern der gewählten Variante in einem Cookie
3. Sicherstellen, das pro Nutzer immer die gleiche Variante zurück gegeben wird
4. Tracking und Weitergabe des Experiments sowie der gewählten Variante an Stetic
5. Aufrufen der Callback-Funktion mit der gewählten Variante

Um einen A/B Test zu starten, fügen Sie bitte folgenden, auf Ihre Bedürfnisse angepassten, Javascript-Code in Ihre Webseite ein.

stetic.ab(<Name des A/B Tests>, <Array mit Varianten>, <Callback-Funktion>);

Beispiel

stetic.ab("Warenkorb-Button", ['red', 'green', 'blue'], function(variant) {
    // Code für Anzeige des Warenkorb-Buttons
});

Vollständiges Beispiel mit jQuery

<button class="btn-basket" style="display: none;">In den Warenkorb</button>

<script type="text/javascript">
stetic.ab("Warenkorb-Button", ['red', 'green', 'blue'], function(variant) {
    $('.btn-basket').css('color', variant).show();
});
</script>

Manuelles Tracking des A/B Tests

Wenn Sie die Auswahl der Variante und das Tracking des Experiments selbst vornehmen möchten, so können Sie dies mit dem Tracking des Events experiment tun.

Beachten Sie, dass zeitübergreifend pro Besucher immer nur eine Variante angezeigt und gemessen wird, da sonst die Ergebnisse verfälscht werden. Cookies sind eine Möglichkeit, dies zu realisieren.

stetic.track('experiment', {
    name: "<Name des A/B Tests>", 
    variant: "<Name der gewählten Variante>"
});

Wenn Sie beispielsweisse die zwei Farbvarianten Rot und Grün Ihres Warenkorb-Buttons testen möchten, zeigen und messen Sie für 50% Ihrer Besucher die Variante mit dem roten Button und für die anderen 50% die Variante mit dem grünen Button:

Tracking-Code für die ersten 50%

stetic.track('experiment', {name: "Warenkorb-Button", variant: "Rot"});

Tracking-Code für die zweiten 50%

stetic.track('experiment', {name: "Warenkorb-Button", variant: "Grün"});

A/B Test und Experiment beenden

Wenn das Ziel erreicht ist und der Besucher konvertiert, sollte mit dem Event end_experiment das Experiment für den aktuellen Besucher beendet werden. Dies ist notwendig, damit nicht weiterhin an jedes Event die Werte des Experiments automatisch angehängt werden. Im genannten Beispiel wäre die Konvertierung der Abschluss der Bestellung. Auf der Bestätigungsseite der Bestellung wird folgender Code integriert:

stetic.track('end_experiment', {name: "Warenkorb-Button"});

Serverseitige Implementierung eines A/B Tests

Manchmal ist es notwendig, einen A/B Test auf Serverseite zu implementieren. Beispielsweisse um das komplette Design einer Webseite zu testen und ein anderes Stylesheet zu laden. Eine einfache Implementierung in PHP mit einer Anzeige per Zufall könnte wie folgt aussehen:

<?php
$variants = array("Original", "A", "B");

if(isset($_COOKIE["ab_layout_2015"]) && 
   in_array($_COOKIE["ab_layout_2015"], variants) === true)
{
  $variant = $_COOKIE["ab_layout_2015"];
}
else
{
  $variant = $variants[array_rand($variants)];
  
  // Remember the variant in a cookie for one year
  setcookie("ab_layout_2015", $variant, time()+(3600*24*365), '/');
}

// Load the correct stylesheet
$stylesheet = "styles.css";
switch($variant) 
{
    case 'A':
        $stylesheet = "new.styles-a.css";
        break;
    case 'B':
        $stylesheet = "new.styles-b.css";
        break;
}
echo '<link href="/css/' . $stylesheet . '" rel="stylesheet">' . PHP_EOL;

// Track experiment with variant
echo '<script type="text/javascript">';
echo 'stetic.track("experiment", {name: "Layout 2015", variant: "' . $variant . '"});';
echo '</script>';

Erweitertes Linktracking

Externe Links, also Verweise die von Ihrer Webseite zu anderen Webseiten verlinken, werden von Stetic automatisch erkannt und gemessen. Unter Umständen kann Stetic den Link jedoch nicht erkennen, wenn die URL des Links innerhalb Ihrer Seite liegt. Dies kann der Fall sein, wenn Sie auf eine interne URL verlinken und von dieser über einen Redirect auf das externe Ziel weiterleiten. Sie haben zwei Möglichkeiten diese Links zu kennzeichnen:

Kennzeichnung eines externen Links durch CSS

Wenn die URL des Links innnerhalb Ihrer eigenen Webseite liegt, können Sie dem Link-Tag die CSS-Klasse "fs_link" zuweisen, damit er von Stetic als externer Link erkannt und gemessen werden kann.

Beispiel HTML zum Kennzeichnen eines externen Links

<a href="/beispiel/weiterleitung?url_id=817" class="fs_link">Hier klicken</a>

Direkter Aufruf des Linktrackers mit Javascript

Sie können Sie den Linktracker von Stetic auch direkt über den onClick-Event des Links aufrufen. Im Event selbst muß die Funktion "fs_handleClick(this);" aufgerufen werden.

Beispiel HTML zum direkten Aufruf des Stetic-Linktrackers

<a href="/beispiel/weiterleitung?url_id=817" onClick="fs_handleClick(this);">Hier klicken</a>

Anchor-Tracking / Anker-Tracking

Bei einigen Webseiten, meist jedoch Webseiten, die komplett in Flash erstellt werden oder die Inhalte der Seite mit Hilfe von Ajax anzeigen, können die Bewegungen, also das Navigieren innerhalb der Webseite, vom Stetic-Tracker nicht erkannt werden. Der Grund hierfür ist, dass beim Wechseln der Seiten keine neue URL im Browser aufgerufen wird, der HTML-Code im Browser also immer der gleiche bleibt.

Stetic kann jedoch, mit Einbau eines zusätzlichen HTML-Codes, Veränderungen im Anchor (#, Anker) Ihrer Webseite erkennen und als Pageview bzw. Seitenaufruf messen. Hierfür muß sich pro Aufruf der Teil nach dem Anchor in der URL ändern und optimalerweisse wie eine URL darstellen. Beispiele für solche URL's:

http://www.ihredomain.xy/#/startseite
http://www.ihredomain.xy/#/informationen
http://www.ihredomain.xy/#/informationen/firma
http://www.ihredomain.xy/forum#/registrierung/user/ok

Um das Anchor-Tracking zu aktivieren, binden Sie bitte folgenden HTML-Code nach dem Stetic-Tracking-Code in Ihre Seite ein. An Stelle der 999999 benutzen Sie bitte Ihre Projekt-ID, wie im normalen Tracking-Code. Achtung! Der normale Tracking-Code muß trotzdem auf Ihrer Seite bleiben!

<script type="text/javascript" src="https://stetic.com/anchor_tracking.js"></script>
<script type="text/javascript">fsAnchorTracking(999999);</script>