\documentclass[a4paper, 11pt]{article}
\renewcommand{\familydefault}{\sfdefault}
\usepackage{a4wide}
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}
\usepackage{color}
\usepackage{graphicx}
\usepackage{setspace}
\usepackage{ulem}
\usepackage{listings}
\usepackage{float}
\usepackage[rflt]{floatflt}
\usepackage{tabularx}
\setlength{\parindent}{0pt}
\title{Event-Tracking - Vanilla JS}
\usepackage[
pdftitle={Event-Tracking - Vanilla JS}
pdfsubject={Event-Tracking auch ohne Google}
pdfauthor={Udo Schmal}
pdfkeywords={JavaScript, Tracking, downloads, email, tel, externe Links}
]{hyperref}
\definecolor{darkblue}{rgb}{0,0,.5}
\hypersetup{pdftex=true, colorlinks=true, breaklinks=true, linkcolor=darkblue, menucolor=darkblue, pagecolor=darkblue, urlcolor=darkblue}
\begin{document}Event-Tracking - Vanilla JS
\singlespacing
{\LARGE \textbf{\label{sec:title}JavaScript Event-Tracking}}

\singlespacing
{\large \textbf{\label{sec:subtitle}Event-Tracking mit und ohne Google}}

\begin{floatingfigure}[r]{0.33\textwidth}
\centering
\includegraphics[width=0.25\textwidth]{/home/udo/webserver/www.gocher.me/www-root/media/my-ga.png}

[nicht nur für http]
\end{floatingfigure}

In diesem Beispiel werden Aufrufe von externen Links, sprünge auf Sprungmarken, mailto, tel, Downloads, Videos und Audios als auch Ereignisse wie Scrollen auf der Seite oder Verlassen der Seite selbst das umschalten auf einen anderen Tab über XMLHttpRequest (Ajax) an den Server (aufgerufene Adresse) zurückgemeldet. Eine Routine auf dem Server kann dann einfach an Hand der POST Parameter die Zugriffe analysieren.

\href{http://www.gocher.me/code/ga-snippet.js}{GoogleAnalytics Code und die Event-Tracking Erweiterung}

\href{http://www.gocher.me/code/matomo-snippet.js}{Matomo Code und die Event-Tracking Erweiterung}

\begin{tabularx}{0.9\textwidth} { | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | }
\hline
Art & Kategorie & Aktion & Label & Wert \\
\hline
externe Links & external & click & url des Links & 1 \\
\hline
Sprung zu einer Sprungmarke & internal & click & id der Sprungmarke & 1 \\
\hline
E-Mail mailto: Link & email & click & E-Mail-Adresse & 1 \\
\hline
Telefonnummer & telefone & click & Telefonnummer & 1 \\
\hline
Download Link & download & click & url der Datei & 1 \\
\hline
Button Klick & button & click & id - Caption & 1 \\
\hline
Input Type Button Klick & input-[type] & click & id - Value & 1 \\
\hline
Video Start & video & play & url des Videos & 0 \\
\hline
Video Pause & video & pause & url des Videos & 0 \\
\hline
Video Beendet & video & ended & url des Videos & Zeit in Sekunden \\
\hline
Audio Start & audio & play & url der Audiodatei & 0 \\
\hline
Audio Pause & audio & pause & url der Audiodatei & 0 \\
\hline
Audio Beendet & audio & ended & url der Audiodatei & Zeit in Sekunden \\
\hline
Anzeige der Seite & Time on Page & show & url der Seite & 0 \\
\hline
Seite nicht mehr sichtbar, z.B. neuer Tab & Time on Page & hide & gemessene sichtbare Zeit in ms & 0 \\
\hline
Verlassen der Seite & Time on Page & leave & gemessene gesamte sichtbare Zeit in ms & Zeit in Sekunden \\
\hline
Scroll Event & Scroll Depth & Percentage & Baseline, 25\%, 50\%, 75\%, 100\% & 1 \\
\hline
\end{tabularx}

\singlespacing
{\small \textbf{Code:}}

\href{http://www.gocher.me/code/tracking.js}{tracking.js}
\end{document}