PiwikTrackingTag - Tracking von Akkordeon Klicks?

[n!ck]

Hallo Contao Gemeinde

ist es möglich das Öffnen von Akkordeons mit Piwik zu tracken?

Ich habe folgenden Code dazu gefunden, womit es vermutlich funktionieren sollte:

onclick="javascript:_paq.push(['trackEvent', 'Menu', 'Freedom']);"

Nun stellt sich mir nur die Frage wo ich das einbinden muss. Wenn ich es ins Template des Akkordeons nehme, hätte ich ja keine Möglichkeit die einzelnen Akkordeons zu unterscheiden.
Hat das schon jemand umgesetzt oder könnte mir auf die Sprünge helfen?

Liebe Grüße!

[Andreas]

Das sieht ja wie inline-JS aus, das würde ich so nicht machen. Normalerweise macht man in seiner JS-Datei sowas:

// JavaScript (MooTools)
var meineElemente = $$('.myToggler');

meineElemente.addEvent('click', function(){
  console.log(this);
}); 

Um das Ganze noch zu vereinfachen kannst du in der Anleitung des Accordions nach einem Callback suchen, welcher ausgeführt wird, wenn ein Item aufgeklappt wird und dein Tracking dort aufsetzen. So ein Callback kommt in die Optionen des Accordions.

[Kahmoon]

Ins Akkordeintemplate ce_accordeon.html5 in denToggler

  <div class="<?php echo $this->toggler; ?>"<?php if ($this->headlineStyle): ?> style="<?php echo $this->headlineStyle; ?>"<?php endif; ?>">
    <span class="toggler-headline"><span class="toggler-icon">+</span><?php echo $this->headline; ?></span>
  </div>

  <div class="<?php echo $this->toggler; ?>" onclick="_paq.push(['trackEvent', 'Menu', 'Freedom']);" <?php if  ($this->headlineStyle): ?> style="<?php echo  $this->headlineStyle; ?>"<?php endif; ?>">
    <span class="toggler-headline"><span  class="toggler-icon">+</span><?php echo $this->headline;  ?></span>
  </div>

Code noch mal editiert

[n!ck]

Das sieht ja wie inline-JS aus, das würde ich so nicht machen. Normalerweise macht man in seiner JS-Datei sowas:

Hallo Andreas,
vielen Dank für deinen Input. In welche JS-Datei müsste ich das setzen? Es klingt so als meinst Du eine bestimmte?

Ins Akkordeintemplate ce_accordeon.html5 in denToggler

Hallo Kahmoon,

Wäre das so richtig, möglich? Es wäre notwendig tracken zu können welches Akkordeon betätigt wurde. Kann ich dazu einfach das <?= $this->headline ?> verwenden?

<div class="<?= $this->toggler ?>" onclick="_paq.push(['trackEvent', 'Akkorderon', '<?= $this->headline ?>']);"<?php if ($this->headlineStyle): ?> style="<?= $this->headlineStyle ?>"<?php endif; ?>>
    <?= $this->headline ?>
  </div>

[Kahmoon]

Jepp, ich denke schon. Ich selbst verwende bei mir

onClick="ga('send', 'event', { eventCategory: 'Akkordion', eventAction: 'Akkordion Button', eventLabel: '<?php echo $this->headline; ?>'});"

Ist aber Analytics

[n!ck]

Hm... irgendwas scheint noch nicht zustimmen. In Piwik werden die Events nicht angezeigt.
Muss ich sonst noch etwas beachten oder evtl. bei Piwik einstellen?

Ich verwende wie in der Headline geschrieben das PiwikTrackingTag.

[Kahmoon]

Also ich weiss nicht wie das bei Piwik ist aber bei GA kann es schon mal 1-3 Std dauern bis da was sichtbar ist. Versuch es doch erst mal ohne diese Variable

[n!ck]

Piwik läuft und erfasst die Seiten wunderbar.
Allerdings finde ich nichts über die getrackten Akkordeons.

Edit: Okay... habe gerade gemerkt, dass das Template (Rocksolid) wohl das ce_accordion.html5 garnicht verwendet. Dann kann ich lange auf ein Tracking warten...

[Andreas]

Hallo Andreas,
vielen Dank für deinen Input. In welche JS-Datei müsste ich das setzen? Es klingt so als meinst Du eine bestimmte?

Meistens hat man ja irgendwo ne kleine JS eingebunden für diverse Schandtaten, z.B. über ein eigenes j_misc-Template (ich gehe mal davon aus, dass du im FE jQuery und nicht MooTools hast). Mit sonem j_misc-Template kann man

1. JS im HEAD ausführen
2. Ne JS-Datei im HEAD laden
3. Ne JS-Datei im HEAD mit in die große JS-Datei aus assets/ packen (|static)
4. JS vor dem schließenden BODY ausführen
5. Ne JS-Datei vor dem schließenden BODY laden

Die Sachen im HEAD gelten übrigens alle auch für CSS.

Wenn du das jQuery-Accordion benutzt, kannst du das activate-Event benutzen, welches bereits im j_accordion-Template drin ist. (Du brauchst damit keine eigene JS-Datei mehr). Hier der Code

// j_accordion.html5
//...
activate: function(event, ui) {

  // Piwik
  console.clear(); // Zeile löschen
  if(ui.newHeader.length > 0){
    console.debug('trigger piwik with "%s"', ui.newHeader[0].innerText); // Zeile löschen
    _paq.push(['trackEvent', 'Akkordeon', ui.newHeader[0].innerText]);
  }
  // Piwik - END

  ui.newHeader.addClass('active');
//... 

Die Zeilen mit "console..." solltest du nachher löschen oder auskommentieren, die sind nur, damit du in der Konsole beim Testen sehen kannst, wann Piwik getriggert wird. Nicht alle Browser kennen die Funktion "console".

Das if() ist da drin, damit nur beim manuellen Öffnen und nicht beim manuellen Schließen getriggert wird.

Ob das _paq.push() so richtig ist, weiß ich nicht, habe ich von dir übernommen. Getestet habe ich das (ohne Piwik) in der Online-Demo.