add google adsense

hlog-kr · Sep 28, 2023 · 33c5796 · 33c5796
1 parent b745be1
commit 33c5796
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 2 deletions.
diff --git a/components/GAdsBanner.js b/components/GAdsBanner.js
@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+import siteMetadata from '@/data/siteMetadata'
+
+const GAdsBanner = ({ slot }) => {
+  const isProduction = true //process.env.NODE_ENV === 'production'
+
+  useEffect(() => {
+    if (!isProduction) return
+    try {
+      ;(window.adsbygoogle = window.adsbygoogle || []).push({})
+    } catch (err) {
+      console.log(err)
+    }
+  }, [])
+
+  return (
+    isProduction && (
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block' }}
+        data-ad-client={siteMetadata.ads.googleAdsenseId}
+        data-ad-slot={slot}
+        data-ad-format="auto"
+        data-full-width-responsive="true"
+      />
+    )
+  )
+}
+
+export default GAdsBanner
diff --git a/components/LayoutWrapper.js b/components/LayoutWrapper.js
@@ -6,6 +6,7 @@ import SectionContainer from './SectionContainer'
 import Footer from './Footer'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
+import GAdsBanner from '@/components/GAdsBanner'
 
 const LayoutWrapper = ({ children }) => {
   return (
@@ -44,6 +45,7 @@ const LayoutWrapper = ({ children }) => {
             <MobileNav />
           </div>
         </header>
+        <GAdsBanner slot="your_slotnumber" />
         <main className="mb-auto">{children}</main>
         <Footer />
       </div>

diff --git a/data/siteMetadata.js b/data/siteMetadata.js
@@ -27,6 +27,9 @@ const siteMetadata = {
     googleAnalyticsId: 'Your Measurement ID', // e.g. UA-000000-2 or G-XXXXXXX
     posthogAnalyticsId: '', // posthog.init e.g. phc_5yXvArzvRdqtZIsHkEm3Fkkhm3d0bEYUXCaFISzqPSQ
   },
+  ads: {
+    googleAdsenseId: 'your_googleAdsenseId',
+  },
   newsletter: {
     // supports mailchimp, buttondown, convertkit, klaviyo, revue, emailoctopus
     // Please add your .env file and modify it according to your selection

diff --git a/layouts/PostToc.js b/layouts/PostToc.js
@@ -7,6 +7,7 @@ import Comments from '@/components/comments'
 import ScrollTopAndComment from '@/components/ScrollTopAndComment'
 import TocSide from '@/components/Tocbot'
 import RelatedPosts from '@/components/RelatedPosts'
+import GAdsBanner from '@/components/GAdsBanner'
 
 const postDateTemplate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
 
@@ -65,6 +66,9 @@ export default function PostLayout({ frontMatter, authorDetails, children, relat
                   </div>
                 )}
               </div>
+              <div className="lg-block hidden">
+                <GAdsBanner slot="your_slotnumber" />
+              </div>
             </footer>
           </div>
         </div>

diff --git a/next.config.js b/next.config.js
@@ -5,13 +5,13 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 // You might need to insert additional domains in script-src if you are using external services
 const ContentSecurityPolicy = `
   default-src 'self';
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app *.googletagmanager.com;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app *.googletagmanager.com *.googlesyndication.com *.googleadservices.com *.google.com;
   style-src 'self' 'unsafe-inline' giscus.app;
   img-src * blob: data:;
   media-src 'none';
   connect-src *;
   font-src 'self';
-  frame-src giscus.app
+  frame-src giscus.app googleads.g.doubleclick.net *.google.com *.googlesyndication.com
 `
 
 const securityHeaders = [

diff --git a/pages/_document.js b/pages/_document.js
@@ -1,6 +1,9 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
+import siteMetadata from '@/data/siteMetadata'
 class MyDocument extends Document {
   render() {
+    const isProduction = true //process.env.NODE_ENV === 'production' // add
+
     return (
       <Html lang="en" className="scroll-smooth">
         <Head>
@@ -23,6 +26,15 @@ class MyDocument extends Document {
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
           <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
+          {/* add [[ */}
+          {isProduction && (
+            <script
+              async
+              src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${siteMetadata.ads.googleAdsenseId}`}
+              crossOrigin="anonymous"
+            ></script>
+          )}
+          {/* add ]] */}
         </Head>
         <body className="bg-white text-black antialiased dark:bg-gray-900 dark:text-white">
           <Main />