From ae658507e23201fae46ac2d129cff9d31a7fe74b Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Fri, 5 Apr 2024 11:22:52 +0200
Subject: [PATCH] [docs-infra] Fix analytics about inline ads (#41474)

---
 docs/src/modules/components/Ad.js        |  3 ++-
 docs/src/modules/components/AdCarbon.js  |  1 +
 docs/src/modules/components/AdDisplay.js | 13 +++++++++++++
 docs/src/modules/constants.js            |  4 ++++
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
index 9750bfeed8b6ab..0e612dc7970101 100644
--- 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
index 64963da1702729..bd62cf8bfe3871 100644
--- 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
index 1de9a19857246f..e31003bd3225de 100644
--- 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
index 7e5a49edcd5a32..527946179861bd 100644
--- 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,
 };