Merge pull request #49 from gethinode/develop

feat: support nonces

Author: markdumay

README.md

@@ -66,6 +66,7 @@ This module supports the following parameters (see the section `params.modules`
 |---------------------------|---------|-------------|
 | GoogleAnalytics.force     | false   | Trigger to force include the analytics scripts, bypassing other settings. Use this setting for debugging and testing only. |
 | GoogleAnalytics.gcm       | false   | Trigger to enable Google Consent Mode v2 (advanced mode). |
+| GoogleAnalytics.nonce     | false   | Trigger to pass nonces to tag manager, only applicable when GCM is enabled. See [Google documentation][google-csp] for more details. |
 
 ## Google Consent Mode v2
 
@@ -80,12 +81,19 @@ This module supports Google Consent Mode v2. Use the following parameters in you
   state = "immediate"
   category = "necessary"
   gcm = true
+  nonce = false
 ```
 
+## Content Security Policy
+
+The module includes the policies required for Google Tag Manager's Preview Mode and Google Analytics 4. Review [Google's Content Security Policy][google-csp] to review the settings required for Google Ads, Google Ads User Data Beacon, Floodlight, and Service Worker.
+
+
 <!-- MARKDOWN LINKS -->
 [hugo]: https://gohugo.io
 [hinode_docs]: https://gethinode.com
 [google-analytics]: https://marketingplatform.google.com
+[google-csp]: https://developers.google.com/tag-platform/security/guides/csp
 [repository]: https://github.com/gethinode/hinode.git
 [repository_template]: https://github.com/gethinode/template.git
 [conventionalcommits]: https://www.conventionalcommits.org

assets/js/modules/googleanalytics/googleanalytics.js

@@ -32,6 +32,10 @@ gtag("set", "url_passthrough", true);
       dl = l != 'dataLayer' ? '&l=' + l : ''
   j.async = true
   j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
+  {{ if site.Params.modules.GoogleAnalytics.nonce }}
+  var n = d.querySelector('[nonce]')
+  n && j.setAttribute('nonce', n.nonce || n.getAttribute('nonce'))
+  {{ end }}
   f.parentNode.insertBefore(j, f)
 })(window, document, 'script', 'dataLayer', '{{ upper (. | urlize) }}')
 {{ else }}

config.toml

@@ -18,18 +18,23 @@
   state = "async"
   category = "analytics"
   gcm = false
+  nonce = false
 
 # use the following setings when using Google Consent Mode v2
 # [params.modules.GoogleAnalytics]
-#   integration = "critical" # set to critical when using Google Consent Mode v2
+#   integration = "critical" 
 #   state = "immediate"
 #   category = "necessary"
 #   gcm = true
+#   nonce = true # to use nonce-aware Tag Manager
 
 [params.modules.GoogleAnalytics.csp]
   script-src = [
       "*.google-analytics.com",
-      "*.googletagmanager.com"
+      "*.googletagmanager.com",
+      "*.analytics.google.com",
+      "googletagmanager.com",
+      "tagmanager.google.com"
   ]
   connect-src = [
       "*.analytics.google.com",
@@ -42,5 +47,17 @@
   ]
   img-src = [
       "*.google-analytics.com",
-      "*.googletagmanager.com"
+      "*.googletagmanager.com",
+      "googletagmanager.com",
+      "ssl.gstatic.com",
+      "www.gstatic.com"
+  ]
+  style-src = [
+      "googletagmanager.com",
+      "tagmanager.google.com",
+      "fonts.googleapis.com"
+  ]
+  font-src = [
+    "fonts.gstatic.com",
+    "data:"
   ]