Diese Anleitung erklärt euch, wie ihr den Tracking-Code eines Providers eurer Wahl in COYO einbinden könnt.

Hinweis:
Diese Anleitung setzt voraus, dass ihr über Kenntnisse im Bereich Webentwicklung verfügt.
 

Single Page Application

COYO ist eine Single Page Application (SPA), das heißt, dass sie nie erneut voll lädt, wenn ein Nutzer erst einmal online ist. Die meisten Provider sind auf "normale" Websites ausgelegt. Das bedeutet, dass jeder Klick eines Nutzers dafür sorgt, dass die Seite neu lädt. 

Wenn euer Anbieter nicht ausdrücklich SPAs unterstützt, bedeutet dies, dass ihr einige Anpassungen im Tracking Code des Providers vornehmen müsst.

Der Tracking Code im Allgemeinen

Im ersten Schritt benötigt ihr den Tracking Code eures Providers. In unserem Beispiel verwenden wir den Tracking Code von Google Analytics.

Ein typischer Code sieht in etwa so aus:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-12345679-1', 'auto');
  ga('send', 'pageview');
</script>

Wie ihr seht, zeichnet die letzte Zeile des Codes die Ansicht einer Seite auf. Allerdings wird dieser Code nur ausgeführt, wenn der Nutzer sie zum ersten Mal öffnet - exakt dort tritt die Herausforderung mit SPAs auf. Die Seite wird nicht erneut geladen, sodass keine zusätzlichen Seitenbesuche getrackt werden. 

COYO unterstützt jedoch JavaScript, mit dessen Hilfe es möglich ist, den Tracking Code zu adaptieren. Jedes mal, wenn ein Nutzer Änderungen auf der Seite vornimmt, wird ein JavaScript namens "stateChangeSuccess" im "window.document" aufgerufen. Dieses Ereignis enthält das Objekt "data", welches alle benötigten Informationen über den Seitenbesuch enthält.

Beispiel:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-12345679-1', 'auto');

  window.document.addEventListener('stateChangeSuccess', function (e) {
    // set new URL for Google
    ga('set', 'page', e.data.url); // e.data.url contains the new URL

    // send page view event to Google
    ga('send', 'pageview');
  }, false);
</script>

Dieser Code sollte damit genauso funktionieren, wie bei anderen Anbietern. Die meisten von ihnen bieten auch Tutorials an, wie Anpassungen vorgenommen werden können. Beispielsweise erklärt Google den Vorgang hier.

Der Tracking Code für COYO

Öffnet die Allgemeinen Einstellungen im Administrationsbereich von COYO. Dort kopiert ihr den Tracking Code ins das vorgegebene Feld. Die Änderungen werden durch das Klicken des Feldes "Speichern" aktiviert. 

Nach einem manuellen Neuladen der Seite (Strg+R) ist der Tracking Code aktiv und wurde somit am Ende des "Body" hinzugefügt.