Tracking von Zielen

supporter · September 2, 2016, 6:27am

Hallo,
weiß jemand wie man in den normalen Code die Trackingziele (Formular öffnen und Formular gesendet) einbaut. Irgendwie zählt Piwik gerade mal was es will.

Danke für die Hilfe
Oliver

GatheredPain · September 11, 2016, 10:46am

Hi

Vorab 1: Ein “Ziel” sollte nur der “letzte Schritt” sein. Also i.d.R. das erfolgreich abgesendete Formular.

Vorab 2: Ein etwas genauere Problembeschreibung wäre gut. Es ist z.B. ein gravierender Unterschied ob “Formular öffnen” ein Seitenaufruf oder ggf. ein vor- oder nachgeladenes Modal-Window (o.ä.) ist.

Wenn es sich um Seitenaufrufe handelt, wird per Code wie folgt getrackt. _( Bei Modals muss “_paq.push(…)” an der entsprechenden Stelle im Javascript-Code stehen. )

<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(['trackGoal', 123]) // 123 = Goal-ID laut Piwik-Einstellungen
</script>

Das Ziel selbst sollte dabei natürlich auf “Manuell” eingestellt sein.

Siehe: Track Goals and Measure Conversions - Analytics Platform - Matomo

Um Formular-Öffnungen zu tracken, würde ich “Events” (“Ereignisse”) empfehlen. An den entsprechenden Stellen:

<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(['trackEvent', 'Mein Formular A', 'Formular geöffnet']);
</script>

–

<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(['trackEvent', 'Mein Formular A', 'Formular Fehler']);
</script>

–

<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(['trackEvent', 'Mein Formular A', 'Formular Erflolg']);
</script>

Siehe: Event Tracking - Analytics Platform - Matomo

supporter · September 14, 2016, 8:12am

Hallo,

erst einmal vielen Dank für Deine Antwort.

Das ist der Code für die Seiten. Den Code habe ich in der Template-Datei in meinem Typo3 eingesetzt.Also auch bei dem Formular. Das Formular hat eine eigene Template-Datei.Für das Formular habe ich dann den Code um die beiden Zeilen ergänzt.
_paq.push([‘trackGoal’, 8]) // Formular öffnen
_paq.push([‘trackGoal’, 10]) // Formular gesendet
Jetzt zeigt er mir an, dass zuerst das Formular gesendet wird und dann erst geöffnet wurde. Stimmt die Reihenfolge nicht? Ich bin kein JavaScript-Fachmann.

<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(["setDomains", ["*.www.firma.de"]]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
_paq.push(['trackGoal', 8]) // Formular öffnen
_paq.push(['trackGoal', 10]) // Formular gesendet
(function() {
var u="//piwik.firma.de/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="//piwik.firma.de/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->

Danke,
Oliver

GatheredPain · September 14, 2016, 10:06am

Nein, so macht das keinen Sinn. So Trackst du ja die Ziele 8 und 10 gleichzeitig. (je nach dem, wo der Code steht)

Das generelle Tracking und die Ziele solltest du sauber trennen.

Generell, also in dem Template/Code, der bei wirklich jedem Seitenaufruf geladen wird:

<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(["setDomains", ["*.www.firma.de"]]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//piwik.firma.de/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="//piwik.firma.de/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->

nur in dem Template/Code für “Formular öffnen”:

<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackGoal', 8]) // Formular öffnen
</script>

nur in dem Template/Code für “Formular gesendet”:

<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackGoal', 10]) // Formular gesendet
</script>

supporter · September 14, 2016, 1:12pm

Hallo,
wenn ich den Code in mein Formular-Template eintrage, zeigt er mir an, dass das Formular “geöffnet” und “versendet” wurde, obwohl das Formular NUR geöffnet wurde. Wo ist da mein Denkfehler?

Danke,
Oliver

GatheredPain · September 14, 2016, 1:52pm

Ohne die Anwendung zu kennen bzw. ohne zu wissen, wie dein Formular funktioniert, ist das unmöglich zu sagen. Höchst wahrscheinlich baust du die “trackGoal”-Zeilen einfach an der falschen Stelle ein.

Da es dutzende mögliche Ursachen dafür gibt und das Hauptsächlich vom Aufbau deiner Anwendung ist abhängig ist, ist es fast unmöglich den richtigen Tipp zu geben.

Letztendlich darf _paq.push([‘trackGoal’, 8]) im generierten HTML-Code nur da ausgegeben werden, wo das Formular angezeigt wird und _paq.push([‘trackGoal’, 10]) nur da, wo z.B. auch die Erfolgsmeldung angezeigt wird.

Um das zu testen, am besten einfach mal ein “alert” einbauen. z.B.:

Stelle 1

<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackGoal', 8]) // Formular öffnen
alert("Tracked Goal 8");
</script>

Stelle 2

<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackGoal', 10]) // Formular gesendet
alert("Tracked Goal 10");
</script>

good luck

supporter · September 15, 2016, 11:43am

Hallo,

das Formular ist ein Standard-Formular aus Typo3. Die HTML-Template sieht so aus. Am Ende habe ich Deine Zeilen eingesetzt. Zuerst kommt die Meldung “Goal 10”, dann “Goal 8”.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta name="google-site-verification" content="222mm5RGkP4L9V-TYxOyhxVW43UKpzZkXaZ6fs8TWWU" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="main.css" media="screen">
 
  </head>
 
<body>
<!--###DOCUMENT_BODY### Beginn-->

<div id="page">
<div id="pagemainbox">

<div class="container-fluid">

<div id="headermenu">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div id="loslogo">
       <a href="index.php?id=2778">
       <img  width="150"  src="logo.png" alt="Logo">
       </a></div>
  </div>
</nav>

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
 <div id="register">
      <ul>
       
           <li> <a href="index.php?id=2778" class="navbar-brand">Mein</a></li>
       <li class="telefon"><a  class="navbar-brand" href="tel:+498009060606">&nbsp;&nbsp;&nbsp;&nbsp;Tel.0800 9060606</a></li>
         <li class="mail"> <a class="navbar-brand" href="">  </a></li>

        </ul>
</div>
      
      <style>

#register ul .mail a {
  background-image: url(verbund.gif); background-repeat: no-repeat;
  background-position: 5% 50%;
          width:320px;
}

  #register ul .t a      
{color:black;}
        
</style>
  </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <ul class="nav navbar-nav">

     <li >
       <a href="index.php?id=2779">
       Kontakt
       </a></li>
 
      <li >
       <a href="index.php?id=2783">
     Home
       </a></li>
  </ul>

</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</div>
  
 <div class="container-fluid">
  <div id="breadcrumb">
   Sie sind hier:
  <!--###BREADCRUMB###START-->
  <!--###BREADCRUMB###ENDE-->  
  </div>
 </div>

 <div id="mitte">
 <div class="container-fluid">
   <div id="lospageleft">
   <!--###LOSPAGELEFT###START-->
   <p>Dies ist die linke Spalte</p>
   <!--###LOSPAGELEFT###ENDE-->
   </div>
 
  <div id="losstartblock1">
  <!--###CONTENT1###START-->
  <h1>Willkommen</h1>
  <h2>Hier soll der Inhalt später stehen.</h2>
  <p>An dieser Stelle soll später der Inhalt von TYPO3 eingefügt werden.</p>
  <!--###CONTENT1###END-->
  </div>
</div>
</div>

 <div class="container-fluid">
 <div id="footer">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
<div id="footermenu">
<a class="navbar-brand" href="index.php?id=2780">Datenschutz</a>
<a class="navbar-brand" href="index.php?id=2781">Impressum</a>
<a class="navbar-brand" href="index.php?id=2828">Sitemap</a>
</div><!--Ende footermenu-->
</div>

    <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">  
        <div id="navmenu">
   <!--###NAVIGATION###START-->
    <p>Dies ist die Startmenu</p>
    <!--###NAVIGATION###ENDE-->
        </div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->

</nav>
</div>
 </div>
 </div><!-- /.container-fluid -->
 </div>
 </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
 
<!-- Piwik Image Tracker-->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackGoal', 10]) // Formular gesendet
alert("Tracked Goal 10");
</script>
<noscript><img src="http://piwik.firma.de/piwik.php?idsite=1&rec=1&action_name=Kontakt&idgoal=10" style="border:0" alt="" /></noscript>
<!-- End Piwik -->  
  
<!-- Piwik Image Tracker-->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackGoal', 8]) // Formular öffnen
alert("Tracked Goal 8");
</script>
<noscript><img src="http://piwik.firma.de/piwik.php?idsite=1&rec=1&action_name=Kontakt&idgoal=8" style="border:0" alt="" /></noscript>
<!-- End Piwik -->
  
<!--###DOCUMENT_BODY### Ende-->
</body>
</html>

Vielleicht liegt es ja an Typo3?

In der normalen Template-Datei sieht der Code so aus:

<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(["setDomains", ["*.www.firma.de"]]);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//piwik.firma.de/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img src="//piwik.firma.de/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->

Danke Dir,
Oliver

GatheredPain · September 15, 2016, 3:57pm

Genau, was ich geschrieben habe. So ist es falsch. Wenn beide im Code einer Seite stehen, werden auch beide (gleichzeitig) getrackt. An welcher Stelle soll denn hier deiner Meinung nach unterschieden werden, was vor und was nach dem Absenden ist?

In dem Code steht auch nirgends was von nem Formular. Imo bist du da an der völlig falschen Stelle.

Nochmal:

In deinem Code steht beides zusammen an einer Stelle, wo weit und breit weder Formular noch Erfolgsmeldung zu sehen ist.

Das hat auch nichts mit Piwik zu tun. Erkundige dich am besten in dem Typo3-Forum. Da kann dir sicher eher jemand sagen wo die Code-Schnipsel eingetragen werden können.