Dokumentation

Basis-Integration

Inhalt

Dein Tracking Code Tracking Code einbauen Standardintegration Integration in PHP-Webseiten Integration in JSP-Webseiten Integration in Flash-Webseiten Integration in Frames Integration in Content Management- und Shop-Systeme Integration mit Security Headers einbauen Tracking Code für Google AMP-Seiten

Damit etracker die Nutzungs-Daten der Website (wie z. B. Besucher und Seitenaufrufe) ermitteln kann, ist der etracker Tracking Code notwendig.

Der Tracking Code muss in alle zu messenden Seiten deiner Website einmalig eingebunden werden.

Hiermit ist die Basis-Integration auch schon abgeschlossen und Folgendes wird automatisch erfasst:

Alle Seitenaufrufe mit Seitentitel und URL (ohne URL-Parameter) mit sekundengenauer Verweildauer und Zugehörigkeit zu den Navigationsbereichen gemäß URL-Struktur
Sämtliche externen Linkaufrufe, Download-Klicks und Scroll-Events
Videos, Podcasts, Musik (abspielbare Medien)
Nutzung der internen Suche nach Definition des Such-Parameters
Zuordnung der Besuche nach Medium (Type-In, SEO/SEA, Social Media, Referrer)
Google Analytics (UTM) Kampagnenparameter (als Herkunft, Medium, Kampagne)
Alle organischen Referrer (Domain und Pfad)

Optional kannst du zudem die im Tracking Code enthaltenen etracker Parameter befüllen.

Für spezielle Auswertungen und Reports können zusätzliche Daten über Schnittstellen übergeben werden, die ebenfalls in die zu messende Website integriert werden müssen. Folgende Schnittstellen stehen dir zur Verfügung:

JavaScript Wrapper zur Erfassung von Daten unabhängig von einer Page Impression (z. B. Erfassung von Ajax-Requests).
E-Commerce API zur Erfassung von Product Performance-Daten, Bestellungen und Übergabe von neuem Bestellstatus (Storno, Lead to Sales).

Dein Tracking Code

Der Tracking Code beinhaltet einen für jeden Account eindeutigen Schlüsselwert. Dein persönlicher Tracking Code wird dir nach dem ersten Anmelden angezeigt. Du findest ihn auch jederzeit unter Integration → Website Code.

Tracking Code einbauen

Standardintegration

Damit etracker die Daten deiner Website erfassen kann, muss der Tracking Code innerhalb des HTML-Quellcodes auf allen zu messenden Seiten deiner Website bzw. im Template deines Content Management- oder Shop-Systems zwischen dem öffnenden <head>-Tag und dem schließenden </head>-Tag eingefügt werden. Wenn du den etracker Optimiser einsetzt, empfehlen wir den Tracking Code unmittelbar hinter dem öffnenden <head>-Tag oder so nah wie möglich daran einzubauen, um Flackereffekte beim Aufrufen einer Seite zu minimieren.

Der Tracking Code baut sich wie im nachstehenden Beispiel gezeigt auf:

Beispiel der Integration des Tacking Codes in ein HTML-Dokument html

<!-- Copyright (c) 2000-2021 etracker GmbH. All rights reserved. -->
<!-- This material may not be reproduced, displayed, modified or distributed -->
<!-- without the express prior written permission of the copyright holder. -->
<!-- etracker tracklet 5.0 -->
<script type="text/javascript">
// var et_pagename = "";
// var et_areas = "";
// var et_tval = 0;
// var et_tsale = 0;
// var et_tonr = "";
// var et_basket = "";
</script>
<script id="_etLoader" type="text/javascript" charset="UTF-8" data-block-cookies="true" data-respect-dnt="true" data-secure-code="XXXXX" src="//code.etracker.com/code/e.js" async></script>
<!-- etracker tracklet 5.0 end -->

Wichtig

Gemäß EU-Richtlinie sorgt der Parameter data-block-cookies=“true“ im Tracking Code dafür, dass standardmäßig keine etracker Cookies gesetzt werden. Optional kannst du die Funktion zur Aktivierung von etracker Cookies in deinem Cookie-Hinweis integrieren, um das Setzen von etracker Cookies bei Einwilligung zu ermöglichen.

Solltest du eine gängige Consent Management-Lösung einsetzen, beachte diese Hinweise für das Zusammenspiel, um das Cookie-lose Tracking nicht fälschlicherweise zu blockieren.

Wenn du das Add-on etracker Optimiser nutzt, muss auf den Webseiten, wo A/B-Tests, Sticky Bars oder Popups ausgespielt werden, der Tracking Code um ein zusätzliches Attribut ergänzt werden:

html

data-enable-eo="true"

Für diese Seiten sieht der Tracking Code im Standard dann folgendermaßen aus:

Tracking Code mit data-enable-eo Parameter html

<!-- Copyright (c) 2000-2022 etracker GmbH. All rights reserved. -->
<!-- This material may not be reproduced, displayed, modified or distributed -->
<!-- without the express prior written permission of the copyright holder. -->
<!-- etracker tracklet 5.0 -->
<script type="text/javascript">
// var et_pagename = "";
// var et_areas = "";
// var et_tval = 0;
// var et_tsale = 0;
// var et_tonr = "";
// var et_basket = "";
</script>
<script id="_etLoader" type="text/javascript" charset="UTF-8" data-block-cookies="true" data-respect-dnt="true" data-enable-eo="true" data-secure-code="XXXXX" src="//code.etracker.com/code/e.js" async></script>
<!-- etracker tracklet 5.0 end -->

Nach Einbau des Tracking Codes beginnt etracker sofort mit dem Tracken deiner Website.

Integration in PHP-Webseiten

Verwende dazu diesen PHP-Code:

<?php
/* Sample usage: */
require_once "etracker.inc.php";
// easy base code (pagename will be detected automatically)
echo etracker::getCode("YOUR_SECURECODE");
// normal base code
echo etracker::getCode("YOUR_SECURECODE", ["et_pagename" => "YOUR_PAGENAME", "et_areas" => "YOUR_AREA1/AREA2"]);
// base code for campaign / target pages
echo etracker::getCode(
  "YOUR_SECURECODE",
  [
    "et_pagename" => "YOUR_PAGENAME",        // pagename
    "et_areas"    => "YOUR_AREA1/AREA2",     // slash delimited area names
    "et_tval"     => 5.80,                   // target value
    "et_tsale"    => 1,                      // target is sale (1) not a lead (0)
    "et_tonr"     => "YOUR_INV_NR:123",      // target order number
    "et_basket"   => "ARTICLE1,DESCRIPTION1,GROUP1,AMOUNT1,PRICE1", // shopping cart
  ],
  [
    "show_all"           => true,                 // include empty default parameters
    "slave_codes"        => ["CODE01", "CODE02"], // additional secure codes
    "respect_dnt"        => false,                // exclude data-respect-dnt at
    "cookie_upgrade_url" => "https://example.com/cookie-upgrade.php", // cookie upgrade URL
    "block_cookies"      => true,                 // do not set cookies
    "banner"             => "etracker tracklet",  // used to customize banner comment
  ]
);
?>

Hier kannst du die Datei etracker.inc.zip herunterladen.

Integration in JSP-Webseiten

Verwende dazu diesen JSP-Code:

CountingParameter Overview:
Parameter.PAGE_NAME - String
Parameter.AREAS - String
Parameter.ILEVEL - Integer
Parameter.VALUE - Double
Parameter.SALE - Integer
Parameter.ORDER_NR - String
Parameter.LPAGE - Integer
Parameter.CUSTOMER - Boolean
Parameter.BASKET - String
Parameter.SUB_CHANNEL - String
Parameter.CDI - String
Parameter.CC_ATTRIBUTES - Map<String, Object>
Sample Usage:
<!-- etracker Bean instance -->
<jsp:useBean id="etracker" scope="session" class="com.etracker.bean.Bean"/>
<!-- easy code with default settings (pagename will be detected automatically) -->
<%=etracker.getCode("YOUR_SECURECODE")%>
<!-- code with some parameters set -->
<%
    List<CountingParameter> parameters = new ArrayList<CountingParameter>();
    parameters.add(etracker.newParam(etracker.Parameter.PAGE_NAME, "my new page name"));
    parameters.add(etracker.newParam(etracker.Parameter.LPAGE, 3));
%>
<%=etracker.getCode("YOUR_SECURECODE", parameters)%>
<!-- code with parameters and options set -->
<%=etracker.getCode(
    "YOUR_SECURECODE",
    parameters,
    new TrackingOptions()
        .setShowAll(true) // include empty default parameters
        .setSlaveCodes(new String[] { "CODE01", "CODE02" }) // additional secure codes
        .setRespectDNT(false) // exclude data-respect-dnt attribute
        .setCookieLifetime(3) // identifier cookie lifetime in 30-day spans
        .setCookieUpgradeURL("https://example.com/cookie-upgrade.php") // cookie upgrade URL
        .setBlockCookies(false) // do not set cookies
        .setBanner("etracker tracklet") // used to customize banner comment
    )%>

Lade hier die Datei etracker-bean.jar (Version 5.0) herunter.

Integration in Flash-Webseiten

Hier zeigen wir dir Beispiele in ActionScript 2.0 und ActionScript 3.0, um den Tracking Code in Flash-Webseiten zu integrieren. Verwende die Methode ExternalInterface.call, um von Flash aus die etracker Funktion et_eC_Wrapper aufzurufen.

Beispiele

ExternalInterface.call("et_eC_Wrapper", "Key", "Seitename", "Bereich");
ExternalInterface.call("et_eC_Wrapper", "Key", "Seitename", "Bereich", 
 "ilevel", "URL", "Target", "tval", "Ordernr", 
 "tsale", "Customer", "Basket";

Integration in Frames

Meistens besteht ein Frameset aus mehreren kleinen Rahmen (z. B. mit Menüs, Copyright-Hinweisen und Titeln) sowie einem großen Hauptrahmen, in dem der eigentliche Inhalt angezeigt wird. Wählt der Besucher einen Menüpunkt, wird der Inhalt des Hauptrahmens ausgewechselt. Beim Zählen von Page Impressions ist es entscheidend, welche Seiten von Besuchern in diesem Hauptrahmen aufgerufen werden. Deshalb ist es für eine korrekte Zählung der Page Impressions wichtig, den Tracking Code nur auf den Seiten des Framesets einzufügen, die im Hauptframe nachgeladen werden.

Integration in Content Management- und Shop-Systeme

Für Content Management- oder Shop-Systeme sollte der Tracking Code einmal manuell erzeugt und anschließend auf dem Layout-Template eingefügt werden. Die Parameter des Tracking Codes sind dann durch Variablen des Content Management- bzw. Shop-Systems zu übergeben.

Für die gängigen Shop-Systeme stellen wir dir auch Plugins zu Verfügung.

Integration mit Security Headers einbauen

Um die Sicherheit von Webanwendungen zu erhöhen, ist es gute Praxis, HTTP-Security-Headers zu verwenden. Hierzu gehört unter anderem der Content-Security-Policy-Header (CSP).

Um den Tracking Code auf einem Server mit aktiviertem CSP zu verwenden, muss der CSP-Header für etracker folgendermaßen ergänzt werden:

Header set Content-Security-Policy "script-src 'self' https://*.etracker.com https://*.etracker.de 'unsafe-inline'; connect-src https://*.etracker.de; img-src 'self' https://*.etracker.com https://*.etracker.de"

Bei Verwendung der Scrollmap sollte zudem noch das Einbetten in einen iframe erlaubt werden:

Header set Content-Security-Policy "frame-ancestors https://*.etracker.com; script-src 'self' https://*.etracker.com https://*.etracker.de 'unsafe-inline'; connect-src https://*.etracker.de; img-src 'self' https://*.etracker.com https://*.etracker.de"

Hinweis

Die Einschränkung „unsafe-inline“ kann aufgehoben werden, wenn der etracker Parameter-Block in der Webseite und die CSP bei der Auslieferung der Seite mit dem gleichen, zufällig erzeugten Nonce versehen werden.

Tracking Code für Google AMP-Seiten

Mit etracker ist es auch möglich, die Besucher, Page Impressions (PIs), Verweildauer sowie Ein- und Ausstiege auf AMP-Seiten zu tracken. Dazu muss die Seite an maximal zwei Stellen angepasst werden.

Zuerst muss amp-analytics eingebunden werden. Dazu wird im HTML durch Hinzufügen eines Script-Elements im Head-Element das entsprechende Skript geladen:

AMP html

<head>
<script async
custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
</head>

Werden mehrere Analyse-Tools gleichzeitig eingesetzt (z. B. etracker und Google Analytics), muss das Skript nur einmal geladen werden. Danach wird im Body-Element amp-analytics mit der etracker Konfiguration eingebunden.