A better approach to Analytics integration?

[davidgs]

Question

Right now, if your sites Content-Security header is set to anything other than unsafe-inline most of the analytics other than Google won't run. They will be blocked by the CSP.

I've been working on a solution for these in-line scripts that would allow them to run, while still allowing a restrictive CSP as recommended. (unsafe-inline is definitely not recommended!)

I think I've come up with a better way to include analytics that doesn't involve adding in-line scripts, etc.

in /assets/scripts/features
analytics
├── index.js
├── posthog.js
└── statcounter.js

in `features/index.js

if (process.env.FEATURE_ANALYTICS === '1') {
  import('./analytics')
}

in features/analytics/index.js

import * as params from '@params';

if (params.analytics) { // probably don't need this one
  if (params.analytics.statcounter) {
    import('./statcounter');
  }
  if (params.analytics.posthog) {
    import('./posthog');
  }
  if (params.analytics.matomo) {
    import('./matomo')l
  }
}

assets/scripts/features/statcounter.js

import * as params from '@params';

    console.log('StatCounter: Statcounter enabled');
    const sc_project = params.analytics.statcounter.project;
    const sc_invisible = params.analytics.statcounter.invisible;
    const sc_security = params.analytics.statcounter.security;
    const scJsHost =  "https://www.statcounter.com/js/";

    const ns = document.createElement('noscript');
    ns.setAttribute('class', 'statcounter');
    const a = document.createElement('a');
    a.setAttribute('title', 'web counter');
    a.setAttribute('href', 'https://statcounter.com/');
    a.setAttribute('target', '_blank');
    const img = document.createElement('img');
    img.setAttribute('class', 'statcounter');
    img.setAttribute('src', 'https://c.statcounter.com/' + params.analytics.statcounter.project + '/0/' + params.analytics.statcounter.security + '/' + params.analytics.statcounter.invisible + '/');
    img.setAttribute('alt', 'web counter');
    img.setAttribute('referrerPolicy', 'no-referrer-when-downgrade');
    ns.appendChild(a);
    a.appendChild(img);
document.body.appendChild(ns);

Now all script elements are included in application.js and are hashed, so no in-line scripts.

To add a new kind of analytics (like posthog for instance) You would just need to add a new posthog.js file to the /assets/scripts/features/analytics directory, and update index.js with

if (params.analytics.posthog) {
  import('./posthog');
}

And the posthog scripts would be included, and hashed, so executable.

What do you think?