Event Tracking interrupts PageView Tracking

Support & Bugs
1

Hi folks. I’m observing something pretty disturbing. In my Angular 2 application i’m using the standard piwik tracking javascript (see below). With the defaults i’m able to observe some rudimentary tracking of user behavior. I noticed in the piwik controller folder --> breadcrumbs here the --> tooltips shows up as undefined. upon studying the docs the parameters responsible for these undefined events are e_c, e_c, e_a, e_n. Here is where things get interesting and confusing. When I peppered event tracking directives throughout my html I noticed that as expected the undefined values were now defined. However it appears the page view tracking was disabled or interrupted. meaning my page to page navigation indicators in the piwik controller are no longer displayed in the real time visitors widget. however now the events tracked are defined and show up as metrics in the actions --> Events section.

Help???

script which causes problems:
_paq.push([‘trackEvent’, ‘category’, ']);
when I add this code my script header or directly to a particular html file or css class within and anchor events are tracked but page views are no longer tracked. Is this a bug or am I breaking some rule by using track page view and event tracking at the same time in an Angular2 app?

original script

<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(["setDomains", ["*." + window.location.host + ""]]);
    _paq.push(['enableHeartBeatTimer']);
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    _paq.push(['trackEvent']);
    _paq.push(['trackSiteSearch']);
    _paq.push(['trackAllContentImpressions']);
    _paq.push(['setCookieDomain', '*.controller.com']);
    (function() {
        var u="//piwikaws.controller.com/piwik/";
        _paq.push(['setUserId', {{user.username}}]);
        _paq.push(['setTrackerUrl', u+'piwik.php']);
        _paq.push(['setSiteId', 289]);
        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="//piwikaws.controller.com/piwik/piwik.php?idsite=289" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
2

Actually upon further study I am not so sure this is a bug as much as it is a failure in config on my side or support by the piwik framework. The manual event tracking code works as expected. what doesn’t work is the delivery of the hashtag URL changes.

To give you a better idea of what i’m seeing. here is a scenario.

  1. I open my single page app #/home URL the first time which generates a server side call to our index Single Page.
  2. while looking at the request/response capture in Chrome I see the Piwik query parameters for this page load
    which shows the url:http://localhost/#/home & urlref:http://localhost/. These and all other values are happily
    sent to the piwik controller
  3. when I click another link within my UI - say - Search or Learning or Anything, two things happen.
    • The values for url and url ref are unchanged while the #/home become #/search (etc…)
      url:http://localhost/#/home urlref:http://localhost/
    • The piwik.js file is “NOT” loaded? Is this why single page applications are so difficult if not impossible to track with Piwik? I have the How to - Analytics Platform - Matomo how-to set. It doesn’t make sense that the piwik.js file needs to be loaded for the page parameters to be tracked and delivered but this is my observation. The only thing I can point to which describes why the page load issues (this is no longer an event tracking question) is that a page reload is required for piwik to send the current angular page to the piwik controller.

Is there some config to alleviate this or do I have to do some javascript gymnastics to using onhashchange or god forbid using manual directives instead of the router javascript script?