Using Matomo instead of Google Analytics & Cookie Banner

[RudiThoeni]

Hi @stefanocudini

1. We want to use Matomo instead of Google analytics https://digital.matomo.cloud/ Site ID: 20

Maybe there is a React plugin? The result should be to integrate this script in the page (already populated with siteId 20)

<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="[https://digital.matomo.cloud/";](https://digital.matomo.cloud/%22;)
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '20']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src='//cdn.matomo.cloud/digital.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

2. We want to use a new cookie banner

https://www.npmjs.com/package/vanilla-cookieconsent

on the page bottom there is a "how to use in react" section.

under the "// your config" section this code has to be inserted:

{
    current_lang : "en",
    autoclear_cookies : true,
    cookie_expiration : 365,
    page_scripts: true,
    gui_options: {
        consent_modal: {
            layout: 'box',
            position: 'bottom right',
            transition: 'slide'
        },
        settings_modal: {
            layout: 'box',
            transition: 'slide'
        }
    },
    onFirstAction: function() {},
    onAccept: function (cookie) {},
    onChange: function (cookie, changed_preferences) {},
    languages: {
        'en': {
            consent_modal: {
                title:'We use cookies!',
                description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',
                primary_btn: {
                    text: 'Accept all',
                    role: 'accept_all'
                },
                secondary_btn: {
                    text: 'Reject all',
                    role: 'accept_necessary'
                }
            },
            settings_modal: {
                title: "Cookie settings",
                save_settings_btn: 'Save settings',
                accept_all_btn: 'Accept all',
                reject_all_btn: 'Reject all',
                close_btn_label: 'Close',
                cookie_table_headers: [
                    {col1: 'Name'},
                    {col2: 'Domain'},
                    {col3: 'Expiration'},
                    {col4: 'Description'}
                ],
                blocks: [
                    {
                        description: 'We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="https://noi.bz.it/en/privacy-cookie-policy" class="cc-link">privacy policy</a>.'
                    }, {
                        title: 'Strictly necessary cookies',
                        description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',
                        toggle: {
                            value: 'necessary',
                            enabled: true,
                            readonly: true
                        }
                    }, {
                        title: 'Advertisement and Targeting cookies',
                        description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you',
                        toggle: {
                            value: 'targeting',
                            enabled: false,
                            readonly: false
                        }
                    }, {
                        title: 'More information',
                        description: 'For any queries in relation to our policy on cookies and your choices, please contact us at help@opendatahub.com.',
                    }
                ]
            }
        }
    }
}

thx and cheers ;)

[RudiThoeni]

hi @stefanocudini We tried to add Matomo but it was not that straightforward and we had to make some changes to the code (https://github.com/noi-techpark/odh-mentor-otp/commit/e912e9e0a88b97b293d3734c154802181f90fe18)

We had to change the journey/src/app.js class JourneyWebapp extends Component { to const JourneyWebapp = ({t}) => {

@henri-egger explains why he did this changes (he is our new React Expert ;)), Can you have a look and maybe give us some hints/tips on how to integrate matomo, maybe also the cookie banner could be a problem......

[henri-egger]

For implementing the plugin i first destructured the return value of useMatomo, which itself is a hook. Then i use the destructured method in a lifecycle method, here useEffect. I was not able to Replicate this with a class component, as the useMatomo hook can only be used outside of other hooks, but there no variable declaration can be made.

Working example:

const JourneyWebapp = ({t}) => {

  const { trackPageView } = useMatomo();

  React.useEffect(() => {
    trackPageView();
  }, [])

Throws error:

Class JourneyWebapp extends Component {

  const { trackPageView } = useMatomo(); // Unexpected token. A constructor, method, accessor, or property was expected.

  componentDidMount() {
    trackPageView();
  }

or

Class JourneyWebapp extends Component {

  componentDidMount() {
    const { trackPageView } = useMatomo(); // https://reactjs.org/docs/error-decoder.html/?invariant=321
    trackPageView();
  }

[stefanocudini]

hi I was doing some things here: https://github.com/openmove/odh-mentor-otp/tree/integration-matomo

I think it's complete but I haven't had a chance to test (using a react component)

[henri-egger]

hi @stefanocudini, I took a look at your code but i don't think it would send a call for two reasons, but please correct me if I'm wrong.

1. In the matomoInstance:

   • urlBase should be "https://digital.matomo.cloud/", not the window's url.
   • I don't think the siteId will be set to 20 with this syntax but I am not certain.
     2. The useMatomo hook is never called.

   I am unfortunately not able to test your version of the journey app as the docker image build fails:

   41.54 ERROR in ./src/styles/index.scss
   41.54 Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
   41.54 ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

   We also had the idea to use the useMatomo hook within a separate component which is defined with a function instead of a class, which we could then simply insert into the App component. This would allow us to use matomo without changing the App component too much. What do you think?

[RudiThoeni]

@stefanocudini now @henri-egger has managed to integrate matomo and the cookie banner as react component. so he reverted the changes to the code made before....

if you are ok with this changes https://github.com/noi-techpark/odh-mentor-otp/commit/de0c2cf98d69e7aa755e186266f36544229a1056 https://github.com/noi-techpark/odh-mentor-otp/commit/fc00bae8a490b19a8b0e1ab5c6fe6fc12a1e8c95 this issue is done, what do you think?

thx for checking,

[stefanocudini]

@stefanocudini now @henri-egger has managed to integrate matomo and the cookie banner as react component. so he reverted the changes to the code made before....

if you are ok with this changes de0c2cf fc00bae this issue is done, what do you think?

thx for checking,

hi @RudiThoeni, @henri-egger

I saw your integrations if you did test with Matomo counter, api key ecc I think it's ok. but there are some important points for us:

1) you should make sure that Matomo can be disabled from configuration(config.yml) because we still use GoogleAnalitycs, it would be useful to keep a generic code base. One way to do this you can see the simple logic here: https://github.com/openmove/odh-mentor-otp/blob/integration-matomo/journey/src/main.js#L103 and here: https://github.com/openmove/odh-mentor-otp/blob/integration-matomo/journey/src/main.js#L52 I would like to be sure that if in the matomo configuration there is no react component it should not be included.

2) dotenv is required for our development environment, I see that you have removed it here: https://github.com/noi-techpark/odh-mentor-otp/commit/e912e9e0a88b97b293d3734c154802181f90fe18#diff-bf3c1ebda2335001c75cf2d80332f7910bb6d909228a86b3736df0d6ae88d39

3) is very important that any texts entered in the application is i18n compatible, we have done a great job to achieve this so I ask you to avoid hard-coding tests in the js code: https://github.com/noi-techpark/odh-mentor-otp/commit/fc00bae8a490b19a8b0e1ab5c6fe6fc12a1e8c95#diff-b59741a1972d85f96039b547ac30de7056a9c74487af1b53ac8768bf204a4712R42 extending these modules: https://github.com/noi-techpark/odh-mentor-otp/blob/main/journey/src/i18n/en.js

This is important foe the future contributions from our fork

[RudiThoeni]

Hi @stefanocudini

Thank you for your detailed feedback. You figured out good points,

1. Now thx to @henri-egger managed to add the matomo configurable via environment variables. (https://github.com/noi-techpark/odh-mentor-otp/commit/7b651718f7147d71b6dc6607d176485fcfc66f51)
2. dotenv is still there don't know why it shifted down on line 56 (https://github.com/noi-techpark/odh-mentor-otp/commit/e912e9e0a88b97b293d3734c154802181f90fe18#diff-bf3c1ebda2335001c75cf2d80332f7910bb6d909228a86b3736df0d6ae88d6c2R56)
3. @henri-egger also removed all hardcoded strings and put them into the resource files (https://github.com/noi-techpark/odh-mentor-otp/commit/39d4d284a98348cda57590a55e1c138b63c0b489)

What do you think are the changes ready? thx and cheers Rudi

[stefanocudini]

@RudiThoeni great! yes, as I wrote here the server side services does not give problems: https://github.com/noi-techpark/odh-mentor-otp/pull/150

now I done a quick check of the journey and it works fine I don't think I can do localhost tests of the matomo counter, that you will see once in prod domain.

it seems great to me tnks, Stef