Ability to add an analytics tracking code to Signalen frontend

[bartjkdp]

We would like municipalities to be able to add a tracking code for their analytics solution, so they are able to track pageviews on Signalen.

Possible solution design

Add the ability to mount an additional file in the container (e.g. /extend_body.html). This contents of this file is added to the HTML body in index.html during runtime via start.sh.

The contents of this HTML can then be controlled via a value in the Helm chart:

htmlBodyExtend: |
    <script async src="https://siteimproveanalytics.com/js/siteanalyze_000000.js"></script>

The content of the value can be added to a ConfigMap and mounted on /extend_body.html in the container.

Considerations

• We could also consider using the existing configuration JSON, but formatting HTML in a JSON value can be challenging.
• We can consider moving to YAML for the app configuration, then adding HTML as a value can become easier as well.

[boris-arkenaar]

Sounds good Bart, thanks!

Having all configurations together would be preferable I'd say. HTML in JSON doesn't even have to be that bad, right? Only escape the double quotes. Do you need only one script tag, or is that just an example? Would only the URL be sufficient?

[bartjkdp]

@boris-arkenaar thanks for the feedback. I think the script tag is just an example, different analytics solutions have different ways of embedding. For example the Matomo code looks like this:

<script type="text/javascript">
  var _paq = window._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.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

I agree, it could work to use a JSON value. The Signalen frontend Helm chart allows the values to be configured in YAML and Helm takes care of converting this to JSON. So we won't bother the users of the Helm chart with fiddling the code into JSON.

[OscarBakker]

@boris-arkenaar thanks for the feedback. I think the script tag is just an example, different analytics solutions have different ways of embedding. For example the Matomo code looks like this:

<script type="text/javascript">
  var _paq = window._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.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

I agree, it could work to use a JSON value. The Signalen frontend Helm chart allows the values to be configured in YAML and Helm takes care of converting this to JSON. So we won't bother the users of the Helm chart with fiddling the code into JSON.

Especially these last lines sound convincing.