From f0dd65f26d2c953c3e9a02bc60e08dcf623b7998 Mon Sep 17 00:00:00 2001
From: Dario Merz <dario.merz@gmail.com>
Date: Sat, 31 Aug 2019 15:23:43 +0200
Subject: [PATCH] feat(google-tag-manager): add `<noscript>` fallback (#263)
 (#300)

---
 packages/google-tag-manager/README.md |  6 ++++--
 packages/google-tag-manager/index.js  | 22 ++++++++++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)
diff --git a/packages/google-tag-manager/README.md b/packages/google-tag-manager/README.md
index 6fa9770c..273d6942 100644
--- a/packages/google-tag-manager/README.md
+++ b/packages/google-tag-manager/README.md
@@ -43,6 +43,7 @@ id: () => {
   id: 'GTM-XXXXXXX',
   layer: 'dataLayer',
   pageTracking: false,
+  respectDoNotTrack: false,
   dev: true, // set to false to disable in dev mode
   query: {
     // query params...
@@ -50,13 +51,14 @@ id: () => {
     gtm_preview:     '...',
     gtm_cookies_win: '...'
   },
-  scriptURL: '//example.com'
+  scriptURL: '//example.com',
+  noscriptURL: '//example.com'
 }
 ```
 
 ### Router Integration
 
-You can optionally set `pageTracking` option to `true` to track page views. 
+You can optionally set `pageTracking` option to `true` to track page views.
 
 This is disabled by default to prevent double events when using alongside with Google Analytics so take care before enabling this option.
 
diff --git a/packages/google-tag-manager/index.js b/packages/google-tag-manager/index.js
index 876f5fc9..76a6be9e 100644
--- a/packages/google-tag-manager/index.js
+++ b/packages/google-tag-manager/index.js
@@ -8,8 +8,10 @@ module.exports = async function nuxtTagManager(_options) {
     pageTracking: false,
     respectDoNotTrack: false,
     dev: true,
-    env: {}, // env is supported for backward compability and is alias of query
-    query: {}
+    query: {},
+    scriptURL: '//www.googletagmanager.com/gtm.js',
+    noscriptURL: '//www.googletagmanager.com/ns.html',
+    env: {} // env is supported for backward compability and is alias of query
   })
 
   // Don't include when run in dev mode unless dev: true is configured
@@ -40,12 +42,28 @@ module.exports = async function nuxtTagManager(_options) {
     .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`)
     .join('&')
 
+  // sanitization before to avoid errors like "cannot push to undefined"
+  this.options.head = this.options.head || {}
+  this.options.head.noscript = this.options.head.noscript || []
+  this.options.head.script = this.options.head.script || []
+
   // Add google tag manager script to head
   this.options.head.script.push({
     src: (options.scriptURL || '//www.googletagmanager.com/gtm.js') + '?' + queryString,
     async: true
   })
 
+  // prepend google tag manager <noscript> fallback to <body>
+  this.options.head.noscript.push({
+    vmid: 'gtm-noscript',
+    innerHTML: `<iframe src="${(options.noscriptURL || '//www.googletagmanager.com/ns.html')}?${queryString}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+    pbody: true
+  })
+
+  // disables sanitazion for gtm noscript as we're using .innerHTML
+  this.options.head.__dangerouslyDisableSanitizersByTagID = this.options.head.__dangerouslyDisableSanitizersByTagID || {};
+  this.options.head.__dangerouslyDisableSanitizersByTagID['gtm-noscript'] = ['innerHTML']
+
   // Register plugin
   this.addPlugin({
     src: path.resolve(__dirname, 'plugin.js'),
