fix ad unit script not loading

dominicarrojado · May 28, 2023 · 1c18317 · 1c18317
1 parent 7eeded1
commit 1c18317
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/components/adUnit.tsx b/components/adUnit.tsx
@@ -17,9 +17,13 @@ function AdUnit({ adSlot, adFormat, className }: Props) {
   }, []);
 
   return (
-    <div className={className}>
+    <div>
       <ins
-        className={cn('adsbygoogle block max-w-xl mx-auto', styles.adunit)}
+        className={cn(
+          'adsbygoogle block max-w-xl mx-auto',
+          className,
+          styles.adunit
+        )}
         data-ad-client={GOOGLE_ADSENSE_CLIENT_ID}
         data-ad-slot={adSlot}
         data-ad-format={adFormat}

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -20,6 +20,7 @@ export default function Layout({ children }: Props) {
         <AdUnit
           adSlot={GoogleAdSenseUnitSlot.PROJECT_HEADER}
           adFormat={GoogleAdSenseUnitFormat.FLUID}
+          className="mb-8"
         />
         <PageTitle>
           Embassy of Japan in Singapore Visa Appointment Notification Service
@@ -29,6 +30,7 @@ export default function Layout({ children }: Props) {
         <AdUnit
           adSlot={GoogleAdSenseUnitSlot.PROJECT_FOOTER}
           adFormat={GoogleAdSenseUnitFormat.FLUID}
+          className="mt-8"
         />
       </main>
       <Footer className="mt-10" />

diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx
@@ -1,6 +1,7 @@
 import Layout from '@/components/layout';
 import SeoTags from '@/components/seoTags';
 import TagManager from '@/components/tagManager';
+import AdUnitScript from '@/components/adUnitScript';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 
@@ -9,6 +10,7 @@ export default function App({ Component, pageProps }: AppProps) {
     <>
       <SeoTags />
       <TagManager />
+      <AdUnitScript />
       <Layout>
         <Component {...pageProps} />
       </Layout>

diff --git a/pages/_document.page.tsx b/pages/_document.page.tsx
@@ -1,12 +1,9 @@
 import { Html, Head, Main, NextScript } from 'next/document';
-import AdUnitScript from '@/components/adUnitScript';
 
 export default function Document() {
   return (
     <Html lang="en">
-      <Head>
-        <AdUnitScript />
-      </Head>
+      <Head />
       <body>
         <Main />
         <NextScript />