removing Google Ads for Carbon Ads

Author: Alex Patterson

app/(main)/(post)/post/[slug]/page.tsx

@@ -22,6 +22,7 @@ import CoverMedia from "@/components/cover-media";
 import MoreHeader from "@/components/more-header";
 import { BreadcrumbLinks } from "@/components/breadrumb-links";
 import SponsorCard from "@/components/sponsor-card";
+import CarbonAdBanner from "@/components/carbon-ad-banner";
 
 type Props = {
   params: { slug: string };
@@ -109,11 +110,7 @@ export default async function PostPage({ params }: Props) {
             <hr className="border-accent-2" />
           </section>
         ) : (
-          <GoogleAdBanner
-            data-ad-slot="4960900523"
-            data-full-width-responsive="true"
-            data-ad-format="auto"
-          />
+          <CarbonAdBanner />
         )}
         {post.content?.length && (
           <PortableText

app/(main)/layout.tsx

@@ -139,12 +139,6 @@ export default async function RootLayout({
             <SpeedInsights />
           </ThemeProvider>
         </PlayerProvider>
-        <Script
-          async
-          src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}`}
-          strategy="lazyOnload"
-          crossOrigin="anonymous"
-        ></Script>
       </body>
     </html>
   );

components/carbon-ad-banner.tsx

@@ -0,0 +1,16 @@
+"use client"
+import { useEffect, useRef } from "react";
+
+export default function CarbonAdBanner() {
+    const reference = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!reference.current) return;
+        reference.current.innerHTML = "";
+        const s = document.createElement("script");
+        s.id = "_carbonads_js";
+        s.src = `//cdn.carbonads.com/carbon.js?serve=CW7DCKJJ&placement=codingcatdev&format=cover`;
+        reference.current.appendChild(s);
+    }, []);
+    return <div className="flex justify-center my-2" ref={reference} />;
+}