docs: add gtml

.github/workflows/deploy.yaml

@@ -28,6 +28,8 @@ jobs:
 
       - name: Build app
         run: npm run docs:build
+        env:
+          STORYBOOK_GTM_ID: ${{ vars.STORYBOOK_GTM_ID }}
 
       - name: Setup Pages
         uses: actions/configure-pages@v3

.storybook/manager-head.html

@@ -37,3 +37,31 @@
 />
 <meta name="apple-mobile-web-app-title" content="SVG to Inline" />
 <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png" />
+
+<!-- Google Tag Manager -->
+<script>
+  ;(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', '%STORYBOOK_GTM_ID%')
+</script>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    var noScript = document.createElement('noscript')
+    var iframe = document.createElement('iframe')
+    iframe.src =
+      'https://www.googletagmanager.com/ns.html?id=%STORYBOOK_GTM_ID%'
+    iframe.height = '0'
+    iframe.width = '0'
+    iframe.style.cssText = 'display: none; visibility: hidden'
+    noScript.appendChild(iframe)
+    document.body.appendChild(noScript)
+  })
+</script>