Tracking Documentation

Installation and Setup

To start analyzing your visitors, our tracking code must be integrated into the HTML of your web page.
Please add the following tracking code to your website right before the closing head tag </head>.
Replace XXXXX with your project 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>

Can I integrate the tracking code at the bottom on my page?

Technically this is not a problem. But we recommend to place the tracking-code as far up as possible, so that all visitors can be tracked who quickly leave your site and thus cancel the loading of the page.

Will the tracking code slow down my site?

The tracking code will be loaded asynchronously respectively in parallel with any other resource of your web page. This means that our tracking code loads independently from the rendering of your website. The load time of your website will therefore not negatively affected.

Configuration

To customize the tracking of your analytics and track additional data, it is possible to add various attributes to the tracking code.

These attributes must be added to the existing JSON object in the tracking code. The attributes can be defined individually or as a whole object.

Example for tracking with custom data

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Your project token for the tracking.
  _fss.pageUri = '/example/uri?with=search';
  _fss.pageTitle = 'Example title of the page';
  _fss.cookieDomain = '.example.com';
  // Rest of the tracking code from line 3 (see above)
</script>

Example for tracking with custom data as a whole object

The object can be defined as a whole object. Please note that the object is correctly defined, otherwise the entire tracking works incorrectly or not at all.

<script type="text/javascript">
  var _fss = {
    token:XXXXX, // Your project token for the tracking.
    pageUri: '/example/uri?with=search', 
    pageTitle: 'Example title of the page', 
  };
  // Rest of the tracking code from line 3 (see above)
</script>

pageUri

If you want to change the URL of your site for any reason, since the URL structure of your web page will change soon for example or the URL contains too many variables, the URI can be overriden with the pageUri attribute.

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Your project token for the tracking.
  _fss.pageUri = '/a/example/uri?with=search';
  // Rest of the tracking code from line 3 (see above)
</script>

pageTitle

To display the title of a page, we read out the title tag of your page. Use the attribute pageTitle to override the title of your page for the statistics. Please note for the site statistics please, that this information will be stored only with the first page view and will not be overwritten. If you want to change the title of a page, you can do this in the respective detail page of the site statistics via the button [Change title].

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Your project token for the tracking.
  _fss.pageTitle = 'Your own title of the page';
  // Rest of the tracking code from line 3 (see above)
</script>

referrer

With the option you can overwrite the referrer of the current site. This is for example useful with redirects or ajax requests.

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Your project token for the tracking.
  _fss.referrer = 'http://www.example.com/referrer.htm';
  // Rest of the tracking code from line 3 (see above)
</script>

cookieDomain

This option can be used to allow tracking across multiple subdomains. For example to enable tracking for all subdomains under example.com, the value must be set to .example.com. Please note the leading dot. Without the dot no cookie would be set, because with only one dot most browsers would recognize the domain name as invalid.

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Your project token for the tracking.
  _fss.cookieDomain = '.example.com';
  // Rest of the tracking code from line 3 (see above)
</script>

scrollElement

Allows you to specify the ID of an HTML element for the tracking of the scroll depth. If scrolling is enabled within a specific element - a fixed layer for example - in which the contents of the web page is scrolled down, the element can be configured with this parameter. Please specify the ID of the HTML element as the value.

<script type="text/javascript">
  var _fss = _fss || {};
  _fss.token = XXXXX; // Your project token for the tracking.
  _fss.scrollElement = "elementID";
  // Rest of the tracking code from line 3 (see above)
</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

With Stetic it is possible to track individual events on a website. This can be a registration of a new user, an order in an online store, adding an item to the cart, playing a video or any other actions.

To track an event, please add the following customized JavaScript code into your web page. IMPORTANT! The code must be placed under the normal tracking code (see above).

stetic.track('event_name');

Please adjust the event name event_name to fit your needs. Please note not to use too many event names per Web page, to keep the overview.

For differentiation and segmentation you can add various attributes as JavaScript object to every event.

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

Tracking the registration of a new user might look like this example:

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

Subobjects and arrays are also possible and can be used for the reporting. Here, for example, adding an item to the shopping cart:

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

Track all events and associated attributes that might assist you in the evaluation and optimization of your website. The event for playing a video should contain at least the title of the video. With this information you can later analyze which video was the most played.

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

The event for playing a video should contain at least the title of the video, to be able to analyze which video was the most played.

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

A further interesting and quite useful example is the tracking of 404 page not found and in general all error pages. Using the attributes url and referer, you can track on which page the error occurred and where the visitors came from.

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

Reserved event names are currently order, basket and experiment , which can be used for special analytics. See Ecommerce Tracking & A/B Tests.

Callback

To run a function when the event is received by Stetic, you can use the third parameter of the track method with a callback function.

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

Ecommerce Tracking

For our Ecommerce Analytics please use the special events order and basket, to be able to track and analyze shopping cart actions and orders in your online store. It is important to provide as much information as possible, to obtain the best possible reporting.

basket

To track adding an product to the shopping cart, the event basket should be used. In the attribute products please specify an array with one or more products that have been added to the shopping cart. Please note that you only track this event once after the item has been added to the shopping cart .

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

Alternatively, the attribute product can be used for a single object.

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

Order

For the order and revenue reporting please use the event order. For an explanation of each attribute, see the following code example: Note here also that you track this event only once after submitting the order.

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)
});

Campaign Tracking

You can use our campaign tracking to track the success of your advertising or marketing campaigns. With the campaign tracking it is possible to measure the number of visitors, pages impressions, time on site or bounce rate per campaign.

With this tracking you can analyze how many visitors for example - came from a promotional banner, a newsletter, or other advertising on your website.

A visitor enters through a campaign link on your web page, the visitor is indicated with the campaign in the statistics and the relevant statistical data are counted for this campaign.

Campaign tracking via URL parameter

With the URL parameter fs_campaign you can provide the name of the campaign with any url you like. Optionally you can use Google's used parameter utm_campaign too.

It is important that the value of the parameter is URL encoded.

In addition, the following parameters can be specified:

http://www.yoursite.com/landingpage.html?fs_campaign=Advertising%2Bbanner%2BPortal%2BXY

http://www.yoursite.com/?fs_campaign=Newsletter%2BDecember%2B2012

Conversion Tracking

With our conversion tracking, you can measure the success of your contact form, your order, your registration or any other desired action. For this purpose, you must include only a piece of HTML before the actual Stetic HTML code on the confirmation page (the page that confirms the success of the action). The tracking code itself must include a name for the success of the action (E.g. order, registration, form sent) and a given name of the category of the action (E.g., Webshop, Forum, contact form).

The tracking of conversions works such as the tracking of events with the bite extra parameters category for the category and goal for the name of the target.

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

A/B Test

A/B tests can be used for experiments, to test and evaluate different layouts of your website. With the results the best variant will be chosen which you should use in the future. The number of variants is unlimited.

The results of your experiments can be analyzed through our A/B test reports, funnels, segments or on your ecommerce dashboard.

To start the test simply integrate a tracking code in the page with your experiment. In the code you have to define the title and the variants of the test. Per visitor one variant is selected and tracked. The values of the experiment will be added to all following events that you are sending to us.

Content

1. A/B Test Tool
2. Manual tracking
3. End experiment
4. Server-side A/B test

Stetic A/B Test Tool

For the automatic handling of A/B tests in JavaScript we offer a function in our already included tracking code on your site, which does the following:

1. Selection of a random variant
2. Store the selected variant in a cookie
3. Ensure that per unique visitor is always returned the same variant
4. Tracking and transmission of the experiment and the selected variant to Stetic
5. Call the callback function with the selected variant

To start an A/B test, please add the following customized JavaScript code to your web page.

stetic.ab(<Name of the A/B test>, <Array with variants>, <Callback function>);

Example

stetic.ab("Shopping cart button", ['red', 'green', 'blue'], function(variant) {
    // Code for display of the shopping cart buttons
});

Full example with jQuery

<button class="btn-basket" style="display: none;">Shopping cart</button>

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

Manual tracking of the A/B test

If you want to select the variant and do the tracking by yourself, you can do this by simply tracking the event experiment with the desired properties.

Please note, that you have to show and track only one variant per visitor across time. Otherwise, the results will be falsified. Cookies are a way to achieve this.

stetic.track('experiment', {
    name: "<Name of the A/B test>", 
    variant: "<Name of the selected variant>"
});

For example, if you want to test two variants of your shopping cart button, show and track the variant with the red button for the first 50% visitors and the other 50% with the green button.

Tracking code for the first 50%

stetic.track('experiment', {name: "Shopping cart button", variant: "Red"});

Tracking code for the second 50%

stetic.track('experiment', {name: "Shopping cart button", variant: "Green"});

End A/B test and experiment

If the goal is reached and the visitors converts, you should end the experiment by sending the event end_experiment for the current visitor. This is necessary to stop automatically appending the experiment to every event you sent. In the example above, that would be the completion of the order. On the confirmation page, you can include the following code:

stetic.track('end_experiment', {name: "Shopping cart button"});

Server-side implementation of a A/B Test

Sometimes it's necessary to implement a A/B Test on server-side. For example to test a complete design of a webpage and load a different stylesheet. A simple implementation in PHP with a random display could look like this:

<?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>';

Advanced Link tracking

External links, references that link from your Web site to other Web sites, are automatically detected and tracked by Stetic. In some circumstances Stetic can't recognize the link, if the URL of the link is within your page. This may be the case if you pass the link through a redirect. There are two ways to identify these links:

Tagging of external links with CSS

If the URL of the link is within your own web page, you can assign the CSS class "fs_link" to the link tag so it can be detected and tracked as external link by Stetic.

Sample HTML to tag an external link

<a href="/example/redirection?url_id=817" class="fs_link">Click here</a>

Direct call of the Link tracker via JavaScript

You can call the Stetic Link tracker directly via the onClick event of the link. In the event itself, the function "fs_handleClick(this); " has to be called.

Sample HTML for the direct call of the Stetic link tracker

<a href="/example/redirection?url_id=817" onClick="fs_handleClick(this);">Click here</a>

Anchor tracking

At some Web sites, mostly web pages that are created completely in Flash or viewing the contents of the page with the help of AJAX, the movements, so the navigation within the web page, cannot be recognized by the Stetic Tracker. The reason for this is that no new URL is called when changing the pages, the HTML code in the browser remains always the same.

With the installation of additional HTML codes, Stetic can detect changes in the anchor (#) of your Web site, identify and track it as a normal pageview. Per call the part after the anchor in the URL has to be changed and present optimally as a normal URL. Examples of such URL's:

http://www.yourdomain.xy/#/start
http://www.yourdomain.xy/#/information
http://www.yourdomain.xy/#/information/company
http://www.yourdomain.xy/forum#/register/user/ok

To enable the anchor tracking please integrate following HTML code into your page. Please use your project ID, as in the normal tracking code in place of 999999. Attention! The normal tracking code have to be still on your page!

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