chore: add initial anchor implementation for ads

Author: danielbarion

docs/src/components/AdsContainerElement/index.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react'
+import styles from './styles.module.css'
+
+const AdsContainerElement = ({ id }) => {
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('AdsContainerMounted', { detail: { id } }))
+    }
+  }, [])
+
+  return <div id={id} className={styles.adsContainer} />
+}
+
+export default AdsContainerElement

docs/src/theme/TOC/index.module.css renamed to docs/src/components/AdsContainerElement/styles.module.css

@@ -1,7 +1,6 @@
-
 .adsContainer {
   position: sticky;
   top: calc(3.75rem + 12rem);
-  width: 300px;
-  height: 250px;
+  /* width: 300px; */
+  /* height: 250px; */
 }

docs/src/theme/Footer/index.js

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react'
+import Footer from '@theme-original/Footer'
+// import AdsContainerElement from '@site/src/components/AdsContainerElement'
+
+export default function FooterWrapper(props) {
+  return (
+    <>
+      <Footer {...props} />
+      {/* <AdsContainerElement id="mobile-anchor-ads" /> */}
+    </>
+  )
+}

docs/src/theme/TOC/index.js

@@ -1,17 +1,7 @@
-import React, { useEffect } from 'react'
+/* eslint-disable import/no-unresolved */
+import React from 'react'
 import TOC from '@theme-original/TOC'
-
-import styles from './index.module.css'
-
-const AdsContainerElement = ({ id }) => {
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      window.dispatchEvent(new CustomEvent('AdsContainerMounted', { detail: { id } }))
-    }
-  }, [])
-
-  return <div id={id} className={styles.adsContainer} />
-}
+import AdsContainerElement from '@site/src/components/AdsContainerElement'
 
 export default function TOCWrapper(props) {
   return (

docs/static/js/gpt.js

@@ -1,9 +1,10 @@
 // prevent loading ads in localhost
 const development = window.location.host !== 'react-tooltip.com'
 // use sandbox ads to test in localhost
-const slotPath = development
+const slotPathRightSidebarAdUnit = development
   ? '/6355419/Travel/Europe/France/Paris'
   : '/22862227500/desktop-sidebar-right'
+const slotPathAnchorAdUnit = development ? '/6355419/Travel' : '/22862227500/desktop-sidebar-right'
 
 window.reactTooltipAds = {
   initialized: {},
@@ -13,15 +14,22 @@ window.googletag = window.googletag || { cmd: [] }
 
 window.googletag.cmd.push(function () {
   window.googletag
-    .defineSlot(slotPath, [300, 250], 'right-sidebar-ads')
+    .defineSlot(slotPathRightSidebarAdUnit, [300, 250], 'right-sidebar-ads')
+    .addService(window.googletag.pubads())
+  window.googletag.enableServices()
+})
+
+window.googletag.cmd.push(function () {
+  window.googletag
+    .defineOutOfPageSlot(slotPathAnchorAdUnit, window.googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR)
     .addService(window.googletag.pubads())
   window.googletag.enableServices()
 })
 
 const handleLoadAds = (event) => {
   const { id } = event.detail
 
-  if (window.innerWidth < 1024) {
+  if (window.innerWidth < 1024 && !id.includes('anchor')) {
     return
   }