Matomo tracking fails when I try to initialize in React Component. But works well if I initialize it in the index.html. I want to initialize the matomo after some events in the ponent but I am getting this error:

matomo.js:182 _paq.push() was used but Matomo tracker was not initialized before the matomo.js file was loaded. Make sure to configure the tracker via _paq.push before loading matomo.js. Alternatively, you can create a tracker via Matomo.addTracker() manually and then use _paq.push but it may not fully work as tracker methods may not be executed in the correct order.

I want to load Matomo_url and Site_id from backend and then initialize the matomo tracking, here is the code:

var _paq = window._paq || [];
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
(function() {
  var u = "//{$MATOMO_URL}/";
  _paq.push(["setTrackerUrl", u + "matomo.php"]);
  _paq.push(["setSiteId", { $IDSITE }]);
  var d = document,
    g = d.createElement("script"),
    s = d.getElementsByTagName("script")[0];
  g.type = "text/javascript";
  g.async = true;
  g.defer = true;
  g.src = u + "matomo.js";
  s.parentNode.insertBefore(g, s);
})();

Initializing matomo is happening in ponentDidMount of the ponent. I would appreciate any idea.

Matomo tracking fails when I try to initialize in React Component. But works well if I initialize it in the index.html. I want to initialize the matomo after some events in the ponent but I am getting this error:

matomo.js:182 _paq.push() was used but Matomo tracker was not initialized before the matomo.js file was loaded. Make sure to configure the tracker via _paq.push before loading matomo.js. Alternatively, you can create a tracker via Matomo.addTracker() manually and then use _paq.push but it may not fully work as tracker methods may not be executed in the correct order.

I want to load Matomo_url and Site_id from backend and then initialize the matomo tracking, here is the code:

var _paq = window._paq || [];
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
(function() {
  var u = "//{$MATOMO_URL}/";
  _paq.push(["setTrackerUrl", u + "matomo.php"]);
  _paq.push(["setSiteId", { $IDSITE }]);
  var d = document,
    g = d.createElement("script"),
    s = d.getElementsByTagName("script")[0];
  g.type = "text/javascript";
  g.async = true;
  g.defer = true;
  g.src = u + "matomo.js";
  s.parentNode.insertBefore(g, s);
})();

Initializing matomo is happening in ponentDidMount of the ponent. I would appreciate any idea.

• javascript
• reactjs
• matomo

• 1 _paq needs to be a global variable. So if you define it in a function, you need to set window._paq=_paq in that function to make it global. – lw1.at Commented Jul 6, 2020 at 17:31
• @lw1.at thanks for your ment. I forgot to look at StackOverflow again. But you are right I have appended _paq back to window by doing window._paq=_paq and then it worked well – Doston Commented Jul 7, 2020 at 6:50

1 Answer 1

The Matomo tracking code needs the _paq variable to be a global variable for the matomo.js to work properly. If the tracking code is put inside a function, then _paq only exists inside that function.

To workaround that, you can add window._paq=_paq below the var _paq = window._paq || []; line.