Implement matomoClickAction

[erwindemoel]

Thanks for providing the ngx-matomo package, it works great! I'm having a small problem however with implementing actions. I've used your example:

<!-- Simple bindings -->
<button type="button" matomoClickCategory="myCategory" matomoClickAction="myAction">
  Example #1
</button>

However when I click the button I get a 404: GET http://localhost:4200/matomo.js net::ERR_ABORTED 404 (Not Found)

What am I missing or doing wrong? I've imported the NgxMatomoTrackerModule in the module for my page. Is there anything else I should do?

[EmmanuelRoux]

Hi @erwindemoel, it looks like a problem in module configuration, can you please provide a repro on Stackblitz?

[erwindemoel]

Hi @EmmanuelRoux, I'm not sure how to use Stackblitz. But there isn't much code that I added.

In our app.module.ts we have in imports: NgxMatomoTrackerModule.forRoot(getMatomoConfig()),

and in the dashboard.module.ts we import: NgxMatomoTrackerModule

the button on the dashboard html looks like this:

<button [disabled]="deviceForm.invalid" mat-flat-button color="primary" (click)="applyFilter()"
                            matomoClickCategory="dashboards" matomoClickAction="apply"
                            matomoClickName="meterAnalysisDashboard">
                            <mat-icon class="icon-size-5 mr-2" [svgIcon]="'heroicons_solid:refresh'"></mat-icon>
                            {{ 'WORDS.APPLY' | transloco }}
                        </button>

Does that help? Or can I provide more information?

[EmmanuelRoux]

For Stackblitz, you can just go to this link. Add your dependencies in package.json and try to reproduce the issue with minimal setup. Then you can share the Editor url (Share button in header menu).

Can you at least provide your configuration? (getMatomoConfig() I think)

[erwindemoel]

Hi @EmmanuelRoux, my apologies. I forgot to include that one. Here it is:

export function getMatomoConfig() {
    const jsonFile = `assets/config/config.json`; //path to config file
    var request = new XMLHttpRequest();
    request.open('GET', jsonFile, false);  // get app settings
    request.send(null);
    const response = JSON.parse(request.responseText);
    return { trackerUrl: response.matomoPath, siteId: response.matomoSiteId };
}

We made the matomoPath and matomoSideId configurable, so they can be replaced in our Azure DevOps pipelines on deployment. This way we can track activities in both our Test and Production environments seperately.

Does that help?

[EmmanuelRoux]

Sorry @erwindemoel but I can't reproduce the error. Without a reproduction, it will be very difficul to debug.

[erwindemoel]

Hi, I managed to fix it. The issue was that it didn't work locally, but did work on our Test environment. I'm closing this ticket, thanks for your help!