refactor: use gpt ads instead of adsense automatic implementation

Author: danielbarion

docs/docusaurus.config.js

@@ -30,18 +30,14 @@ const config = {
   },
 
   scripts: [
-    // {
-    //   src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7420210265158247',
-    //   async: true,
-    // },
-    // {
-    //   src: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js',
-    //   async: true,
-    // },
-    // {
-    //   src: '/js/gpt.js',
-    //   async: true,
-    // },
+    {
+      src: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js',
+      async: true,
+    },
+    {
+      src: '/js/gpt.js',
+      async: true,
+    },
   ],
 
   presets: [

docs/src/theme/Footer/index.js

@@ -1,32 +1,23 @@
-// import React, { useEffect } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import TOC from '@theme-original/TOC'
 
-// import styles from './index.module.css'
+import styles from './index.module.css'
 
-// const AdsContainerElement = ({ id }) => {
-//   useEffect(() => {
-//     if (typeof window !== 'undefined') {
-//       window.dispatchEvent(new CustomEvent('AdsContainerMounted', { detail: { id } }))
-//     }
-//   }, [])
+const AdsContainerElement = ({ id }) => {
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('AdsContainerMounted', { detail: { id } }))
+    }
+  }, [])
 
-//   return <div id={id} className={styles.adsContainer} />
-// }
+  return <div id={id} className={styles.adsContainer} />
+}
 
 export default function TOCWrapper(props) {
   return (
     <>
       <TOC {...props} />
-      {/* <AdsContainerElement id="right-sidebar-ads" /> */}
-      <ins
-        className="adsbygoogle"
-        style={{ display: 'block', position: 'fixed' }}
-        data-ad-client="ca-pub-7420210265158247"
-        data-ad-slot="8711379942"
-        data-ad-format="auto"
-        data-full-width-responsive="true"
-      />
+      <AdsContainerElement id="right-sidebar-ads" />
     </>
   )
 }

docs/src/theme/TOC/index.js

@@ -1,41 +1,42 @@
-window.onload = () => {
-  ;(window.adsbygoogle = window.adsbygoogle || []).push({})
+// prevent loading ads in localhost
+const development = window.location.host !== 'react-tooltip.com'
+// use sandbox ads to test in localhost
+const slotPath = development
+  ? '/6355419/Travel/Europe/France/Paris'
+  : '/22862227500/desktop-sidebar-right'
+
+window.reactTooltipAds = {
+  initialized: {},
 }
 
-// window.reactTooltipAds = {
-//   initialized: {},
-// }
-// window.googletag = window.googletag || { cmd: [] }
-
-// window.googletag.cmd.push(function () {
-//   window.googletag
-//     .defineSlot('/6355419/Travel/Europe/France/Paris', [300, 250], 'right-sidebar-ads')
-//     .addService(window.googletag.pubads())
-//   window.googletag.enableServices()
-// })
-
-// const handleLoadAds = (event) => {
-//   const { id } = event.detail
-
-//   if (window.innerWidth < 1024) {
-//     return
-//   }
-
-//   console.log('loading ads for container: ', id)
-//   window.googletag.cmd.push(function () {
-//     if (window.reactTooltipAds.initialized[id]) {
-//       window.googletag.cmd.push(function () {
-//         window.googletag.pubads().refresh()
-//       })
-
-//       window.googletag.display(id)
-//     } else {
-//       window.googletag.display(id)
-//       window.reactTooltipAds.initialized[id] = true
-//     }
-
-//     console.log('displayed: ', id)
-//   })
-// }
-
-// window.addEventListener('AdsContainerMounted', handleLoadAds)
+window.googletag = window.googletag || { cmd: [] }
+
+window.googletag.cmd.push(function () {
+  window.googletag
+    .defineSlot(slotPath, [300, 250], 'right-sidebar-ads')
+    .addService(window.googletag.pubads())
+  window.googletag.enableServices()
+})
+
+const handleLoadAds = (event) => {
+  const { id } = event.detail
+
+  if (window.innerWidth < 1024) {
+    return
+  }
+
+  window.googletag.cmd.push(function () {
+    if (window.reactTooltipAds.initialized[id]) {
+      window.googletag.cmd.push(function () {
+        window.googletag.pubads().refresh()
+      })
+
+      window.googletag.display(id)
+    } else {
+      window.googletag.display(id)
+      window.reactTooltipAds.initialized[id] = true
+    }
+  })
+}
+
+window.addEventListener('AdsContainerMounted', handleLoadAds)