awronka / angular2piwik Goto Github PK

Hi, thanks for your work.
Just to say that it could be nice if the README was updated since there are some mistakes. I had to look myself into each function to understands some problems (example : while initializing, you must put the id of the website as well).

How to reproduce:

1. Install latest release of Angular CLI
2. Initialize a new project with ng new AoT-Angular2Piwik
3. Add Angular2Piwik in AppModule
4. Initialize Angular2Piwik in AppComponent constructor (like described on the homepage)
5. Build for prod with ng build --prod

Build will fail with this error:

ERROR in : Unexpected value 'Angular2PiwikModule in /Users/Arnaud/Temp/AoT-Angular2Piwik/node_modules/angular2piwik/dist/index.d.ts' imported by the module 'AppModule in /Users/Arnaud/Temp/AoT-Angular2Piwik/src/app/app.module.ts'. Please add a @NgModule annotation.

I'm using "typescript": "2.2.1", "@angular/cli": "1.2.6" & "@angular/compiler": "2.4.9"
@NgModule({
imports: [Angular2PiwikModule] )}

it shows ERROR in Angular2PiwikModule is not an NgModule

This is not really an issue i just didn't found a better way to place an comment to how implement this the easy way. Maybe you want to add that to your readme

As i said in the title, first i tried to add it to all components i saw fit to be tracked like you mentioned it in the readme.

1. this is alot of work
2. you also have to add trackview every time you add a new subpage that should be tracked
3. i had added it to some components too much .. so i got multiple trackPageView calls with just one visit

I think the easiest way to add this to you angular2/4 site is to change your main component like this

export class AppComponent {
  previousUrl: string = null;
  constructor(
    private router: Router,
    private configurePiwikTracker: ConfigurePiwikTracker,
    private usePiwikTracker: UsePiwikTracker
  ) {
    router.events.filter(event => event instanceof NavigationEnd).subscribe( 
      routerEvent => {
        this.configurePiwikTracker.setDocumentTitle();
        if (routerEvent instanceof NavigationEnd) {
          if (this.previousUrl) {
            this.configurePiwikTracker.setReferrerUrl(this.previousUrl);
          }
          this.configurePiwikTracker.setCustomUrl(routerEvent.url);
          this.previousUrl = routerEvent.url;
          this.usePiwikTracker.trackPageView();
        }
    });
  }
}

this sets referrer, current url, document title and tracks the page in one action and really only once per page called

also you just can add other subpages or include libraries and they are also automatically tracked

And i used my canActivate class to add the userid if present

When i initialize Piwik via Root Component
I got this error :
_paq.push() was used but Piwik tracker was not initialized before the piwik.js file was loaded

it works when i use the other method (Adding Piwik into myapplication via Script Tag.)

Warning message from webpack

./node_modules/Angular2Piwik/dist/angular-piwik-components/initialize.piwik.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Applications/MAMP/htdocs/ecom-dboard-angular-5/node_modules/Angular2Piwik/dist/angular-piwik-components/initialize.piwik.js
    Used by 1 module(s), i. e.
    /Applications/MAMP/htdocs/ecom-dboard-angular-5/node_modules/Angular2Piwik/dist/angular-piwik-components/index.js
* /Applications/MAMP/htdocs/ecom-dboard-angular-5/node_modules/angular2piwik/dist/angular-piwik-components/initialize.piwik.js
    Used by 1 module(s), i. e.
    /Applications/MAMP/htdocs/ecom-dboard-angular-5/node_modules/angular2piwik/dist/angular-piwik-components/index.js
 @ ./node_modules/Angular2Piwik/dist/angular-piwik-components/initialize.piwik.js
 @ ./node_modules/Angular2Piwik/dist/angular-piwik-components/index.js
 @ ./node_modules/Angular2Piwik/dist/index.js
 @ ./src/app/layout/layout.component.ts
 @ ./src/app/layout/layout.module.ts
 @ ./$$_lazy_route_resource lazy
 @ ./node_modules/@angular/core/esm5/core.js
 @ ./src/environments/environment.ts
 @ ./src/main.browser.ts
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/main.browser.ts

Updated: my mistake, I imported wrong module name, instead of angular2piwik, I used Angular2Piwik

ERROR [karma]:
Error: /home/ubuntu/app/src/app/app.component.ts (18,33):
Cannot find module 'Angular2Piwik'.,/home/ubuntu/app/src/app/app.module.ts (25,37):
Cannot find module 'Angular2Piwik'.,Error: Error encountered resolving symbol values statically.
Could not resolve Angular2Piwik relative to /home/ubuntu/app/src/app/app.module.ts., resolving symbol AppModule in /home/ubuntu/app/src/app/app.module.ts, resolving symbol AppModule in /home/ubuntu/app/src/app/app.module.ts

Hi,

I have successfully implemented the piwik in our angular 4 with grails application using this plugin. But as some of our users enabled Ad blocker installed, we couldn't track the analytics properly as ad-blockers blocking Piwik too. Kindly suggest any workaround for this plugin to get this done.
Thanks
Sandeep

Hello,

i implement Angular2Piwik and locali work properly but live not working and i use motamo (v 3.5.1)

please let me know how to wrong this issue.

Thanks

configPiwikTracker.setCustomVariable('mobile_no','0','9999999999');

have done this on btn click code but how to send this data along with click event to piwik portal