feat: add ga tag

Author: sonht1109

src/components/ga/GA.tsx

@@ -0,0 +1,26 @@
+import Script from "next/script";
+
+const GoogleAnalytics = ({ gaId }: { gaId: string }) => {
+  return (
+    <>
+      <Script
+        async
+        src={`https://www.googletagmanager.com/gtag/js? 
+        id=${gaId}`}
+      ></Script>
+      <Script
+        id="google-analytics"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+  
+            gtag('config', '${gaId}');
+          `,
+        }}
+      ></Script>
+    </>
+  );
+};
+export default GoogleAnalytics;

src/components/ga/index.ts

@@ -0,0 +1 @@
+export { default } from './GA';

src/pages/_app.tsx

@@ -1,14 +1,18 @@
+import "react-photo-view/dist/react-photo-view.css";
 import "../globals.css";
-import 'react-photo-view/dist/react-photo-view.css';
 
-import { Analytics } from '@vercel/analytics/react';
+import { Analytics } from "@vercel/analytics/react";
 import { PhotoProvider } from "react-photo-view";
+import GoogleAnalytics from "@/components/ga";
 
 export default function MyApp({ Component, pageProps }: any) {
   return (
-    <PhotoProvider>
-      <Component {...pageProps} />
-      <Analytics />
-    </PhotoProvider>
+    <>
+      <GoogleAnalytics gaId={"G-PZZ787TZQ5"} />
+      <PhotoProvider>
+        <Component {...pageProps} />
+        <Analytics />
+      </PhotoProvider>
+    </>
   );
 }

src/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";
 
 export default function Document() {
   const meta = {
@@ -12,10 +12,16 @@ export default function Document() {
         <meta name="robots" content="follow,index" />
         <meta name="description" content={meta.description} />
         <meta property="og:site_name" content={meta.title} />
-        <meta property="og:image" content="https://blogs.sonht.io.vn/large-preview.png" />
+        <meta
+          property="og:image"
+          content="https://blogs.sonht.io.vn/large-preview.png"
+        />
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:site" content="@sonht1109" />
-        <meta name="twitter:image" content="https://blogs.sonht.io.vn/large-preview.png" />
+        <meta
+          name="twitter:image"
+          content="https://blogs.sonht.io.vn/large-preview.png"
+        />
 
         <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32" />
       </Head>

theme.config.jsx

@@ -20,9 +20,9 @@ const config = {
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
               class="icon icon-tabler icons-tabler-outline icon-tabler-world"
             >
               <path stroke="none" d="M0 0h24v24H0z" fill="none" />