Insert gtm.js script after gtag script

Author: fvsch

.vitepress/config.ts

@@ -143,23 +143,37 @@ function getAnalyticsTags({
 
   const tags: HeadConfig[] = [];
 
-  // We're migrating from gtag.js to gtm.js, but using both as we verify this change
-  if (VITE_GTM_ID) {
-    const js = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','${VITE_GTM_ID}');`;
-    tags.push(['script', {}, js]);
-  }
-
   if (VITE_GTAG_ID) {
     const url = `https://www.googletagmanager.com/gtag/js?id=${VITE_GTAG_ID}`;
     tags.push(['script', { async: '', src: url }]);
-    const source = `function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag('js',new Date),gtag('config','${VITE_GTAG_ID}',{anonymize_ip:true})`;
+    const source = `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments)}
+gtag('js', new Date);
+gtag('config', '${VITE_GTAG_ID}', {anonymize_ip:true});
+`;
     tags.push(['script', {}, source]);
   }
 
+  // We're migrating from gtag.js to gtm.js, but using both as we verify this change.
+  // According to https://support.google.com/tagmanager/answer/6103696 this should be
+  // inserted after any script declaring a dataLayer.
+  if (VITE_GTM_ID) {
+    const js = `
+(function(w, d, s, l, i){
+  w[l] = w[l] || [];
+  w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
+  let f = d.getElementsByTagName(s)[0];
+  let j = d.createElement(s);
+  let dl = l != 'dataLayer' ? '&l=' + l : '';
+  j.async = true;
+  j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+  f.before(j);
+})(window, document, 'script', 'dataLayer', '${VITE_GTM_ID}');
+`;
+    tags.push(['script', {}, js]);
+  }
+
   return tags;
 }