google analytics 4 (#4354)

docker/nginx/root/etc/nginx/nginx.conf

@@ -29,7 +29,7 @@ http {
     add_header X-Frame-Options "SAMEORIGIN" always;
     add_header X-Xss-Protection "1; mode=block" always;
     add_header Referrer-Policy  strict-origin-when-cross-origin;
-    add_header Content-Security-Policy  "default-src 'self' 127.0.0.1 https://fonts.gstatic.com *.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com *.axept.io data: ;script-src 'unsafe-inline' 'unsafe-eval' 'self' https://www.gstatic.com *.alchemyasp.com *.axept.io ;style-src 'self' 'unsafe-inline' https://fonts.gstatic.com https://fonts.googleapis.com https://www.google.com https://www.gstatic.com ;img-src 'self' data: blob: *.tiles.mapbox.com https://axeptio.imgix.net ; object-src 'self';frame-ancestors 'self' ";
+    add_header Content-Security-Policy  "default-src 'self' 127.0.0.1 https://fonts.gstatic.com *.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com *.axept.io https://www.googletagmanager.com *.google-analytics.com data: ;script-src 'unsafe-inline' 'unsafe-eval' 'self' https://www.gstatic.com *.alchemyasp.com *.axept.io https://www.googletagmanager.com ;style-src 'self' 'unsafe-inline' https://fonts.gstatic.com https://fonts.googleapis.com https://www.google.com https://www.gstatic.com ;img-src 'self' data: blob: *.tiles.mapbox.com https://axeptio.imgix.net ; object-src 'self';frame-ancestors 'self' ";
     include /etc/nginx/conf.d/*.conf;
 
 }

templates/web/common/analytics.html.twig

@@ -1,15 +1,12 @@
 {% if app['conf'].get(['registry', 'general', 'analytics']) != '' %}
-    <script type="text/javascript">
-
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', '{{ app['conf'].get(['registry', 'general', 'analytics']) }}']);
-    _gaq.push(['_trackPageview']);
-
-    (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{ app['conf'].get(['registry', 'general', 'analytics']) }}"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
 
+        // format G-45TV5FXNF5
+        gtag('config', "{{ app['conf'].get(['registry', 'general', 'analytics']) }}");
     </script>
 {% endif %}