Skip to content

[BB-2859] Implement Matomo tracking in Ocim

Boros Gábor requested to merge guruprasad/BB-2859-matomo-tracking into master

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 the frontend/ directory.

  • Build the Ocim API client by running the build-api-client.sh script inside the scripts 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 a docker-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 add localhost: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 the REACT_APP_MATOMO_SITE_ID environment variable to 1 (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 the matomo.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.

Merge request reports