[docs-infra] Fix analytics about inline ads (#41474) (#41819)

mui · Apr 9, 2024 · 16d523f · 16d523f
1 parent c102ebb
commit 16d523f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -5,6 +5,7 @@ import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import AdCarbon from 'docs/src/modules/components/AdCarbon';
 import AdInHouse from 'docs/src/modules/components/AdInHouse';
+import { GA_ADS_DISPLAY_RATIO } from 'docs/src/modules/constants';
 import { AdContext, adShape } from 'docs/src/modules/components/AdManager';
 import { useTranslate } from '@mui/docs/i18n';
 
@@ -197,7 +198,7 @@ export default function Ad() {
 
   React.useEffect(() => {
     // Avoid an exceed on the Google Analytics quotas.
-    if (Math.random() < 0.9 || !eventLabel) {
+    if (Math.random() > GA_ADS_DISPLAY_RATIO || !eventLabel) {
       return undefined;
     }
 

diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js
@@ -126,6 +126,7 @@ export function AdCarbonInline(props) {
           name: ad.company,
           description: `<strong>${ad.company}</strong> - ${ad.description}`,
           poweredby: 'Carbon',
+          label: 'carbon-demo-inline',
         }}
       />
     </React.Fragment>

diff --git a/docs/src/modules/components/AdDisplay.js b/docs/src/modules/components/AdDisplay.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { adShape } from 'docs/src/modules/components/AdManager';
+import { GA_ADS_DISPLAY_RATIO } from 'docs/src/modules/constants';
 import { adStylesObject } from 'docs/src/modules/components/ad.styles';
 
 const Root = styled('span', { shouldForwardProp: (prop) => prop !== 'shape' })(({
@@ -23,6 +24,18 @@ const Root = styled('span', { shouldForwardProp: (prop) => prop !== 'shape' })((
 export default function AdDisplay(props) {
   const { ad, className, shape = 'auto' } = props;
 
+  React.useEffect(() => {
+    // Avoid an exceed on the Google Analytics quotas.
+    if (Math.random() > GA_ADS_DISPLAY_RATIO || !ad.label) {
+      return;
+    }
+
+    window.gtag('event', 'ad', {
+      eventAction: 'display',
+      eventLabel: ad.label,
+    });
+  }, [ad.label]);
+
   /* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */
   return (
     <Root shape={shape === 'inline' ? 'inline' : adShape} className={className}>

diff --git a/docs/src/modules/constants.js b/docs/src/modules/constants.js
@@ -17,8 +17,12 @@ const LANGUAGES_LABEL = [
   },
 ];
 
+// The ratio of ads display sending event to Google Analytics
+const GA_ADS_DISPLAY_RATIO = 0.1;
+
 module.exports = {
   CODE_VARIANTS,
   LANGUAGES_LABEL,
   CODE_STYLING,
+  GA_ADS_DISPLAY_RATIO,
 };