fix(document): script analytics cloudflare

Fadhilamadan · Sep 26, 2021 · f3f883b · f3f883b
1 parent bbbf05f
commit f3f883b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/config/analytics.js b/config/analytics.js
@@ -1,3 +1,5 @@
 module.exports = {
-  cloudflare: process.env.CLOUDFLARE_API_KEY,
+  cloudflare: JSON.stringify({
+    token: process.env.NEXT_PUBLIC_CLOUDFLARE_API_KEY,
+  }),
 };
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -10,14 +10,8 @@ import Document, {
   Main,
   NextScript,
 } from 'next/document';
-import Script from 'next/script';
 
 export default class CustomDocument extends Document {
-  fonts = [
-    'https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap',
-    'https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap',
-  ];
-
   static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
     return { ...initialProps };
@@ -30,10 +24,17 @@ export default class CustomDocument extends Document {
           <meta charSet="UTF-8" />
           <meta content="ie=edge" httpEquiv="X-UA-Compatible" />
 
+          <link href="https://fonts.googleapis.com" rel="preconnect" />
           <link href="https://fonts.gstatic.com" rel="preconnect" />
-          {this.fonts.map((font) => (
-            <link key={font} href={font} rel="stylesheet" />
-          ))}
+
+          <link
+            href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
+            rel="stylesheet"
+          />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap"
+            rel="stylesheet"
+          />
         </Head>
 
         <body>
@@ -42,8 +43,9 @@ export default class CustomDocument extends Document {
           <NextScript />
 
           {/* Cloudflare Web Analytics */}
-          <Script
-            data-cf-beacon={`{"token": "${analytics.cloudflare}"}`}
+          <script
+            data-cf-beacon={analytics.cloudflare}
+            defer
             src="https://static.cloudflareinsights.com/beacon.min.js"
           />
         </body>