@mgohin opened this Issue on December 3rd 2019

We use Angular 8 with ngx-translate in our project and sometimes matomo call doesn't end so it freezes the page.

called url by matomo :

https://mydomain.com/piwik.php?action_name=MyPage&idsite=47&rec=1&r=203661&h=11&m=19&s=58&url=http%3A%2F%2Flocalhost%3A3000%2F%23%2Fpublic%2Ftest&urlref=http%3A%2F%2Flocalhost%3A3000%2F&_id=fab9aa671acf9075&_idts=1575284641&_idvc=2&_idn=0&_refts=0&_viewts=1575362367&send_image=1&pdf=1&qt=0&realp=0&wma=0&dir=0&fla=1&java=0&gears=0&ag=0&cookie=1&res=1680x1050&gt_ms=831&pv_id=Dmyu7L

This syntax makes it fail, and it's about the line-break between translate and </button>

<button
        class="btn btn-primary"
        [routerLink]="['/myurl']"
        translate>key.to.translate
</button>

But this one works :

<button
        class="btn btn-primary"
        [routerLink]="['/myurl']"
        translate>key.to.translate</button>

And this one too

<button
  class="btn btn-primary"
  [routerLink]="['/myurl']"
>{{'key.to.translate' | translate}}</button>

So I guess matomo tracks the button but fail on this one. Can you guide me how to avoid that kind of troubles (and please don't tell me to change the html syntax :) )

@mgohin commented on December 3rd 2019

Some news because we have the problem on button component.

<button class="btn" [type]="type" [ngClass]="getClass()" 
    [attr.disabled]="loading || disabled ? 'disabled' : null"
              (click)="clicked.emit($event)">
          <ng-content></ng-content>
</button>
getClass() {
    const classes = [];
    if (this.block) {
      classes.push('btn-block');
    }

    if (this.size) {
      classes.push(`btn-${this.size}`);
    }

    if (this.loading || this.outline) {
      classes.push(`btn-outline-${this.color}`);
    } else {
      classes.push(`btn-${this.color}`);
    }

    return classes;
  }

The tab freezes because getClass keeps being called. So I guess matomo is "touching" the button somehow and triggers Angular updates ?

@tsteur commented on December 3rd 2019 Member

sorry could you explain a bit more where you use Angular 8? We are using Angular 1 here. Are you developing a plugin? We can't give any support for Angular 8.

@Arnaud73 commented on December 3rd 2019

This is not going to be a simple issue.

What surprises me is the very subtle difference between the working code and the freezing code : a simple line break. Since the Angular template is no real HTML code, it is being compiled as javascript for handling DOM modification, I find it surprising that a simple line break is changing the generated code, but it could be.

Regarding Angular 8, are you using the new Ivy Renderer? If not, can you activate it (it is not by default) and check if anything changes?

@tsteur commented on December 3rd 2019 Member

@Arnaud73 @mgohin just checking are you sure you wanted to post this in the Matomo issue tracker?

@Arnaud73 commented on December 3rd 2019

@tsteur, I just wanted to add that this issue may not be an easy one to decide what needs to be fixed. Some simple test application may need to be produced in order to reproduce it and understand what's going on. Then this issue may also need to be posted to the Angular team.

@mgohin commented on December 4th 2019

@tsteur we are developing our projects with Angular 8 and we use @Arnaud73 's plugin https://github.com/Arnaud73/ngx-matomo but it seems to just wrap the api.

Matomo is mandatory for us, that's why I'm posting here, I'm dicovering Matomo so maybe I'm in the wrong place ?
Does matomo add listeners, class or anything else on buttons without setting a tracker on it ?

I tried Ivy. After a very long compilation time, it broke the app with forms, so cannot use it :(

@tsteur commented on December 4th 2019 Member

You mean in the JS tracker? We're not adding any listeners to buttons unless you were to call the addListener tracker method for a specific element. That would be more https://github.com/Arnaud73/ngx-matomo related though

@Arnaud73 commented on December 5th 2019

@mgohin, is there any chance you could come with a striped down version of your app that reproduces the problem?

@mattab commented on January 21st 2020 Member

Maybe this bug should be created in https://github.com/Arnaud73/ngx-matomo directly?

Powered by GitHub Issue Mirror