Integration & Setup

  1. Home
  2. Integration & Setup
  3. Tracking Code & SDKs
  4. Tracking Code Integration
  5. Basis-Integration

Basis-Integration

Damit etracker die Nutzungs-Daten der Website (wie z. B. Besucher und Seitenaufrufe) ermitteln und das Testing & Targeting durchführen kann, ist der etracker Tracking Code notwendig.

Der Tracking Code 5.0 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
  • 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).
  • eCommerce-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 unterf Account-Info → Setup/Tracking Code.

Tracking Code einbauen

1. 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.

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

<!-- Copyright (c) 2000-2020 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="XXXXXX" src="//static.etracker.com/code/e.js"></script>
<!-- etracker tracklet 5.0 end -->

Der Tracking Code wird standardmäßig Cookie-less ausgeliefert (data-block-cookies=”true”). Zum Einsatz von etracker mit Cookies findest du hier  weitere Informationen. Zudem haben wir eine Do Not Track-Einstellung (DNT) implementiert und der Code enthält einen Respect Do Not Track-Parameter (data-respect-dnt=”true”).

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

Wichtig:

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.

2. 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_cust"     => CUSTOMER_STATUS,        // status of customer
    "et_basket"   => "ARTICLE1,DESCRIPTION1,GROUP1,AMOUNT1,PRICE1", // shopping cart
    "et_cdi"      => "Y3Jvc3MtZGV2aWNlIGlk", // cross-device identifier
  ],
  [
    "show_all"           => true,                 // include empty default parameters
    "slave_codes"        => ["CODE01", "CODE02"], // additional secure codes
    "respect_dnt"        => false,                // exclude data-respect-dnt attribute
    "cookie_lifetime"    => 3,                    // identifier cookie lifetime in 30-day spans
    "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.

3. 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.

4. 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";

5. 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.

6. 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.

7. Integration in den Google Tag Manager

Gehe wie folgt vor:

1. Melde dich mit E-Mail und Passwort deines Google Kontos bei Google Tag Manager an: https://www.google.com/intl/de/tagmanager/

2. Richte ein Konto für ein Unternehmen ein und klicke auf Weiter.

3. Als nächstes richtest du einen Container für die Website des Unternehmens ein, der die Tags zum Steuern des Tracking Codes aufnimmt. Klicke anschließend auf Konto und Container erstellen.

4. Akzeptiere die Nutzungsbedingungen des Google Tag Managers. Im nachfolgenden Fenster wird ein generiertes Container-Snippet angezeigt.

5. Integriere das im Fenster angezeigte Container-Snippet wie dort beschrieben auf jeder Seite deiner Website.

6. Nun baue einen Data Layer in deine Website ein, der die etracker Parameter-Werte in JavaScript-Variablen enthält. Eine Anleitung dazu findest du auf: https://developers.google.com/tag-manager/devguide

7. Klicke jetzt auf Neues Tag hinzufügen.

Dann auf Tag Konfiguration.

Und anschließend auf Benutzerdefiniertes HTML-Tag, um deinem Container einen Tag mit deinem etracker Tracking Code hinzuzufügen.

8. Aktiviere die Checkbox bei document.write unterstützen. Damit das Tag erstellt werden kann, ist es jetzt noch notwendig, einen Trigger auszuwählen und mit einem Klick auf Speichern zu bestätigen.

Füge eine Auslösungsregel für Alle Seiten hinzu. Kopiere den Tracking Code aus der etracker Applikation unter Einstellungen → Setup/Tracking Code, füge ihn in das HTML-Fenster ein und passe ihn an deine Website an, indem du den JavaScript-Variablen des Tracking Codes die Variablen aus deinem Data Layer zuweist. Klicke zum Schluss auf Speichern.

9. Entferne den etracker Tracking Code aus deiner Website und klicke auf Veröffentlichen, um den Container mit dem Tag an die Website auszuliefern.

Hinweis: Bitte beachte, dass zwischen dem Entfernen des Tracking Codes aus der Website und dem Veröffentlichen des Containers keine Daten erfasst werden.

8. Integration mit Security Headers einbauen

Um den Tracking Code in Verbindung mit Content Security Policy oder X-Frame-Options Headers zu integrieren, müssen in Headers die notwendigen Einstellungen vorgenommen werden.

9. 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:

<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.

<body>
 <amp-analytics config="https://code.etracker.com/amp-config.json.php">
    <script type="application/json">
      {
          "vars": {
              "areas": "AMP-Beispielbereich",
              "et": "M632hA",
              "pagename": "AMP-Beispielseite"
          }
       }
     </script>
 </amp-analytics>
</body>

In dem obigen Code-Abschnitt sind die Werte für die Parameter areas, et und pagename pro Seite wie unten in der Tabelle beschrieben zu vergeben:

ParameterBeschreibungErforderlich?
etAccount-Schlüssel (eindeutig pro Account)ja
pagenameName, unter dem die Seite in etracker zu finden ist. Wenn nicht gesetzt, wird die URL der Seite dafür verwendet.nein
areasBereiche, denen die Seite zugeordnet ist.nein

Tracking von Links auf nicht-AMP-Seiten

Falls die AMP-Seiten Verknüpfungen auf Nicht-AMP-Seiten in derselben Domäne enthalten, möchte man wahrscheinlich Besucher, die von einer AMP-Seite kommen, auch zuverlässig auf traditionellen Seiten erkennen können. Dafür müssen folgende Änderungen vorgenommen werden:

  • Auf der AMP-Seite werden alle <a>-Elemente (Hyperlinks), die auf Nicht-AMP-Seiten verweisen, mit zusätzlichen Attributen versehen. Diese sorgen dafür, dass beim Aufruf der Nicht-AMP-Seite zusätzliche URL-Parameter mitgesendet werden, die durch den etracker Code auf der Zielseite transparent ausgewertet werden.
  • Auf den Ziel-Seiten (Nicht-AMP) wird unmittelbar vor (wichtig: vor, nicht nach!) der e.js die esSafeCrossDeviceTracking.js geladen:
<script src="//code.etracker.com/etSafeCrossDeviceTracking.js"></script>

Dieses Skript sorgt dafür, dass die von AMP-Analytics erstellten Tracking-Informationen etracker erreichen.

Zusätzliche Attribute für AMP-zu-nicht-AMP Hyperlinks

Hierzu müssen die folgenden Attribute verbatim in a-Elementen im AMP-HTML eingefügt werden:

data-amp-addparams="et_cdi=CLIENT_ID(_et_amp_id)&amp;et_ts=TIMESTAMP"
data-amp-replace="CLIENT_ID TIMESTAMP"

Eine Verlinkung auf die Seite https://non-amp.example.com von https://amp.example.com sieht dann so aus:

<a href="https://non-amp.example.com"   data-amp-addparams="et_cdi=CLIENT_ID(_et_amp_id)&amp;et_ts=TIMESTAMP"   data-amp-replace="CLIENT_ID TIMESTAMP">    Visit our traditional page</a>