[BB-2859] Implement Matomo tracking in Ocim
Created by: lgp171188
This PR implements Matomo tracking in the Ocim frontend. The tracking data will be sent to the Matomo instance configured at build-time using the REACT_APP_MATOMO_BASE_URL
environment variable. If it is not configured, the frontend will not perform any tracking using Matomo at all.
Testing instructions:
-
Check out the source branch of this PR.
-
Install the JavaScript library dependencies by running
npm install
from thefrontend/
directory. -
Build the Ocim API client by running the
build-api-client.sh
script inside thescripts
directory. -
Start the Ocim backend application inside the devstack vagrant VM by running
make dev.up
. -
Set up a local Matomo instance by using
docker-compose
and the below contents in adocker-compose.yml
file.--- version: "2" services: matomo: container_name: matomo image: matomo:3-apache volumes: - ./matomo-data:/var/www/html environment: - MATOMO_DATABASE_HOST=mysql - MATOMO_DATABASE_ADAPTER="mysql" - MATOMO_DATABASE_TABLES_PREFIX=matomo_ - MATOMO_DATABASE_USERNAME=matomo - MATOMO_DATABASE_PASSWORD=analytics - MATOMO_DATABASE_DBNAME=matomo ports: - 8080:80 mysql: container_name: mysql image: mysql:5.6 volumes: - ./mysql-data:/var/lib/mysql environment: - MYSQL_ROOT_PASSWORD=dolphinuser - MYSQL_DATABASE=matomo - MYSQL_USER=matomo - MYSQL_PASSWORD=analytics
-
Open http://localhost:8080 and complete the Matomo installation process using the wizard. Add http://localhost:3000 as a site at the end of the installation process.
-
If Matomo complains about expecting to run at http://localhost instead of http://localhost:8080, edit
./matomo-data/config/config.inc.php
and addlocalhost:8080
to the list of trusted hosts.trusted_hosts[] = "localhost:8080"
-
Set the environment variable
REACT_APP_MATOMO_BASE_URL
to'http://localhost:8080'
and theREACT_APP_MATOMO_SITE_ID
environment variable to1
(or the appropriate site ID if you have created more than one site in Matomo). -
Start the frontend app by running
npm start
. -
The Ocim frontend app should open up in the browser and there should be no errors in the page or the output of the
npm
command run in the previous step`. -
Open the
Network
section of the browser developer tools and verify that thematomo.js
JavaScript file was loaded. -
Go through the registration process and verify that a request to the Matomo instance with the page tracking data (don't have to actually check the data) is made on all page navigation operations.
-
Complete the registration process and log in to the Ocim console.
-
Navigate to the various pages in the console and verify that the page navigation is still tracked.
-
Log in to Matomo and verify that all the visits and the page navigation is tracked.
-
In case there is no data, it could be because your browser has an ad-blocker or privacy settings (like Do Not Track etc.) that might be blocking Matomo or asking Matomo to not track you. For proper verification, test this in a fresh browser profile with all the privacy and tracking protections, DNT disabled.
-
Stop the frontend app and unset the
REACT_APP_*
environment variables set in a previous step. -
Start the frontend app again and open the site in a fresh browser profile without any existing data and all the privacy/tracking protections disabled.
-
Go through the registration process and also navigate between the pages in the console.
-
Verify that there is no Matomo tracking done.
Author notes and concerns:
- The Matomo React libraries are included in the build process and likely included in the page even when the tracking is not enabled. While there are some ways to do a conditional import of the library, they appear to involve a lot of workarounds and may involve ejecting the React app. So I have not tried to do any of those things.
- The tracking of the user's email address is not yet implemented.