feat(google-tag-manager): add <noscript> fallback (#263) (#300)

nuxt-community · Aug 31, 2019 · f0dd65f · f0dd65f
1 parent a5bb897
commit f0dd65f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/packages/google-tag-manager/README.md b/packages/google-tag-manager/README.md
@@ -43,20 +43,22 @@ id: () => {
   id: 'GTM-XXXXXXX',
   layer: 'dataLayer',
   pageTracking: false,
+  respectDoNotTrack: false,
   dev: true, // set to false to disable in dev mode
   query: {
     // query params...
     gtm_auth:        '...',
     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
@@ -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'),