Make PiwikPro java script code smaller?

Data collection and tags
1

I am a new PiwikPro Core plan user. I have installed the Piwik java script code on my WordPress websites with the PiwikPro WordPress plugin.

I noticed that the java script code installed by PiwkPro is a lot bigger than the code used by Google Analytics. The Piwik code is around 86KB and the GA code is just around 20KB. Uncompressed the Piwik code is more than 300KB.

Is there any way to make the code smaller in size? For example by disabling options in the Data collection settings?

Thanks for the help!

Best Wishes,
Alwin

2

Hello @optipiwik, which .js file did you look at when analyzing size?
By default our container code is also responsible for loading Consent Manager and Tag Manager. That’s the file that contains the ID of your site or app from Piwik PRO (example: “74bda40d-ed9d-40c8-ac93-99d58da82a95.js”).

If considering just the main Analytics library (our JavaScript Tracking Client called ppms.js or ppas.js) loaded standalone or inside of the Tag Manager, the code is indeed a bit bigger than GA’s analytics library, but that doesn’t affect website’s overall performance. You can verify that by running tools like Lighthouse.

However, we understand that optimizing sizes of assets like JS libraries is important. Because of that, we are planning to reduce the size of our Analytics library in the near future. I’ll update this thread once we can share more details.

3

Thank you for your help Piotrek!

Trying to understand how PiwikPro code works:

I see 3 connections in my GTmetrix report:

  1. https://option-webdesign.containers.piwik.pro/0ac0d197-f254-48d9-9ffa-67ba0e222f8d.js
    (60,6 KB compressed / 224KB uncompressed)

  2. https://option-webdesign.containers.piwik.pro/ppms.js
    (26,6 KB / 79,3KB)

  3. https://option-webdesign.piwik.pro/ppms.php?action_name=Experiment%20Krewerd%20|%20Aardbevingsdorp%20neemt%20heft%20in%20eigen%20handen&idsite=0ac0d197-f254-48d9-9ffa-67ba0e222f8d&rec=1&r=691412&h=2&m=37&s=31&url=https%3A%2F%2Fwww.experimentkrewerd.nl%2F&_idts=1665135452&_idvc=1&_idn=1&_viewts=1665135452&send_image=0&ts_n=jstc_tm&ts_v=2.8.3&cookie=1&res=1367x864&gt_ms=22&pv_id=E3PQEy

(0 KB/ 0KB)

Now some questions:

  • Do I need all three of them? What is the 3th one with 0KB? Seems like an empty URL?
  • Will the code be smaller if I add the code manually and do not use the WordPress plugin?
  • Can I deactivate the Tag Manager to make the code smaller?

Thanks for your help :slight_smile:
Alwin

4

You can get rid of the first one, but it means basically disabling the Tag Manager module. Requires also some custom code to be added. No. 3 is the actual request that transfers data to the analytics backend, so it’s a must have. Its size is 0 because all the data is passed via GET params or headers.

5

Thank you for your help kuba!

6

Hello kuba,

On one of my sites I used this code to exlude using the large tag manager code:

<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(["trackPageView"]);
    _paq.push(["enableLinkTracking"]);
    (function() {
        var u = "https://your-account-name.piwik.pro/";
        _paq.push(["setTrackerUrl", u + "ppms.php"]);
        _paq.push(["setSiteId", "XXX-XXX-XXX-XXX-XXX"]);
        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 + "ppms.js";
        s.parentNode.insertBefore(g, s);
    })();
</script>

Now everything seems to be working fine on this site with PiwikPro (I don’t use tag manager options or consent manager options on this site) and the PiwikPro code is ow indeed much smaller.

However, one thing I notice is that Real User Monitoring is not working anymore when using the above code? Is that correct?

Can I add some lines of code at the above code to make RUM work again?

Thanks for your help!
Alwin

7

Hi @optipiwik,

By default this code will calculate the Real User Monitoring on 10 percent of the requests.

If you need more precise RUM details, you can alter it by using
setTimingDataSamplingOnPageLoad

Kind regards,
Richard

8

Hell rmastop,

Thank you for the link; I have added the code now :slight_smile:
Alwin

9

The code is not working, still around 10% of the requests is used for RUM reporting. I have added the exra line of code like this:

	<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(["trackPageView"]);
    _paq.push(["enableLinkTracking"]);
    (function() {
        var u = "xxxxxxxxxxxxxxxxxxxx.piwik.pro/";
        _paq.push(["setTrackerUrl", u + "ppms.php"]);
        _paq.push(["setSiteId", "xxxxxxxxxxxxxxxxxxxxxxxx"]);
        _paq.push(["setTimingDataSamplingOnPageLoad", 100]);
        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 + "ppms.js";
        s.parentNode.insertBefore(g, s);
    })();
</script>
10

Hi,

move the command up before the pageview gets pushed and it should work as expected.

best,
Markus

11

Hello mbaersch,

So you mean like this?

<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(["setTimingDataSamplingOnPageLoad", 100]);
    _paq.push(["trackPageView"]);
    _paq.push(["enableLinkTracking"]);
    (function() {
        var u = "xxxxxxxxxxxxxxxxxxxx.piwik.pro/";
        _paq.push(["setTrackerUrl", u + "ppms.php"]);
        _paq.push(["setSiteId", "xxxxxxxxxxxxxxxxxxxxxxxx"]);
        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 + "ppms.js";
        s.parentNode.insertBefore(g, s);
    })();
</script>
12

Exactly. Why are you asking, is it not working as expected?

13

Just asking to be sure :slight_smile:

I just checked and it seems to be working now!

1 Like
14

One more question about adding this line of code to the javascript snippet:

 _paq.push(["setTimingDataSamplingOnPageLoad", 100]);
  • Does this line create an extra request for mydomain/piwik.pro/ppms.php? Because that is what I think to see in my GTmetrix waterfall.

Thanks,
Alwin

15

Hi. Yes. The thing is that we can’t really delay the page view event just for the sake of gathering page performance data at the same time. Because of that, we implemented it via a separate ping event.

16

I get it; thanks for confirming!