[docs] Fix ad duplication (#25831)

mui · Apr 19, 2021 · cf6d544 · cf6d544
1 parent 419a148
commit cf6d544
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 30 deletions.
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
 import AdCarbon from 'docs/src/modules/components/AdCarbon';
 import AdReadthedocs from 'docs/src/modules/components/AdReadthedocs';
@@ -11,10 +11,6 @@ import { AdContext, adShape } from 'docs/src/modules/components/AdManager';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 
 const styles = (theme) => ({
-  root: {
-    position: 'relative',
-    display: 'block',
-  },
   'placement-body-image': {
     margin: theme.spacing(4, 1, 3),
     minHeight: 126,
@@ -32,17 +28,15 @@ const styles = (theme) => ({
     alignItems: 'flex-end',
   },
   paper: {
-    padding: theme.spacing(1.5),
     border: `2px solid ${theme.palette.primary.main}`,
-    display: 'block',
   },
 });
 
 function PleaseDisableAdblock(props) {
   const t = useTranslate();
 
   return (
-    <Paper component="span" elevation={0} {...props}>
+    <Paper component="span" elevation={0} sx={{ display: 'block', p: 1.5 }} {...props}>
       <Typography variant="body2" display="block" component="span" gutterBottom>
         {t('likeMui')}
       </Typography>
@@ -128,7 +122,7 @@ function Ad(props) {
 
   let children;
   let label;
-  // Hide the content to google bot.
+  // Hide the content to google bot to avoid its indexation.
   if (/Googlebot/.test(navigator.userAgent) || disable) {
     children = <span />;
   } else if (adblock) {
@@ -151,7 +145,7 @@ function Ad(props) {
   }
 
   const ad = React.useContext(AdContext);
-  const eventLabel = label ? `${label}-${ad.portal.placement}-${adShape}` : null;
+  const eventLabel = label ? `${label}-${ad.placement}-${adShape}` : null;
 
   const timerAdblock = React.useRef();
 
@@ -220,14 +214,19 @@ function Ad(props) {
   }, [eventLabel]);
 
   return (
-    <span
-      className={clsx(classes.root, classes[`placement-body-${adShape}`])}
+    <Box
+      component="span"
+      sx={{
+        position: 'relative',
+        display: 'block',
+      }}
+      className={classes[`placement-body-${adShape}`]}
       data-ga-event-category="ad"
       data-ga-event-action="click"
       data-ga-event-label={eventLabel}
     >
       {children}
-    </span>
+    </Box>
   );
 }
 

diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js
@@ -26,11 +26,20 @@ function AdCarbonImage() {
   const ref = React.useRef(null);
 
   React.useEffect(() => {
-    const script = loadScript(
-      'https://cdn.carbonads.com/carbon.js?serve=CKYIL27L&placement=material-uicom',
-      ref.current,
-    );
-    script.id = '_carbonads_js';
+    // The isolation logic of carbonads is flawed.
+    // Once the script starts loading, it will asynchronous resolve, with no way to stop it.
+    // This leads to duplication of the ad. To solve the issue, we debounce the load action.
+    const load = setTimeout(() => {
+      const script = loadScript(
+        'https://cdn.carbonads.com/carbon.js?serve=CKYIL27L&placement=material-uicom',
+        ref.current,
+      );
+      script.id = '_carbonads_js';
+    });
+
+    return () => {
+      clearTimeout(load);
+    };
   }, []);
 
   return <span ref={ref} />;

diff --git a/docs/src/modules/components/AdGuest.js b/docs/src/modules/components/AdGuest.js
@@ -6,7 +6,7 @@ import { AdContext } from 'docs/src/modules/components/AdManager';
 export default function AdGuest(props) {
   const ad = React.useContext(AdContext);
 
-  if (!ad.portal.element) {
+  if (!ad.element) {
     return null;
   }
 
@@ -15,13 +15,13 @@ export default function AdGuest(props) {
       container={() => {
         const description = document.querySelector('.description');
 
-        if (ad.portal.element === description) {
+        if (ad.element === description) {
           description.classList.add('ad');
         } else {
           description.classList.remove('ad');
         }
 
-        return ad.portal.element;
+        return ad.element;
       }}
     >
       {props.children}

diff --git a/docs/src/modules/components/AdManager.js b/docs/src/modules/components/AdManager.js
@@ -21,15 +21,7 @@ export default function AdManager(props) {
     setPortal({ placement: 'body-top', element: description });
   }, []);
 
-  return (
-    <AdContext.Provider
-      value={{
-        portal,
-      }}
-    >
-      {props.children}
-    </AdContext.Provider>
-  );
+  return <AdContext.Provider value={portal}>{props.children}</AdContext.Provider>;
 }
 
 AdManager.propTypes = {