Use nginx to have matomo (piwik) hosted inside an Angular app on the same domain

by

What is it?

Given the following situation, I have a website and want to get some analytics. One could choose to use Google Analytics, but this means giving all your data to a company.
One of many options is to use Matomo, Matomo is a powerful privacy-first web analytics platform that gives you 100% data ownership.

In this blog I will depict how I have setup Matomo on my webserver and use nginx to forward traphic to it. Next I will give a super simple example how to integrate it in an existing Angular app.

The situation

Normaly, if a user goes to a website, the analytics data is gathered by a thirth party domain/website

For example, bbc.co.uk uses chartbeat.net to send analytic data there

This situation is totally fine and is used by a great amount of companies. But I want that my users only download content from the domain they initialy visited

What I desire

Left how an analytics website tracks the user, right the situation I desire.

The setup

  1. DirectAdmin as webhost panel for the domain webstats.inexpro.nl (my personal company)
  2. Let’s Encrypt for the https certificate
  3. Matomo as analytics software
  4. MySql as database server
  5. nginx as reverse proxy
I’ve created a new user in DirectAdmin and requested a SSL certificate for https via Let’s Encrypts
Public SSL certificate details
I used WinSCP to upload all the Matomo files to my webserver
Then I edited the config.ini.php file to have all my fancypants details in there to connect to the MySql database

And then, we have a (after installation) working Matomo application

Put it all behind nginx

With the normal installation, if I then use it, the website visitor will be downloading files/scripts from e.g. timdows.com and then send traphic stats to webstats.inexpro.nl. In order to minimize the domains, I’ve created the following setup/solution for this.

In DirectAdmin, for the website that will be visisted, the following was added in Custom HTTPD Configurations

The above solution forwards all requests from, in this case https://timdows.com/s.js to https://webstats.inexpro.nl/matomo.js
Also all the ping requets (that hold the actual analytics data) go to https://timdows.com/s.php

In an Angular app I can now add the following plugin and configuration using the ngx-matomo plugin.

The result

Now, when a user visites my webpage, the Angular configuration requests the matomo script from the same website under s.js and sends all the data to s.php. For the user it all apears to be coming from the same domain

s.js and s.php live on the same domain🎉