feat: setup gtm analytic (#44)

.env.example

@@ -0,0 +1 @@
+GTM_ID=xxxx

next.config.js

@@ -1,16 +1,18 @@
-const withNextra = require('nextra')({
-    theme: 'nextra-theme-docs',
-    themeConfig: './theme.config.jsx'
-})
-
+const withNextra = require("nextra")({
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.jsx",
+});
 
 const nextConfig = {
-    reactStrictMode: true,
-    output: 'export',
-    images: {
-        formats: ['image/webp'],
-        unoptimized: true,
-    },
-}
+  reactStrictMode: true,
+  output: "export",
+  env: {
+    GTM_ID: process.env.GTM_ID,
+  },
+  images: {
+    formats: ["image/webp"],
+    unoptimized: true,
+  },
+};
 
-module.exports = withNextra(nextConfig)
+module.exports = withNextra(nextConfig);

src/pages/_app.mdx

@@ -3,9 +3,28 @@ import '@code-hike/mdx/styles.css'
 import { Fragment } from "react"
 import Script from "next/script"
 
+
 export default function App({ Component, pageProps }) {
   return (
     <Fragment>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GTM_ID}`}
+      />
+      <Script
+        id="gtag-init"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.GTM_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+        }}
+      />
       <Component {...pageProps} />
     </Fragment>
   )